Hai Teman-teman semuanya, apa kabar? semoga tetap dalam keadaan sehat, kita lanjut lagi belajarnya, pada pembahasan kali ini kita akan membuat satu studi kasus yaitu membuat preloader memanfaatkan gambar gif dengan jquery.
Preloader adalah suatu efek animasi loading yang dapat kita buat menggunakan css,jquery dan lainnya, nah pembahasan kali ini kita akan membuatnya dengan menggunakan jquery, oke pertama silahakan teman-teman siapkan 1 buah gambar gif, jika sudah liahkan buat file html dan ketikan script berikut ini:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<!DOCTYPE html> <html> <head> <title>Loading</title> <style type="text/css"> .container{width:500px; height:40px; background:#ccc;margin:auto;overflow:hidden;} .load{width:0px; height:40px; background:url(giphy.gif);} </style> </head> <body> <div class="container"> <div class="load"></div> </div> </body> </html> |
saya membuat sebuah container dan didalamnya saya membuat div class load yang saya berikan gambar gif yang saya sudah siapkan tadi, jika teman-teman save maka hasilnya akan seperti berikut ini:
Jika sudah silahakan teman-teman buat script jquery seperti berikut ini:
|
1 2 3 4 5 6 7 8 9 |
<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $(".load").animate({"width":"100px"},2000, function(){ $(".load").animate({"width":"300px"},2000).animate({"width":"500px"},2000) }); }) </script> |
Sekarang jika teman-teman save maka hasilnya akan seperti berikut ini:
Hasilnya loading akan menarik karena kita menggunakan gambar gif, dan terlihat seperti loading sungguhan yang berjeda karna kita menggunakan method stop pada jquery.
Gimana teman-teman? cukup mudah bukan? untuk studi kasus kita kali ini tentang membuat preloader memanfaatkan gambar gif dengan jquery saya rasa cukup sampai disini dulu, semoga tutorial kali ini bermanfaat untuk teman-teman semuanya, sampai bertemu lagi pada tutorial berikutnya,
Terima kasih