Halo teman-teman, berjumpa lagi dengan saya. Di artikel kemarin kita sudah membuat beberapa fungsi yang ada pada Jquery, di artikel kali ini kita akan membuat animasi sederhana dengan metode .animate() yang ada pada Jquery. Baik langsung saja teman-teman buka code editornya lalu copy script di bawah ini
1 2 3 4 5 6 7 8 9 10 11 |
<!DOCTYPE html> <html> <head> <title>Membuat Animasi Sederhana Dengan Jquery</title </head> <body> <img src="panah.png" style="position:absolute; top:46px;" width="280px" height="100px"> <img src="mangga.png" style="float:right;" height="150px" width="150px"> <h1 style="float:right; position:relative; top:200px; color:orange">Mangga Kuning</h1> </body> </html> |
Lalu pastekan di code editornya, kemudian save dengan index.html dan run pada browsernya. Maka akan menghasilkan output seperti gambar di bawah ini,
Langkah selanjutnya berikan display:none pada css tag <h1> dan berikan z-index:-1; pada gambar panah, atau bisa lihat gambar di bawah ini
Lalu berikan library jquery nya di dalam tag <head>
1 2 |
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> <script> |
Kemudian tambahkan script di bawah ini tepat di bawah library Jquery nya.
1 2 3 4 5 6 7 8 |
<script> $(document).ready(function(){ $("img").animate({left: '-50'},1000); $("img").delay(500).animate({left: '1510'},150,function(){ $("h1").delay(700).fadeIn('slow'); }); }); </script> |
Jika sudah di save dan refresh pada browsernya, maka animasi yang kita buat sudah jadi. Gambar panah akan di aktifkan oleh Jquery yang mempunyai fungsi .animate() untuk melakukan animasi mines -50px kekiri, artinya panah akan mundur sebanyak 50px dan akan memanah sejauh 1510px kemudian baru akan menampilkan <h1> dengan menambahkan fungsi .fadeIn() yang sebelumnya kita berikan display:none;
Maka jika panah sudah melakukan animate sejauh 1510px <h1> akan tampil yang di dalamnya memiliki value “Mangga Kuning”, cukup mudah kan teman-teman. Baik sekian dulu dari saya pada artikel kali ini tentang Membuat Animasi Sederhana Dengan Jquery mudah-mudahan bisa menjadi tambahan pengetahuan untuk teman-teman yang khususnya baru mempelajari fungsi-fungsi dari Jquery. Teman-teman juga bisa ya memodifikasinya dari contoh di atas supaya lebih mahir, sampai jumpa di artikel selanjutnya dan terimakasih. Semoga bermanfaat