Dalam perkembangan dunia website jquery adalah salah satu teknologi yang tidak bisa terpisahkan dalam mendesain tampilan web, jquery adalah salah satu teknologi yang bisa kita gunakan untuk menjadikan tampilan website terlihat menarik dan menjadikan nya lebih interaktif, ada banyak sekali contoh desain website yang sudah menggunakan teknologi jquery, salah satunya adalah website dumetschool.com, didalam nya kita bisa melihat tampilan animasi dan efek lain nya. Nah sebagai contoh, berikut akan saya berikan kasus mengenai bagaimana Cara Membuat Animasi Ukuran dengan Jquery, bagi kalian yang ingin mencoba nya silahkan simak langkah-langkah nya berikut ini.
1. Silahkan buat satu buah file dengan format .html, kemudian isikan kode HTML berikut sebagai struktur nya.
|
1 2 3 |
<body> <div class="css-animate">Click Me !</div> </body> |
2. Langkah selanjutnya adalah, memberikan desain untuk element html diatas sebagai objek untuk animasi ukuran jquery nya. berikut kode CSS3 untuk desain objek nya.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
body { font-family: arial; } .css-animate { width: 100px; padding: 10px; text-align: center; margin: 5px auto; display: block; } .css-animate { background-color: #3498db; -webkit-transition: all 2s; -moz-transition: all 2s; -o-transition: all 2s; transition: all 2s; } .css-animate-active { width: 200px; padding: 20px 0; border-radius: 10px; border: 5px solid #f39c12; color: white; } |
3. Kemudian untuk menjalankan perintah objek nya, kita gunakan kode jquery berikut.
|
1 2 3 4 5 6 7 8 9 10 11 |
<script type="text/javascript"> $(document).ready(function(){ $('.css-animate').on('click',function(){ if ($(this).hasClass('css-animate-active')) { $(this).removeClass('css-animate-active') } else { $(this).addClass('css-animate-active') } }); }); </script> |
4. Pada tahapan ini, sebelumnya kalian harus menambah kode js berikut pada bagian tag head.
|
1 2 3 4 |
<head> <meta charset="UTF-8"> <script src="https://code.jquery.com/jquery-3.1.1.min.js"></script> </head> |
5. Terakhir simpan file terlebih dahulu, kemudian jalankan pada browser masing-masing dan lihat hasilnya.
Bagaimana, cukup mudah bukan membuat animasi dengan jquery ? itulah tadi pembahasan mengenai Cara Membuat Animasi Ukuran dengan Jquery, jadi bisa kita lihat dengan jquery ini kita bisa membuat halaman tampilan website menjadi lebih interaktif dengan adanya animasi dan juga efek-efek yang bisa kita buat sendiri. Sekian artikel hari ini silahkan share jika artikel ini bermanfaat.