Cara Membuat Animasi Loading Sliding Efect di Blog

Cara membuat loading Sliding Efect di Blog. Baiklah sobat pada kesempatan ini seocips.com akan membagikan trik bagaimana cara membuat loading efek sliding menggunakan animasi @keyframe. Animasi ini hanya menggunkan CSS3 tidak menggunakan java script jadi tidak akan mempengaruhi loading blog begitu besar.

Memang untuk menambah daya tarik tampilan blog beberapa orang menambahkan efek loading blog, nah contohnya sebelumnya seocips telah membagikan bagaimana cara membuat efek loading dengan waktu dan tanggal, membuat efek loading blog sederhana, dan efek loading blog lingkaran yang juga menggunakan efek keyframe.

Animasi Loading Sliding Efect di Blogspot

1. Masuk Edit HTML Template Blogger sobat.
2. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@keyframes Sliding{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
}

3. Sisipkan kode animation: Sliding 2s; ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper . Contohnya:

#main-wrapper { animation : Sliding 2s; }

4. Save Template

Untuk cara pertama mungkin tidak support untuk semua browser, Jiak begitu hapus saja dan ganti dengan kode dibawah ini. Langkah-langkahnya sama saja seperti diatas.

1. Masuk Edit HTML Template Blogger sobat.
2. Tambahkan kode dibawah ini ke CSS sobat dengan cara : Cari kode ]]></b:skin> lalu letakan kode di bawah ini tepat di atasnya

@-webkit-keyframes slide{
from{transform:translate(-1000px, 0px);}
to{transform:translate(0px,0px);}}
@keyframes slide{
from{transform:translate(-1000px,0px);opacity:0}
to{transform:translate(0px,0px);opacity:1.1;}
} 

3. Sisipkan kode  -moz-animation:slide 4s;-webkit-animation:slide 4s;animation:slide 4s  ke bagian yang ingin anda beri efek, misalkan pada #main-wrapper. contohnya:

#main-wrapper {-moz-animation:slide 4s ;-webkit-animation:slide 4s;
animation:slide 4s }

4. Save Template.

Untuk kecepatan loading tinggal sobat setting misalnya 4s di turunkan menjadi 2s untuk efek loading lebih cepat.


Selain animasi Sliding efect ada juga efek loading animation bounce and rotate, dan animation earthquacke effect ( baca disini ). Ok selamat mencoba dan semoga bermanfaat.

By Brando Mewo