Kali ini saya akan kembali membahas tentang pembuatan efek/animasi sederhana, ya walaupun saya katakan sederhana namun efek ini sangat mungkin untuk dikembangkan oleh kawan dikarenakan saya hanya memberikan contoh sederhana dan sangat mendasar tentang penggunaannya.
Untuk kali ini saya akan kembali menggunakan jQuery.
Apasih yang saya maksud dengan Cara Membuat Animasi Setelah Halaman Web/Blog Termuat., mungkin kalian pernah liat ada blog yang memasang animasi seperti ini namun kalian tidak mengenalinya, contoh seperti elemen yang awalnya tidak ada namun setelah sekian detik tiba-tiba muncul dari samping/atas/bawah atau warna halaman Web/Blog yang awalnya kuning setelah sekian detik berubah menjadi merah, nah itu bisa kita buat sendiri dengan cara ini.
Seperti itulah gambarannya
Praktek Yuk !
Oke, tidaklah mewah kode yang akan kita gunakannya kali ini karena hanya menggunakan seupil baris jquery dan dioleskan dengan sedikit CSS.
Pasang jquery dibawah ini diatas </body>
<script>
$(window).on('load',function(){
$('.paragraf12').addClass('muncul')
})
</script>
Kan tadi pake CSS, kenapa gak CSSnya duluan yang dipasang ?
Oke, ini dimaksudkan karena saya akan menjelaskan sedikit tentang sebuah event yang akan kita gunakan yaitu onload.
Sesuai namanya, onload atau bahasa Indonesianya pada (saat)/(setelah) termuat yang mengartikan bahwa script akan mengeksekusi fungsi yang ada didalam kurung kurawal itu pada kondisi halaman telah sepenuhnya termuat atau telah terbaca XMLnya secara utuh. Jadi kalo web/blog yang menggunakan cara ini namun saat dibuka blognya ngadat karena jaringan visitor lemboy, maka fungsinya tidak akan tereksekusi dan animasi pun tidak akan jalan. Seperti itulah sedikit pemahaman saya.
$('.paragraf12').addClass('muncul')
Yang artinya Class ditambahkan dengan Class yang baru, yang namanya Class pasti akan berkaitan dengan namanya CSS, dikarenakan akan ada perubahan design CSS pada saat jquery menambahkan Class yang baru. Oke inilah CSSnya
.paragraf12 {opacity:0;transform:translate(0,60px);transition:1s}
.paragraf12.muncul {opacity:1;transform:translate(0,0)}
Terdapat 2 class yang sama namun berbeda, jika kita lihat class yang kedua maka kita akan melihat adanya tambahan Class baru dibelakangnya yang juga dibarengi dengan Value&Property yang berbeda.
Kenapa keduanya berbeda ?
Ini sederhananya saya jelaskan.
Pada Class pertama kita akan melihat opacity yang bernilai 0 yang artinya transparansi elemen akan 100% atau tidak terlihat dan transform elemen yang di Translating atau digerakkan secara vertikal dari posisi semula dikarenakan nilainya 0,60px (H,V), sedangkan Class kedua lebih kepada menetralkan elemen ke posisi Semula yang awalnya opacitynya 0 menjadi 1 yang artinya elemen akan terlihat kembali dan Translating atau digerakkannya elemen ke posisi Semula atau 0,0.
Perbedaan akan jelas terlihat pada saat sebelum dan sesudah termuatnya halaman Web/Blog, ini dikarenakan Pada Class pertama CSS akan tereksekusi pertama kali saat anda masuk halaman namun belum sepenuhnya termuat secara utuh, jadi elemen yang diberikan CSS ini akan terlihat seperti menghilang padahal sebenarnya tidak, kenapa tidak ?
dikarenakan CSS hanya menggeser elemen kebawah sejauh 60px dan dibuat transparan (tidak terlihat) seakan elemen menghilang entah kemana.
Nah setelah halaman web termuat secara utuh, CSS yang kedua akan tereksekusi dan sesuai fungsinya dia akan mengembalikan elemen ke posisi semula jadi seakan elemennya melayang ke posisi awal,
*Yang maksudnya utuh adalah browser tidak akan melakukan loading lagi.
Untuk penggunaannya mudah saja, cukup mengubah Class diatas dengan Class elemen yang ingin diberi animasi.
Mungkin panjang penjelasannya yah kawan, tapi semoga saja dapat dipahami.
Sekian artikel saya, terima kasih.
