Cara menggunakan transition fade in css

KURAZONE ~ Halo sahabat Kurazer, pada beberapa blog atau situs yang menggunakan platform Wordpress terdapat teknik yang bisa diterapkan dengan cara memberikan animasi pada object atau gambar yang ada didalam postingan, apabila halaman blog di scroll kebawah maka gambar didalam postingan tersebut akan muncul dengan animasi yang beragam.

Animasi yang ditampilkan layaknya animasi yang terdapat pada PowerPoint, sehingga dengan adanya animasi tersebut tentunya akan memberikan daya tarik tersendiri bagi pengunjung. Sekaligus memberikan kesan yang kreatif pada artikel yang menerapkan teknik tersebut.

Contohnya seperti gambar dibawah ini, yang muncul disertai animasi setelah kita melakukan scroll kebawah (untuk melihat efeknya lagi, scroll keatas lalu scroll lagi kebawah):

Dari sini paham kan maksudnya? ^_^ ..

Jika di Wordpress, mungkin teknik seperti itu bisa dilakukan dengan cara menggunakan Plugin. Namun kalau diterapkan di Blogger, kita cukup menggunakan amunisi pada umumnya yaitu CSS, JS dan HTML. Nah, langsung saja ... Berikut adalah Cara Membuat CSS Animation "On Scroll" pada Blog.

PEMASANGAN KODE CSS DAN JAVASCRIPT

1. Buka akun Blogger >> Pilih Tema >> Pilih Edit HTML
2. Copy 1 Paket CSS dan JS dibawah ini, kemudian letakkan diatas

3. Simpan Template

Dari sini kalian sudah berhasil memiliki bahan CSS dan JS nya. Selanjutnya pindah ke menu Postingan

PEMANGGILAN ANIMASI

1. Buatlah postingan seperti biasanya, lalu masukkan beberapa gambar dan berikan kode pengapit untuk kode gambar yang ada didalam postingan

2. Kode pengapitnya adalah seperti dibawah ini :

 KODE GAMBAR DISINI 
 

3. Ganti nama-aos nya menjadi nama type animasi yang diinginkan. Dibawah ini adalah nama-nama type animasi yang dapat kalian gunakan untuk mengganti nama-aos nya :

1. fade-left
2. fade-right
3. fade-up
4. fade-up-left
5. fade-up-right
6. fade-down
7. fade-down-left
8. fade-down-right
9. zoom-in
10. zoom-in-up
11. zoom-in-down
12. zoom-in-left
13. zoom-in-right
14. zoom-out
15. zoom-out-up
16. zoom-out-down
17. zoom-out-left
18. zoom-out-right
19. slide-up
20. slide-down
21. slide-left
22. slide-right
23. flip-up
24. flip-down
25. flip-left
26. flip-right

Jadi, nama-aos nya nanti akan berubah sesuai nama type animasi yang kalian inginkan, misalkan seperti ini :

 KODE GAMBAR 

Supaya lebih mengetahui bagaimana bentuk animasi-animasi nya silakan lihat demo dibawah ini. Scroll kebawah secara perlahan-lahan untuk melihat efeknya dengan seksama. Jika ingin melihat efeknya lagi, scroll aja keatas lalu scroll lagi kebawah.

1. FADE LEFT dan RIGHT

1. FADE LEFT

2. FADE RIGHT

2. FADE UP dan UP COMBINE LEFT / RIGHT

1. FADE UP

2. FADE UP LEFT

3. FADE UP RIGHT

3. FADE DOWN dan DOWN COMBINE LEFT / RIGHT

1. FADE DOWN

2. FADE DOWN LEFT

3. FADE DOWN RIGHT

4. ZOOM IN dan ZOOM IN COMBINE UP / DOWN / LEFT / RIGHT

1. ZOOM IN

2. ZOOM IN UP

3. ZOOM IN DOWN

4. ZOOM IN LEFT

5. ZOOM IN RIGHT

5. ZOOM OUT dan ZOOM OUT COMBINE UP / DOWN / LEFT / RIGHT

1. ZOOM OUT

2. ZOOM OUT UP

3. ZOOM OUT DOWN

4. ZOOM OUT LEFT

5. ZOOM OUT RIGHT

6. SLIDE UP / DOWN / LEFT / RIGHT

1. SLIDE UP

2. SLIDE DOWN

3. SLIDE LEFT

4. SLIDE RIGHT

7. FLIP UP / DOWN / LEFT / RIGHT

1. FLIP UP

2. FLIP DOWN

3. FLIP LEFT

4. FLIP RIGHT

Note :
Cara tersebut juga bisa digunakan untuk mengapit kode video seperti dibawah ini :

Gimana? Cukup menarik bukan...

KEKURANGAN

Meskipun teknik ini terlihat menarik, namun ada kekurangan yang membuat teknik ini sedikit ribet untuk diterapkan. Namun ini adalah versi pribadi saya, diantaranya adalah :

1. Pemberian nama style animasi nya harus manual.
2. Jumlah efek yang diberikan sih bebas, namun jika ingin menerapkan pada semua objek (gambar/video) pada artikel, maka kita memberikan efek tersebut 1 per 1 sesuai jumlah objek yang ingin diberi efek.
3. Harus telaten jika ingin menerapkan cara ini.

Jika memang kalian orang yang telaten dalam membuat konten, saya rasa segala kekurangan yang saya sebutkan diatas tadi tidak akan menjadi masalah bagi kalian. Untuk menciptakan konten yang baik memang perlu usaha yang gak asal-asalan kan? Setuju?