CSS Loading Halaman Blog Dengan @keyframes

Hari ini saatnya saya akan membuat tutorial cara memasang efek loading blog keren dengan CSS @keyframes, yang sebelumnya saya sudah pernah membahas cara membuat CSS Animation @Keyframes. namun kali ini kita akan menerapkannya pada saat halaman blog di muat, dan akan menimbulkan efek animation dengan smooth(halus) tanpa bantuan jQuery. jika kalian ingin memasangnya pada blog terutama pengguna blogger silahkan di simak tutorialnya.
CSS
Masuk edit Templates dan letakan css berikut di atas code ]]></skin> :
@keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@-moz-keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@-webkit-keyframes myfirst
 {
 from{opacity:0;}
 to{opacity:10;}
 }
@keyframes
 {
 from{transform:translate(0px, 9000px)}
 to{transform:translate(0px, 0px)}
 }
@-moz-keyframes
 {
 from{-moz-transform:translate(0px, 9000px)}
 to{-moz-transform:translate(0px, 0px)}
 }
@-webkit-keyframes
 {
 from{-webkit-transform:translate(0px, 9000px)}
 to{-webkit-transform:translate(0px, 0px)}
 }
#header-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#content-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#main-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#sidebar-wrapper {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
#nav {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,a {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
h1,h2,h3,h4,h5,h6,.post img {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 8s;}
Simpan Template dan lihat Hasilnya.
Penjelasan
id-widgetAnimationTime Load
#header-wrappermyfirst5s
#content-wrappermyfirst5s
#main-wrappermyfirst5s
#sidebar-wrappermyfirst5s
ID-widget di atas hanya sebagian kalian bisa menambahkan dengan widget lain . Time load adalah lama loading saat animasi bekerja dengan waktu yang di tentukan . kalian bisa menggantinya sesuai keinginan.
cara menambahkan cukup simpan properti css berikut dan ganti #id-widget dengan id template anda.
#id-widget {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}
Browser
BrowserAnimation
Firefox-moz-animation: myfirst 5s
Chrome-webkit-animation: myfirst 5s
Pada tabel browser pendung yang saya buat untuk browser Firefox dengan atribut -moz- dan Chrome/safari dengan atribute -webkit- ,untuk browser Opera tinggal tambahkan awalan -o- jika animasi ini mendukung.
Sekian Tutorial cara membuat animasi loading halaman blog dengan @keyframes semoga bisa bermanfaat dan semoga berhasil, berkomentar selalu membangun kreativitas lebih baik,maka buatlah sebuah diskusi dengan pertanyaan yang baik pula.

15 comments:

  1. sob ane mau minta reques tutorial membuat tablekaya itu, yang biru biru itu

    ReplyDelete
    Replies
    1. CSS
      table[border="1"]{border-collapse:collapse;margin:10px}
      table[border="1"],table[border="1"] th,table[border="1"] td{border:1px solid #bbb;padding:2px 7px}
      td{vertical-align:top}
      table[border="1"] th{background-color:#fafafa;font-weight:700;text-align:left}
      .full,table.full{width:96.8%}
      table.config{background-color:#FFF0A0}
      table.config td,table.config th{border-color:#333}
      table.config th{background-color:#333;color:white}

      HTML
      <table border="1" class="full config"><tbody>
      <tr><th>Opsi</th><th>Keterangan</th></tr>
      <tr><td>............</td><td>.............................</td></tr>
      <tr><td>............</td><td>.............................</td></tr>
      <tr><td>............</td><td>.............................</td></tr>
      <tr><td>............</td><td>.............................</td></tr>
      <tr><td>............</td><td>.............................</code></td></tr>
      </tbody></table>

      Delete
  2. sob maap nih bnyak mintanya, bisa sekalian ajarin buat tampilan komentar kaya gini ngak?

    ReplyDelete
  3. Oiya,bisa kgk kalau animasinya di ganti ?

    ReplyDelete
    Replies
    1. mau di ganti apa...?? animasi keyframes banyak sekali kegunaanya.. di atas hanya teknik dasar saja... :Q

      Delete
    2. Mau di ganti jadi sesuatu ^_^ , hehehe
      oiya kalau mau di ganti animasinya,kode yang di ganti yang mana ? hehe

      Delete
    3. untuk mengubah arah animasi ganti dan setting penganturan css ini.

      from{-webkit-transform:translate(0px, 9000px)}
      to{-webkit-transform:translate(0px, 0px)}


      Untuk menampilkan animation berbeda pada widget tertentu maka yang perlu di edit css ini.

      #id-widget {animation: myfirst 5s;-moz-animation: myfirst 5s;-webkit-animation: myfirst 5s;}

      NB : #id-widget ganti dengan id widget pada template kamu.

      Delete
    4. Oke,saya coba utak atik dlo ^_^

      Delete
  4. gan, koq di template blog saya ga ada ]]> ya??
    ada solusi lain ga?

    ReplyDelete
  5. izin pake yah kang.
    ternyata adminnya lebih tua dari saya. ckckck \o/

    ReplyDelete
  6. mas fungsi
    @keyframes
    {
    from{transform:translate(0px, 9000px)}
    to{transform:translate(0px, 0px)}
    }

    apa?

    ReplyDelete

Perhatian !! Komentar Pada Bulan September 2012 belum bisa di balas.
di karenakan semua admin sedang sibuk dengan urusan kulliahnya.
semoga setelah akhir bulan artikel dan komentar akan segera di update.


terima kasih atas perhatiannya sekali lagi kami minta maaf yang sebesar-besarnya.

 
loading...
Top