Cara Membuat Animasi Background Awan dengan Jquery
Mempunyai laman menarik dan cantik ialah sebuah keinginan setiap orang, tujuan nya tak lain ialah bagi memancing pengunjung dan memberikan kesan tak bosan ketika melihat webiste kita, tak sedikit orang diluar sana banyak membangun laman dengan macam-macam platform dan teknologi, diantara nya dengan jquery, jquery adalah sebuah teknologi framework yang di pada nya telah dituliskan sekumpulan kode javascript yang di ringkas bagi mempermudah pada menyusun client-side-script di html. Berikut ini ialah diantara contoh pengaplikasian jquery bagi laman yakni saya akan contoh kan bagaimana Cara Membuat Animasi Background Awan dengan Jquery.
Sebelum memulai praktek pada membangun animasi background awan, kita siapkan objek berupa gambar awan, setelah itu kita akan bikin struktur HTML seperti berikut.
<body>
<div><span>Animasi Awan</span></div>
</body>
Setelah kode diatas diketikan, langkah berikutnya ialah kita akan menyisipkan gambar selaku 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;
}Di kode diatas background masih belum bergerak, bagi 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 di HTML.
<script src=https://code.jquery.com/jquery-3.1.1.min.js></script>
Setelah seluruh kode diatas diketikan, selnajutnya simpan file nya terlebih dahulu kemudian jalankan di browser dan lihat hasinya. Selesai
Kalau hasilnya terlihat animasi background nya bergerak karenanya langkah diatas berhasil, seandainya tak bergerak, silahkan ikuti langkah diatas dengan benar. Bagus demikian pembahasan mengenai pengaplikasian dan Cara Membuat Animasi Background Awan dengan Jquery.
Sumber https://kursuswebsite.org
