Home / Archived For 2015

Friday, March 20, 2015

Membuat animasi dengan animate.css

Membuat animasi dengan animate.css


Yooo, Akhirnyaa saya nulis lagi yoo

        Untuk kali ini, saya akan membagikan tutorial membuat efek animasi dengan animate.css. Animate.css dibuat oleh daniel Eden, dan bisa anda gunakan sepuas hati anda. Yo langsung aja yo.

Langkah pertama :

Masukan animate.css ke dalam script html anda, seperti ini :

<link href="https://raw.githubusercontent.com/daneden/animate.css/master/animate.css" rel="stylesheet" />

Langkah kedua :

Tambahkan beberapa code jvascript untuk  membuat animasinya jalan, saya beri beberapa contoh
  • Ketika mouse diatas objek animasi (hover) :
$('#animationSandbox1').hover(function(){
     $('#animationSandbox1').removeClass().addClass('tada animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){$(this).removeClass();});});
 *Untuk contoh diatas , objek memilik id=animationSandbox1 dengan animasi 'tada'.

  • Ketika page berhasil diload
$(document).ready(function(){
   $('#animationSandbox1').removeClass().addClass('tada animated').one('webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend', function(){
      $(this).removeClass();
    });});

Langkah ketiga

Silahkan berkreasi.
Live preview
Pada Komentar

Thursday, January 1, 2015

Membuat Background berubah secara berulang.

Membuat Background berubah secara berulang.



Hallo, selamat pagi. Kali ini saya akan membagikan sebuah script yang bisa membuat background bisa berubah secara berurutan dengan javascript.




Langkah pertama

Persiapan HTML code nya. ini adalah contoh html codenya


<body id="body">
 <h4 class="element"></h4>
   <input class="kembali" type="button" style="display:none" value="Kembali ke index">
</body>


 Langkah kedua 

Persiapan CSS code nya. Ini adalah contoh css codenya


.color1{
    background: grey;
    color: black;
    background-size:cover;
}

.color2{
    background: red;
    color: white;
    background-size:cover;
}

.color3{
    background: blue;
    color: white;
    background-size:cover;
}

.color4{
    background: green;
    color: white;
    background-size:cover;
}

Catatan :
* .color1 , color2, color3, color4 bisa anda edit sekreatif mungkin. Ini hanyalah sebagai contoh.
** saya tambahkan syntax background-size: cover; agar ukuran background full

Langkah ketiga

Persiapan javascriptnya. Ini adalah contoh javascriptnya :
<script src="https://code.jquery.com/ui/1.11.2/jquery-ui.min.js"></script>
<script>  
function changeColor(element, pos){
    pos++;

    if(pos > 4){
        pos = 1;
    }
    console.log(pos);
    element.addClass('bg' + pos, 1000);
    // So previous classes get removed.
    element.attr('class', 'bg' + pos);
    setTimeout(function(){changeColor(element, pos)}, 1000); 
}

changeColor($('#body'), 0);
    </script>
Catatan
*  Pada bagian changeColor($('#body'), 0 #body bisa diganti dengan elemen lain
Sekian tutorial dari saya. Bila ada pertanyaan, mohon komentar.
Pada 1 Komentar
Subscribe to: Comments (Atom)