Mempunyai website menarik dan cantik adalah sebuah keinginan setiap orang, tujuan nya tidak lain adalah untuk memancing pengunjung dan memberikan kesan tidak bosan ketika melihat webiste kita, tidak sedikit orang diluar sana banyak membuat website dengan macam-macam platform dan teknologi, salah satu nya dengan jquery, jquery merupakan sebuah teknologi framework yang di dalam nya sudah dituliskan sekumpulan kode javascript yang di ringkas untuk memudahkan dalam menyusun client-side-script pada html. Berikut ini adalah salah satu contoh pengaplikasian jquery untuk website yakni saya akan contoh kan bagaimana Cara Membuat Animasi Background Awan dengan Jquery.
Sebelum memulai praktek dalam membuat animasi background awan, kita siapkan objek berupa gambar awan, setelah itu kita akan buat struktur HTML seperti berikut.
<body> <div><span>Animasi Awan</span></div> </body>
Setelah kode diatas diketikan, langkah selanjutnya adalah kita akan menyisipkan gambar sebagai animasi background nya dengan kode CSS3 berikut.
.images {
margin: 120px auto 0;
width: 100%;
height: 80px;
background-image: url('https://goo.gl/ayQhrM');
background-repeat: repeat-x;
text-align: center;
}
span {
display: inline-block;
background-color: white;
font-size: 65px;
margin: -4px auto 0;
padding: 0 2px;
box-shadow: 0px 0px 16px 16px white;
}Pada kode diatas background masih belum bergerak, untuk menjalankan animasi background nya kita gunkan kode jquery berikut.
<script type="text/javascript">
function triggerAnimation() {
$('div').animate({
'background-position':'+=22px'
}, 600, 'linear', triggerAnimation );
}
triggerAnimation();
</script>Kemudian tambah kan link js berikut diatara tag head pada HTML.
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Setelah semua kode diatas diketikan, selnajutnya simpan file nya terlebih dahulu kemudian jalankan pada browser dan lihat hasinya. Selesai
Jika hasilnya terlihat animasi background nya bergerak maka langkah diatas berhasil, jika tidak bergerak, silahkan ikuti langkah diatas dengan benar. Baik sekian pembahasan mengenai pengaplikasian dan Cara Membuat Animasi Background Awan dengan Jquery.
The post Cara Membuat Animasi Background Awan dengan Jquery appeared first on Kursus Website Terbaik.