Sebenarnya juga sih tidak terlalu cocok di katakan Earthquake effect mungkin lebih cocoknya "Shake Effect" atau apasajalah yang mungkin lebih cocok. Untuk efek keyframe lain jika tertari baca : membuat efek loading dengan keyframe di blog.
Anda dapat menerapkan efek ini di loading blog anda. Efek ini hanya menggunakan CSS dan tidak menggunakan javascript jadi tidak akan mempengaruhi loading blog begitu besar. Cuma sayangnya efek ini tidak terlihat untuk beberapa browser versi jadul ataupun ketika blog di akses dari mobile atau smartphone dkk.
Animation Loading Earthquake Effect
1. Masuk Edit HTML Template Blogger.
2. Selanjutnya cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya
@keyframes Earthquake{ /* Untuk browser Mozilla */
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(8deg);}
20%{opacity:1;transform:rotate(-8deg);}
25%{opacity:1;transform:rotate(10deg);}
30%{opacity:1;transform:rotate(-10deg);}
35%{opacity:1;transform:rotate(-10deg);}
40%{opacity:1;transform:rotate(12deg);}
45%{opacity:1;transform:rotate(-12deg);}
50%{opacity:1;transform:rotate(15deg);}
55%{opacity:1;transform:rotate(-15deg);}
60%{opacity:1;transform:rotate(12deg);}
65%{opacity:1;transform:rotate(-12deg);}
70%{opacity:1;transform:rotate(10deg);}
80%{opacity:1;transform:rotate(-10deg);}
85%{opacity:1;transform:rotate(8deg);}
90%{opacity:1;transform:rotate(-8deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}
@-webkit-keyframes Earthquake{ /* Untuk browser Safari dan Chrome */
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(8deg);}
20%{opacity:1;transform:rotate(-8deg);}
25%{opacity:1;transform:rotate(10deg);}
30%{opacity:1;transform:rotate(-10deg);}
35%{opacity:1;transform:rotate(-10deg);}
40%{opacity:1;transform:rotate(12deg);}
45%{opacity:1;transform:rotate(-12deg);}
50%{opacity:1;transform:rotate(15deg);}
55%{opacity:1;transform:rotate(-15deg);}
60%{opacity:1;transform:rotate(12deg);}
65%{opacity:1;transform:rotate(-12deg);}
70%{opacity:1;transform:rotate(10deg);}
80%{opacity:1;transform:rotate(-10deg);}
85%{opacity:1;transform:rotate(8deg);}
90%{opacity:1;transform:rotate(-8deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}
@-o-keyframes Earthquake{ /* Untuk browser Opera */
0%{opacity:1;transform:rotate(0deg);}
5%{opacity:1;transform:rotate(5deg);}
10%{opacity:1;transform:rotate(-5deg);}
15%{opacity:1;transform:rotate(5deg);}
20%{opacity:1;transform:rotate(-5deg);}
25%{opacity:1;transform:rotate(5deg);}
30%{opacity:1;transform:rotate(-5deg);}
35%{opacity:1;transform:rotate(-5deg);}
40%{opacity:1;transform:rotate(5deg);}
45%{opacity:1;transform:rotate(-5deg);}
50%{opacity:1;transform:rotate(5deg);}
55%{opacity:1;transform:rotate(-5deg);}
60%{opacity:1;transform:rotate(5deg);}
65%{opacity:1;transform:rotate(-5deg);}
70%{opacity:1;transform:rotate(5deg);}
80%{opacity:1;transform:rotate(-5deg);}
85%{opacity:1;transform:rotate(5deg);}
90%{opacity:1;transform:rotate(-5deg);}
95%{opacity:1;transform:rotate(5deg);}
35%{opacity:1;transform:rotate(0deg);}
}
3. Sisipkan kode animation:Earthquake 4s infinite; -webkit-animation:Earthquake 4s infinite; -o-animation:Earthquake 4s infinite; ke bagian yang ingin anda beri efek, misalkan pada #outer-wrapper . Contohnya:
#outer-wrapper { animation:Earthquake 4s infinite; -webkit-animation:Earthquake 4s infinite; -o-animation:Earthquake 4s infinite; }
4. Save Template.
Live Demo Animation Earthquake Effect
Untuk demonya ketika anda memasangnya di template adalah seperti diatas seandainya di atas adalah template atau blog anda. Tentusaja jika di pasang di blog sangat berbeda dengan demo diatas yang terus bergerak tanpa henti.
Untuk kecepatan loading tinggal sobat setting misalnya 4s di turunkan menjadi 2s untuk efek loading lebih cepat atau dinaikan 4s menjadi 8s dan seterusnya untuk loading yang lebih lama. Ok sobat sekian untuk saat ini, semoga bermanfaat.
0 Komentar untuk "Membuat Animation Loading Earthquake Effect"