Monday, April 17, 2017

Membuat menu pada userform excel macro

Banyak komentar tentang bagaimana membuat menu pada userform dengan macro excel di aplikasikeuanganaja.blogspot.co.id, saya mencoba memposting ulang tentang bagaimana cara membuat menu pada userform excel. 

Userform selain untuk menampilkan data melalui tool box, juga bisa dipakai untuk menampilkan menu agar tampilan menu tidak dibuat berderet pada userform itu sendiri, kalau pada blog mirip menu horizontal.sehingga penampilan dari userform itu lebih interaktif dan bisa dibuat seperti aplikasi-aplikasi lainnya seperti pada web ataupun aplikasi seperti visual basic.

Ok langsung saja saya berikan tips membuat menu pada userform dengan menggunakan macro excel.berikut langkah-langkahnya :

  1. Bukalah file excel. kemudian bukalah jendela visual basic pada menu developer atau dengan menekan Alt + F11 pada keyboad.
  2. Kemudian pilih menu insert Module lalu copykan kode berikut :
  3. Option Explicit
    Option Base 1
    ' membuat Windows Menu dengan menggunakan API
    '--------------------------------------------

    ' Membuat horizontal menu bar di bagian atas
    Public Declare Function CreateMenu Lib "user32" () As Long

    Public Declare Function CreatePopupMenu Lib "user32" () As Long

    Public Declare Function FindWindow Lib "user32" _
            Alias "FindWindowA" ( _
                ByVal lpClassName As String, _
                ByVal lpWindowName As String) As Long

    Public Declare Function GetMenu Lib "user32" (ByVal hwnd As Long) As Long

    Public Declare Function AppendMenu Lib "user32" _
            Alias "AppendMenuA" ( _
                ByVal hMenu As Long, _
                ByVal wFlags As Long, _
                ByVal wIDNewItem As Long, _
                ByVal lpNewItem As String) As Long

    Public Declare Function SetMenu Lib "user32" ( _
            ByVal hwnd As Long, _
            ByVal hMenu As Long) As Long

    Public Declare Function DestroyMenu Lib "user32" ( _
            ByVal hMenu As Long) As Long

    Public Declare Function SetWindowLong Lib "user32" _
            Alias "SetWindowLongA" ( _
                ByVal hwnd As Long, _
                ByVal nIndex As Long, _
                ByVal dwNewLong As Long) As Long

    Public Const MF_SEPARATOR As Long = &H800&
    Public Const MF_POPUP = &H10
    Public Const MF_STRING = &H0


    Public Const IDM_MU As Long = &H7D0 ' Menu Item ID
    '//
    Public g_hPopUpMenu() As Long       ' Popupmenu handles
    Public g_hMenu As Long              ' Userform menu handle
    Public g_hPopUpSubMenu() As Long    ' Submenu handles
    Public g_Rt() As Long               ' Values for testing debuging
    Public g_APIMacro() As String       ' Routine names associated with Menus
    Public g_hForm As Long              ' Userform handle
    Public g_MNUSheet As Worksheet      ' Menu Sheet

    Public Sub CreateAPIMenu()
    ' sub ini harusnya terekseusi jika terjadi init Userform
    Dim RowNum As Long, _
        SubMNU As Long, _
        TopMNUitems As Long, _
        SubMNUItem As Long, _
        TopMNU As Long, _
        Rt As Long, _
        MacroNum As Long

    ' Set menusheet
    Set g_MNUSheet = ThisWorkbook.Sheets("APIMNU")

    With g_MNUSheet
        ' Set-up now
        TopMNUitems = .Range("A1")
        SubMNU = .Range("B1")
      
        ReDim g_hPopUpMenu(TopMNUitems)
        ReDim g_Rt(TopMNUitems)
        ReDim g_hPopUpSubMenu(SubMNU)
        ReDim g_APIMacro(.Range("C1").Value)
      
        ' Main Menu Area at top
        g_hMenu = CreateMenu()
        Rt = SetMenu(g_hForm, g_hMenu)
      
        ' Initialize variables
        RowNum = 0
        MacroNum = 1
        SubMNUItem = LBound(g_hPopUpSubMenu)
      
        For TopMNU = 1 To TopMNUitems
            RowNum = RowNum + 1
            g_hPopUpMenu(TopMNU) = CreatePopupMenu()
            If TopMNU = 1 Then
                g_Rt(TopMNU) = AppendMenu(g_hMenu, MF_POPUP, g_hPopUpMenu(TopMNU), .Cells(2 + RowNum, 2))
            Else
                g_Rt(TopMNU) = AppendMenu(g_hMenu, MF_POPUP, g_hPopUpMenu(TopMNU), .Cells(1 + RowNum, 2))
            End If
            Do Until .Cells(2 + RowNum, 4).Text = "END"
                Select Case .Cells(2 + RowNum, 1).Value
                    Case 1
                    Case 0
                        If .Cells(1 + RowNum, 1) = 4 Then
                            g_Rt(TopMNU) = AppendMenu(g_hPopUpSubMenu(SubMNUItem - 1), _
                                MF_SEPARATOR, &O0, vbNullString)
                        Else
                            g_Rt(TopMNU) = AppendMenu(g_hPopUpMenu(TopMNU), _
                                MF_SEPARATOR, &O1, vbNullString)
                        End If
                    Case 2
                        g_Rt(TopMNU) = AppendMenu(g_hPopUpMenu(TopMNU), MF_STRING, _
                            IDM_MU + .Cells(2 + RowNum, 5), .Cells(2 + RowNum, 2))
                        g_APIMacro(MacroNum) = .Cells(2 + RowNum, 3).Text
                        MacroNum = MacroNum + 1
                    Case 3
                        g_hPopUpSubMenu(SubMNUItem) = CreatePopupMenu()
                        g_Rt(TopMNU) = AppendMenu(g_hPopUpMenu(TopMNU), MF_POPUP, _
                            g_hPopUpSubMenu(SubMNUItem), .Cells(2 + RowNum, 2))
                        SubMNUItem = SubMNUItem + 1
                     Case 4
                        g_Rt(TopMNU) = AppendMenu(g_hPopUpSubMenu(SubMNUItem - 1), _
                            MF_STRING, IDM_MU + .Cells(2 + RowNum, 5), .Cells(2 + RowNum, 2))
                        g_APIMacro(MacroNum) = .Cells(2 + RowNum, 3).Text
                        MacroNum = MacroNum + 1
                    End Select
                RowNum = RowNum + 1
            Loop
        Next TopMNU
    End With

    End Sub

    Public Sub RunAPIMNUMacro(strMacroName As String)
        On Error Resume Next
        Application.Run (strMacroName)
        If Err Then
            MsgBox "Error number:=" & Err.Number & vbCrLf & _
                "Description:=" & Err.Description & vbCrLf & _
                "Check yur macro names!", vbCritical + vbMsgBoxHelpButton, _
                "Menu Macro Error", Err.HelpFile, Err.HelpContext
        End If
        Err.Clear
    End Sub
  4.  Setelah itu buatlah module dengan cara insert module, pada modul yang kedua ini ketikan script berikut :
  5. Option Explicit

    Public Declare Function CallWindowProc _
        Lib "user32" _
            Alias "CallWindowProcA" ( _
                ByVal lpPrevWndFunc As Long, _
                ByVal hwnd As Long, _
                ByVal Msg As Long, _
                ByVal wParam As Long, _
                ByVal lParam As Long) _
             As Long

    Private Const WM_COMMAND = &H111
    Private Const WM_MENUSELECT As Long = &H11F
    Public g_lpMyWndProc As Long
    Public Const GWL_WNDPROC = (-4)

    Public Function HookWinProc(ByVal hw As Long, ByVal uMsg As Long, _
        ByVal wParam As Long, ByVal lParam As Long) As Long

        If uMsg = WM_COMMAND Then
            DoEvents
            Call RunAPIMNUMacro(g_APIMacro(wParam - IDM_MU))
        End If
        HookWinProc = CallWindowProc(g_lpMyWndProc, hw, uMsg, wParam, lParam)
      
    End Function
  6. Untuk module yang ketiga ketikan kode berikut
  7. Option Explicit

    Sub Loader()

        #If VBA6 Then
            frmTask.show
        #Else
            Sorry
        #End If

    End Sub

    Sub Sorry()
        Dim Msg As String

        Msg = "Sorry .... dosen't run on Versions <2000 font=" ">
        MsgBox Msg, vbExclamation
        'Application.UserControl = False
        'Application.IgnoreRemoteRequests = True
    End Sub
  8.  Kemudian pada modul yang ke empat ketikan kode berikut :
  9. Sub test()
    MsgBox "Percobaan Menu"
    End Sub
  10. untuk langkah selanjutnya kita membuat objek userform sebagai media untuk meletakan menu , cara untuk membuat userform dengan mengklik menu insert pada jendela visual basic kemudian pilih userform. pada jendela properties ganti name userform dengan frmTask. kemudian double klik userform itu sehingga muncul jendel untuk menuliskan kode maka setelah itu ketikan atau copy kode berikut :
  11. Option Explicit


    Private Sub UserForm_Initialize()

        'UserForm Handle
        g_hForm = FindWindow(vbNullString, Me.Caption)

        Call CreateAPIMenu

        With Me
            .Height = 200 '250 - 45
            .Height = 253 'Original + 19
        End With

        g_lpMyWndProc = SetWindowLong(g_hForm, GWL_WNDPROC, AddressOf HookWinProc)

    End Sub
    Private Sub UserForm_QueryClose(Cancel As Integer, CloseMode As Integer)
        'Clean up
        DestroyMenu g_hMenu
        SetWindowLong g_hForm, GWL_WNDPROC, g_lpMyWndProc
    End Sub
    Private Sub UserForm_Terminate()
        'Safety Clean up
        DestroyMenu g_hMenu
        SetWindowLong g_hForm, GWL_WNDPROC, g_lpMyWndProc
    End Sub
  12. semua langkah tersebut belum bisa dijalankan apabila dalam sheet excelnya belum di atur pada module pertama ada tulisan 
  13.  
    ' Set menusheet
    Set g_MNUSheet = ThisWorkbook.Sheets("APIMNU")
