Cara Membuat Animasi Setelah Halaman Web/Blog Termuat

Cara Membuat Animasi Setelah Halaman Web/Blog Termuat

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.

Seperti yang saya katakan diatas, kita menggunakan sedikit CSS. Mengapa kita perlu CSS ?. Seperti ini, coba kawan lihat lagi kedalam jQuery diatas, terdapat sebaris kode yang berisi

$('.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.

Artikel Terkait

  • Ngarepnya SNMPTN Dapatnya SBMPTN Setelah sekian lama saya melalui lika-liku perjalanan pendaftaran masuk PTN, akhirnya saya sampai juga di bagian pembayaran UKT dan sudah menjadi MABA. Dalam artikel ini, saya ...
  • Bahasasisasi Aneh Vicky Prasetyo Saat Wawancara Mungkin diantara sobat semua ada yang tertarik untuk mengetahui, kata-kata yang disampaikan oleh Vicky Prasetyo pada saat Wawancaranya kepada  media, seperti yang kita k ...
  • Cara Membuat Like Box Facebook Float Kali ini saya akan mencoba share cara memasang Like Box Facebook Float atau melayang. Dengan memakai widget ini, sobat pasti akan mudah mencari liker FPnya di Facebook melalu ...
  • Cara Menggunakan If Else dan Else If Pada JS Kali ini saya akan memberikan pembelajaran dasar pada javascript, ya gak perlu sulit sulit karena saya bukan expertnya JS :D. Berbicara tentang pengkondisian pada JS sebenarny ...
  • Cara Membuat Laman Khusus Error Page Kali ini saya akan memberikan tutorial dasar blogger tentang Cara Membuat Laman Khusus Error Page untuk blogspot terutama, laman error page sebenarnya tidak begitu signifikan ...