artinya bahwa kita harus membuat sebuah sheet dengan nama APIMNU, lalu untuk mengisi sheet tersebut bisa dilihat dari contoh file ini

menu excel macro
di atas adalah contoh simulasi pembuatan userform excel dengan macro.

    Wednesday, April 5, 2017

    Membuat Animasi sepeda dengan kode html

    Membuat Animasi sepeda dengan kode html

    Animasi sepeda kali ini dibuat dengan murni hanya menggunakan kode html dan css tanpa terhubung dengan gambar sama sekali. untuk membuatnya anda tidak usah mendownload gambarnya hanya cukup dengan mengcopy kode html animasi sepeda ini.
    File yang akan dibuat tentunya harus terdiri dari dua file yaitu file html. dan file css. pembuatan kedua file tersebut seperti biasanya hanya cukup dengan menggunakan aplikasi notepad yang merupakan bawaan dari window atau dengan menggunakan notepad ++.

    Untuk membuat animasi sepeda ini kita harus membuat file html terlebih dahulu dengan mengcopy kode berikut ke notepad tadi, kemudian simpan dengan nama sepeda.html.

    <!DOCTYPE html>
    <head>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="style.css">
    </head>
    <body>
    <div id="description">is for Bicycle</div>

    <div id="animation">
        <div class="bike">
           
            <div class="bell">
                <div class="ringer">
                    <div class="lever"></div>
                </div>
                <div class="audio">
                    <div></div>
                    <div></div>
                    <div></div>
                </div>           
                <div class="stand"></div>
            </div>
           
            <div class="front wheel">
                <div class="rim">
                    <div class="air"></div>
                </div>
                <div class="hub"></div>
                <div class="spokes">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
           
            <div class="frame">
                <div></div>
                <div></div>
                <div></div>
                <div class="small"></div>
                <div></div>
                <div></div>
                <div class="small"></div>
                <div class="small"></div>
            </div>
           
            <div class="seat">
                <div class="support"></div>
                <div class="saddle"></div>
            </div>
           
            <div class="handlebars">
                <div class="frameConnector"></div>
                <div class="handle"></div>
            </div>
           
            <div class="pedals">
                <div class="gear">
                    <div class="hub"></div>
                    <div class="struts">
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                        <div></div>
                    </div>
                </div>
                <div class="front pedal">
                    <div class="footpad"></div>
                </div>
                <div class="back pedal">
                    <div class="footpad"></div>
                </div>
            </div>
           
            <div class="back wheel">
                <div class="rim">
                    <div class="air"></div>
                </div>
                <div class="hub"></div>
                <div class="gear"></div>
                <div class="spokes">
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <div></div>
                </div>
            </div>
        </div>
    </div>
    </body>
    </html>
    Untuk kode cacading style sheet atau css nya dari animasi sepeda ini adalah kode di bawah ini simpan kode dibawah ini dengan nama style.css

    * {
        padding: 0;
        margin: 0;
    }

    html , body {
        width: 100%;
        height: 100%:
        overflow: hidden;
        position: fixed;
        top: 50%;
        left: 0%;
    }

    html {
        background-color: rgba(250,1,250,1);   
    }

    #description {
        position: fixed;
        bottom: 10px;
        width: 100%;
        z-index: 100;
        font-family: Helvetica;
        font-weight: 200;
        color: rgba(18,22,26,0.7);
        text-align: center;
        font-size: 11px;
        letter-spacing: 1px;
    }

    .bell {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -99px;
        margin-left: -117px;
        z-index: 100;
    }

    .bell .stand {
        position: absolute;
        background-color: rgba(18,22,26,0.4);
        width: 6px;
        height: 3px;
    }

    .bell .lever {
        position: absolute;
        width: 2px;
        height: 2px;
        background-color: rgba(18,22,26,0.2);
        margin-top: 3px;
        margin-left: 14px;
        z-index: -1;
    }

    .bell .ringer {
        position: absolute;
        width: 14px;
        height: 6px;
        margin-left: -4px;
        margin-top:-6px;
        border-top-left-radius: 4px;
        border-top-right-radius: 4px;
        background-color: rgba(246,188,49,0.6);
        animation: audioMove 5s linear 0s infinite alternate none;
     -webkit-animation: audioMove 5s linear 0s infinite alternate none;
    }

    .bell .audio {
        margin-top: -8px;
        margin-left: 4px;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        transform: rotate(-90deg);
        position: absolute;
    }

    .bell .audio div {
        width: 15px;
        border-top: 1px dashed rgba(246,188,49,0.6);
        animation: audioLines 5s linear 0s infinite alternate none;
     -webkit-animation: audioLines 5s linear 0s infinite alternate none;
        -webkit-transform-origin: left center;
        transform-origin: left center;
        position: absolute;
    }

    .bell .audio div:nth-of-type(1){
        margin-top: -9px;
        -webkit-transform: rotate(-40deg);
        -moz-transform: rotate(-40deg);
        -ms-transform: rotate(-40deg);
        -o-transform: rotate(-40deg);
        transform: rotate(-40deg);
    }

    .bell .audio div:nth-of-type(2){
        margin-left: 1px;
    }

    .bell .audio div:nth-of-type(3){
        margin-top: 9px;
        -webkit-transform: rotate(40deg);
        -moz-transform: rotate(40deg);
        -ms-transform: rotate(40deg);
        -o-transform: rotate(40deg);
        transform: rotate(40deg);
    }

    .seat .support {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: 39px;
        margin-top: -95px;
        width: 8px;
        height: 40px;
        background-color: rgba(235,238,241,1);
        -webkit-transform: rotate(14deg);
        -moz-transform: rotate(14deg);
        -ms-transform: rotate(14deg);
        -o-transform: rotate(14deg);
        transform: rotate(14deg);
    }

    .seat .saddle {
        width: 40px;
        height: 15px;
        border-right: 32px solid rgba(75,78,81,1);
        border-top: 8px solid rgba(75,78,81,1);
        border-top-right-radius: 32px;
        border-bottom-right-radius: 32px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-left: 5px;
        margin-top: -100px;
    }

    .seat .saddle:before {
        content:".";
        position: absolute;
        color: rgba(0,0,0,0);
        width: 40px;
        height: 15px;
        border-top-right-radius: 30px;
        border-top: 8px solid rgba(75,78,81,1);
        border-right: 8px solid rgba(75,78,81,1);
        margin-top: -8px;
    }

    .handlebars {
        z-index: 10;
    }

    .handlebars .frameConnector {
        position: absolute;
        border-right: 8px solid rgba(235,238,241,1);
        border-top: 8px solid rgba(235,238,241,1);
        border-top-right-radius: 50px;
        left: 50%;
        width: 20px;
        height: 20px;
        margin-left: -117px;
        margin-top: -98px;
    }

    .handlebars .handle {
        position: absolute;
        border-right: 8px solid rgba(75,78,81,1);
        border-bottom: 8px solid rgba(75,78,81,1);
        border-bottom-right-radius: 50px;
        left: 50%;
        width: 40px;
        height: 30px;
        margin-left: -158px;
        margin-top: -97px;
    }

    .frame div {
        position: absolute;
        background-color: rgba(255,74,83,1);
        border-radius: 8px;
        top: 50%;
        left: 50%;
        width: 8px;
        margin-left: -4px;
        z-index: 100;
    }

    .frame div.small {
        width: 4px;
        margin-left: -2px;
    }

    .frame div:nth-of-type(1){
        height: 128px;
        margin-top: -67px;
        margin-left: 20px;
        -webkit-transform: rotate(14deg);
        -moz-transform: rotate(14deg);
        -ms-transform: rotate(14deg);
        -o-transform: rotate(14deg);
        transform: rotate(14deg);
    }

    .frame div:nth-of-type(2){
        height: 118px;
        margin-top: -4px;
        margin-left: 62px;
        -webkit-transform: rotate(86deg);
        -moz-transform: rotate(86deg);
        -ms-transform: rotate(86deg);
        -o-transform: rotate(86deg);
        transform: rotate(86deg);
    }

    .frame div:nth-of-type(3){
        height: 155px;
        margin-top: -71px;
        margin-left: -50px;
        -webkit-transform: rotate(-46deg);
        -moz-transform: rotate(-46deg);
        -ms-transform: rotate(-46deg);
        -o-transform: rotate(-46deg);
        transform: rotate(-46deg);
    }

    .frame div:nth-of-type(4){
        height: 141px;
        margin-top: -78px;
        margin-left: 77px;
        -webkit-transform: rotate(-36deg);
        -moz-transform: rotate(-36deg);
        -ms-transform: rotate(-36deg);
        -o-transform: rotate(-36deg);
        transform: rotate(-36deg);
    }

    .frame div:nth-of-type(5){
        height: 141px;
        margin-top: -133px;
        margin-left: -32px;
        -webkit-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -o-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .frame div:nth-of-type(6){
        height: 45px;
        margin-top: -76px;
        margin-left: -104px;
        -webkit-transform: rotate(19deg);
        -moz-transform: rotate(19deg);
        -ms-transform: rotate(19deg);
        -o-transform: rotate(19deg);
        transform: rotate(19deg);
    }

    .frame div:nth-of-type(7){
        height: 97px;
        margin-top: -43px;
        margin-left: -120px;
        -webkit-transform: rotate(14deg);
        -moz-transform: rotate(14deg);
        -ms-transform: rotate(14deg);
        -o-transform: rotate(14deg);
        transform: rotate(14deg);
    }

    .frame div:nth-of-type(8){
        height: 97px;
        margin-top: -43px;
        margin-left: -118px;
        -webkit-transform: rotate(16deg);
        -moz-transform: rotate(16deg);
        -ms-transform: rotate(16deg);
        -o-transform: rotate(16deg);
        transform: rotate(16deg);
    }

    .pedals {
        position: absolute;
        z-index: 101;
        top: 50%;
        left: 50%;
        margin-top: 60px;
        margin-left: 8px;
        animation: wheelSpin 2.2s linear 0s infinite reverse none;
     -webkit-animation: wheelSpin 2.2s linear 0s infinite reverse none;
    }

    .pedals .gear {
        border: 6px solid rgba(75,78,81,1);
        border-radius: 150px;
        position: absolute;
        top: calc(50% - 25px);
        left: calc(50% - 25px);
        width: 38px;
        height: 38px;
        z-index: 1;
        overflow: hidden;
    }

    .pedals .gear .hub {
        background-color: rgba(95,98,101,1);
        width: 16px;
        height: 16px;
        border-radius: 20px;
        position: absolute;
        top: calc(50% - 8px);
        left: calc(50% - 8px);
        z-index:2;
    }

    .pedals .gear .struts {
        position: absolute;
        width: 100%;
        height: 100%;
        -webkit-transform: rotate(60deg);
        -moz-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        -o-transform: rotate(60deg);
        transform: rotate(60deg);
    }

    .pedals .gear .struts div {
        width: 6px;
        height: 20px;
        position: absolute;
        background-color: rgba(75,78,81,1);
        top: 50%;
        left: calc( 50% - 3px );
        -webkit-transform-origin: 50% 0%;
        -moz-transform-origin: 50% 0%;
        -ms-transform-origin: 50% 0%;
        -o-transform-origin: 50% 0%;
        transform-origin: 50% 0%;
    }

    .pedals .gear .struts div:nth-of-type(1){
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    .pedals .gear .struts div:nth-of-type(2){
        -webkit-transform: rotate(72deg);
        -moz-transform: rotate(72deg);
        -ms-transform: rotate(72deg);
        -o-transform: rotate(72deg);
        transform: rotate(72deg);
    }

    .pedals .gear .struts div:nth-of-type(3){
        -webkit-transform: rotate(144deg);
        -moz-transform: rotate(144deg);
        -ms-transform: rotate(144deg);
        -o-transform: rotate(144deg);
        transform: rotate(144deg);
    }

    .pedals .gear .struts div:nth-of-type(4){
        -webkit-transform: rotate(216deg);
        -moz-transform: rotate(216deg);
        -ms-transform: rotate(216deg);
        -o-transform: rotate(216deg);
        transform: rotate(216deg);
    }

    .pedals .gear .struts div:nth-of-type(5){
        -webkit-transform: rotate(288deg);
        -moz-transform: rotate(288deg);
        -ms-transform: rotate(288deg);
        -o-transform: rotate(288deg);
        transform: rotate(288deg);
    }

    .pedals .pedal {
        background-color: rgba(255,74,83,1);
        border-radius: 10px;
        position: absolute;
        top: calc(50% - 3px);
        left: calc(50% - 3px);
        width: 5px;
        height: 35px;
        z-index: 5;
    }

    .pedals .pedal .footpad {
        width: 16px;
        height: 5px;
        border-radius: 4px;
        position: absolute;
        z-index: 200;
        margin-left: -6px;
        margin-top: 31px;
        background-color: rgba(255,74,83,1);
        animation: wheelSpin 2.2s linear 0s infinite normal none;
     -webkit-animation: wheelSpin 2.2s linear 0s infinite normal none;
    }

    .pedals .pedal.back {
        z-index: -1;
        margin-top: -35px;
        -webkit-transform: rotate(180deg);
        -moz-transform: rotate(180deg);
        -ms-transform: rotate(180deg);
        -o-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    .front.wheel {
        margin-left: -130px;
    }

    .back.wheel {
        margin-left: 120px;
    }

    .wheel {
        width: 144px;
        height: 144px;
        margin-top: 50px;
        border-radius: 150px;
        position: absolute;
        top: calc(50% - 75px);
        left: calc(50% - 75px);
        border: 4px solid rgba(18,22,26,0.7);
        overflow: hidden;
        border-radius: 150px;
        animation: wheelSpin 1.6s linear 0s infinite reverse none;
     -webkit-animation: wheelSpin 1.6s linear 0s infinite reverse none;
    }

    .wheel .hub {
        background-color: rgba(115,118,121,1);
        border: 2px dotted rgba(235,238,241,0.5);
        width: 10px;
        height: 10px;
        border-radius: 150px;
        position: absolute;
        top: calc(50% - 7px);
        left: calc(50% - 7px);
        z-index: 12;
    }

    .wheel .gear {
        background-color: rgba(75,78,81,1);
        border: 3px dotted rgba(255,250,250,1);
        border-radius: 150px;
        position: absolute;
        top: calc(50% - 13px);
        left: calc(50% - 13px);
        width: 20px;
        height: 20px;
        z-index: -1;
    }

    .wheel .rim {
        position: absolute;
        width: calc( 100% - 16px );
        height: calc( 100% - 16px );
        border: 8px solid rgba(235,238,241,1);
        border-radius: 150px;
        z-index: 12;
    }

    .wheel .rim .air {
        position: absolute;
        background-color: rgba(18,22,26,1);
        left: 50%;
        width: 2px;
        height: 6px;
        border-radius: 5px;
        z-index: 14;
        margin-left: -8px;
    }

    .back.wheel .rim .air {
        bottom: 0;
    }

    .wheel .spokes div {
        position: absolute;
        width: 0px;
        height: 144px;
        border-left: 2px solid rgba(18,22,26,0.5);
        margin-left: calc( 50% - 1px );
    }

    .wheel .spokes div:nth-of-type(1){
        -webkit-transform: rotate(22.5deg);
        transform: rotate(22.5deg);
    }

    .wheel .spokes div:nth-of-type(2){
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
    }

    .wheel .spokes div:nth-of-type(3){
        -webkit-transform: rotate(67.5deg);
        transform: rotate(67.5deg);
    }

    .wheel .spokes div:nth-of-type(4){
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
    }

    .wheel .spokes div:nth-of-type(5){
        -webkit-transform: rotate(112.5deg);
        transform: rotate(112.5deg);
    }

    .wheel .spokes div:nth-of-type(6){
        -webkit-transform: rotate(135deg);
        transform: rotate(135deg);
    }

    .wheel .spokes div:nth-of-type(7){
        -webkit-transform: rotate(157.5deg);
        transform: rotate(157.5deg);
    }

    .wheel .spokes div:nth-of-type(8){
        -webkit-transform: rotate(180deg);
        transform: rotate(180deg);
    }

    @keyframes wheelSpin {
     100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);}
     0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}
    }

    @-webkit-keyframes wheelSpin {
     100% { -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg);}
     0% { -webkit-transform: rotate(0deg); -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -o-transform: rotate(0deg); transform: rotate(0deg);}
    }

    @keyframes audioLines {
     100% { width: 0px;}
        81% { width: 0px;}
     78% { width: 15px;}
     75% { width: 0;}
     72% { width: 15px;}
     69% { width: 0px;}
     0% { width: 0px;}
    }

    @-webkit-keyframes audioLines {
     100% { width: 0px;}
        81% { width: 0px;}
     78% { width: 15px;}
     75% { width: 0;}
     72% { width: 15px;}
     69% { width: 0px;}
     0% { width: 0px;}
    }

    @keyframes audioMove {
     100% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);}
     81% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);}
     78% { -webkit-transform: translate(2px , 0px); -moz-transform: translate(2px , 0px); -ms-transform: translate(2px , 0px); -o-transform: translate(2px , 0px); transform: translate(2px , 0px);}
     75% { -webkit-transform: translate(-2px , 0px) rotate( -10deg ); -moz-transform: translate(-2px , 0px) rotate( -10deg ); -ms-transform: translate(-2px , 0px) rotate( -10deg ); -o-transform: translate(-2px , 0px) rotate( -10deg ); transform: translate(-2px , 0px) rotate( -10deg );}
     72% { -webkit-transform: translate(2px , 0px) rotate( 10deg ); -moz-transform: translate(2px , 0px) rotate( 10deg ); -ms-transform: translate(2px , 0px) rotate( 10deg ); -o-transform: translate(2px , 0px) rotate( 10deg ); transform: translate(2px , 0px) rotate( 10deg );}
     69% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);}
     0% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);}
    }

    @-webkit-keyframes audioMove {
     100% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);}
     81% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);}
     78% { -webkit-transform: translate(2px , 0px); -moz-transform: translate(2px , 0px); -ms-transform: translate(2px , 0px); -o-transform: translate(2px , 0px); transform: translate(2px , 0px);}
     75% { -webkit-transform: translate(-2px , 0px) rotate( -10deg ); -moz-transform: translate(-2px , 0px) rotate( -10deg ); -ms-transform: translate(-2px , 0px) rotate( -10deg ); -o-transform: translate(-2px , 0px) rotate( -10deg ); transform: translate(-2px , 0px) rotate( -10deg );}
     72% { -webkit-transform: translate(2px , 0px) rotate( 10deg ); -moz-transform: translate(2px , 0px) rotate( 10deg ); -ms-transform: translate(2px , 0px) rotate( 10deg ); -o-transform: translate(2px , 0px) rotate( 10deg ); transform: translate(2px , 0px) rotate( 10deg );}
     69% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);}
     0% { -webkit-transform: translate(0px , 0px); -moz-transform: translate(0px , 0px); -ms-transform: translate(0px , 0px); -o-transform: translate(0px , 0px); transform: translate(0px , 0px);}

    Pastikan kedua file tersebut disimpan dalam sebuah folder yang sama. untuk menjalankannya tinggal double klik file sepeda.html, maka kode tersebut akan berjalan seperti gambar animasi sepeda di atas. selamat mencoba


    Animasi Sepeda Pake kode html








    Tuesday, April 4, 2017

    Daftar Kode Warna HTML

    Daftar Kode Warna HTML
    Kode warna html banyak digunakan untuk memperindah tampilan pada penulisan-penulisan kode html. Ada banyak kode warna html yang biasa digunakan, namun untuk mengetahui kode warna saya mencoba memberikan aplikasi berbasis javascipt untuk menampilkan kode warna html.


    Kode warna html


    Pilih warna favoritenya:

    Click "lihat kode" untuk melihat kode warna yang dipilih.



    KODE WARNANYA ADA DI BAWAH INI :





    pada aplikasi itu kita tinggal memilih kode warna apa yang mau kita ketahui, tinggal memilih jenis warnanya lalu kita lihat kodenya.

    Untuk penulisan kode tersebut bisa kita gunakan dalam pembuatan background tulisan maka kode htmlnya seperti di bawah ini
    <font color="#0000ff">tulisan ini berwarna biru</font>
     sehingga hasilnya dari kode itu adalah


    tulisan ini berwarna biru

    Untuk membuat tombol atau button dengan kode warna yang berbeda dapat mencoba menggunakan kode di bawah ini

    <!DOCTYPE html>
    <html>
    <head>
    <style>
    .btn {
        border: none;
        color: white;
        padding: 14px 28px;
        font-size: 16px;
        cursor: pointer;
    }

    .success {background-color: #4CAF50;} /* Green */
    .success:hover {background-color: #46a049;}

    .info {background-color: #2196F3;} /* Blue */
    .info:hover {background: #0b7dda;}

    .warning {background-color: #ff9800;} /* Orange */
    .warning:hover {background: #e68a00;}

    .danger {background-color: #f44336;} /* Red */
    .danger:hover {background: #da190b;}

    .default {background-color: #e7e7e7; color: black;} /* Gray */
    .default:hover {background: #ddd;}
    </style>
    </head>
    <body>

    <h1>Alert Buttons</h1>

    <button class="btn success">Kode warna #4CAF50</button>
    <button class="btn info">kode warna #2196f3</button>
    <button class="btn warning">Kode warna #ff9800</button>
    <button class="btn danger">Kode Warna #f44336</button>
    <button class="btn default">Kode warna #e7e7e7</button>

    </body>
    </html>


    dan hasilnya adalah seperti di bawah ini
     










     Nah itulah cara mengetahui kode warna pada html, semoga bisa bermanfaat. selamat mencoba!.

    Sunday, April 2, 2017

    Membuat game sentuh coin dengan Html

    Dengan menggunakan html dan css ternyata kita bisa membuat animasi, namun agar animasi itu lebih interaktif saya mencoba menambahkannya dengan javascript untuk menjadikan program animasi  itu menjadi sebuah game. game yang akan dibuat dengan html ini cukup sederhana, yaitu game nangkap coin.

    Setiap kita menyentuh coin dengan cara mengklik coin yang ada pada gambar coin dalam animasi ini maka kita akan mendapatkan nilai tambahan. itulah gambaran singkat dari game sentuh coin yang akan kita buat.

    Berikut adalah langkah-langkah untuk membuat game sentuh coin dengan html :

    1. Langkah pertama kita harus mempersiapkan gambar, gambar yang di perlukan tidak usah membuat cukup dengan mendownload gambar berikut 
      background
      background
      coin
      coin
    2.  Simpan kedua gambar tersebut dengan di folder image yang merupakan sub folder dari game coin.
    3. Langkah selanjutnya adalah membuat file html, css, dan javascript yang semuanya disatukan dalam satu file html. berikut adalah kode html yang harus dibuat :
    <html>
        <head>
            <title>Coin Tap Game</title>
    <style>
    #score {
        margin: 0 auto;
        text-align: center;
        color: #fff;
        font-weight: bold;
        font-size: 22px;
        -moz-text-shadow: 2px 2px 1px #248742;
        -webkit-text-shadow: 2px 4px 1px #248742;
        text-shadow: 2px 2px 1px #248742;
    }

    #coinTapGameContainer {
        position: relative;
        background-image: url("images/coin-tap-game-hud.png");
        background-size: 100%;
        width: 460px;
        height: auto;
        margin: 0 auto;
        padding-top: 24px;
        -webkit-user-select: none; 
        -moz-user-select: none;   
        -ms-user-select: none;     
        user-select: none;
    }

    #coinTapGameContainer canvas {
        margin: 0;
        padding: 0;
        width: 460px;
    }
    </style>
    </head>
        <body>
            <div id="coinTapGameContainer">
                <div id="score">0</div>
                <canvas id="coinTapGame"></canvas>
            </div>
            <script>
            (function() {
        // http://paulirish.com/2011/requestanimationframe-for-smart-animating/
        // http://my.opera.com/emoller/blog/2011/12/20/requestanimationframe-for-smart-er-animating
        // requestAnimationFrame polyfill by Erik Möller. fixes from Paul Irish and Tino Zijdel
        // MIT license

        var lastTime = 0;
        var vendors = ['ms', 'moz', 'webkit', 'o'];
        for(var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
            window.requestAnimationFrame = window[vendors[x]+'RequestAnimationFrame'];
            window.cancelAnimationFrame = window[vendors[x]+'CancelAnimationFrame']
                                       || window[vendors[x]+'CancelRequestAnimationFrame'];
        }

        if (!window.requestAnimationFrame)
            window.requestAnimationFrame = function(callback, element) {
                var currTime = new Date().getTime();
                var timeToCall = Math.max(0, 16 - (currTime - lastTime));
                var id = window.setTimeout(function() { callback(currTime + timeToCall); },
                  timeToCall);
                lastTime = currTime + timeToCall;
                return id;
            };

        if (!window.cancelAnimationFrame)
            window.cancelAnimationFrame = function(id) {
                clearTimeout(id);
            };
    }());

    (function () {
               
        var numCoins = 5,
            score = 0,
            coins = [],
            canvas;           

        function gameLoop () {
       
          var i;
       
          window.requestAnimationFrame(gameLoop);
         
          // Clear the canvas
          canvas.getContext("2d").clearRect(0, 0, canvas.width, canvas.height);

          for (i = 0; i < coins.length; i += 1) {
              coins[i].update();
              coins[i].render();
          }
        }
       
        function sprite (options) {
       
            var that = {},
                frameIndex = 0,
                tickCount = 0,
                ticksPerFrame = options.ticksPerFrame || 0,
                numberOfFrames = options.numberOfFrames || 1;
           
            that.context = options.context;
            that.width = options.width;
            that.height = options.height;
            that.x = 0;
            that.y = 0;
            that.image = options.image;
            that.scaleRatio = 1;
           
            that.update = function () {

                tickCount += 1;

                if (tickCount > ticksPerFrame) {

                    tickCount = 0;
                   
                    // If the current frame index is in range
                    if (frameIndex < numberOfFrames - 1) {   
                        // Go to the next frame
                        frameIndex += 1;
                    } else {
                        frameIndex = 0;
                    }
                }
            };
           
            that.render = function () {

              // Draw the animation
              that.context.drawImage(
                that.image,
                frameIndex * that.width / numberOfFrames,
                0,
                that.width / numberOfFrames,
                that.height,
                that.x,
                that.y,
                that.width / numberOfFrames * that.scaleRatio,
                that.height * that.scaleRatio);
            };
           
            that.getFrameWidth = function () {
                return that.width / numberOfFrames;
            };
           
            return that;
        }
       
        function destroyCoin (coin) {
       
            var i;
           
            for (i = 0; i < coins.length; i += 1) {
                if (coins[i] === coin) {
                    coins[i] = null;
                    coins.splice(i, 1);
                    break;
                }
            }
        }
       
        function spawnCoin () {
       
            var coinIndex,
                coinImg;
       
            // Create sprite sheet
            coinImg = new Image();   
       
            coinIndex = coins.length;
           
            // Create sprite
            coins[coinIndex] = sprite({
                context: canvas.getContext("2d"),
                width: 1000,
                height: 100,
                image: coinImg,
                numberOfFrames: 10,
                ticksPerFrame: i
            });
           
            coins[coinIndex].x = Math.random() * (canvas.width - coins[coinIndex].getFrameWidth() * coins[coinIndex].scaleRatio);
            coins[coinIndex].y = Math.random() * (canvas.height - coins[coinIndex].height * coins[coinIndex].scaleRatio);
           
            coins[coinIndex].scaleRatio = Math.random() * 0.5 + 0.5;
           
            // Load sprite sheet
            coinImg.src = "images/coin-sprite-animation.png";
        }
       
        function getElementPosition (element) {
       
           var parentOffset,
                  pos = {
                   x: element.offsetLeft,
                   y: element.offsetTop
               };
              
           if (element.offsetParent) {
               parentOffset = getElementPosition(element.offsetParent);
               pos.x += parentOffset.x;
               pos.y += parentOffset.y;
           }
           return pos;
        }
       
        function distance (p1, p2) {
       
            var dx = p1.x - p2.x,
                dy = p1.y - p2.y;
               
            return Math.sqrt(dx * dx + dy * dy);
        }
       
        function tap (e) {
       
            var i,
                loc = {},
                dist,
                coinsToDestroy = [];
                pos = getElementPosition(canvas),
                tapX = e.targetTouches ? e.targetTouches[0].pageX : e.pageX,
                tapY = e.targetTouches ? e.targetTouches[0].pageY : e.pageY,
                canvasScaleRatio = canvas.width / canvas.offsetWidth;

            loc.x = (tapX - pos.x) * canvasScaleRatio;
            loc.y = (tapY - pos.y) * canvasScaleRatio;
               
            for (i = 0; i < coins.length; i += 1) {
           
                // Distance between tap and coin
                dist = distance({
                    x: (coins[i].x + coins[i].getFrameWidth() / 2 * coins[i].scaleRatio),
                    y: (coins[i].y + coins[i].getFrameWidth() / 2 * coins[i].scaleRatio)
                }, {
                    x: loc.x,
                    y: loc.y
                });
               
                // Check for tap collision with coin       
                if (dist < coins[i].getFrameWidth() / 2 * coins[i].scaleRatio) {
                    coinsToDestroy.push(coins[i]);
                }
            }
           
            // Destroy tapped coins
            for (i = 0; i < coinsToDestroy.length; i += 1) {
           
                score += parseInt(coinsToDestroy[i].scaleRatio * 10, 10);
                destroyCoin(coinsToDestroy[i]);   
                setTimeout(spawnCoin, 1000);   
            }
           
            if (coinsToDestroy.length) {
                document.getElementById("score").innerHTML = score;
            }
        }
       
        // Get canvas
        canvas = document.getElementById("coinTapGame");
        canvas.width = 460;
        canvas.height = 230;
       
        for (i = 0; i < numCoins; i += 1) {
       
            spawnCoin();
        }
       
        gameLoop();
       
        canvas.addEventListener("touchstart", tap);
        canvas.addEventListener("mousedown", tap);

    } ());
    </script>
     </body>
    </html>

    simpan file di atas dengan nama gamecoin.html kemudian simpan dalam folder game coin yang satu folder dengan folder image.

    Selanjutnya kita tinggal membuka file html itu

    Maka kurang lebih tampilannya akan seperti demo game coin di bawah ini


    Coin Tap Game



    0