Sabtu, 19 April 2014

Membuat Efek Jatuh Dengan CSS Pada Teks & Gambar

Membuat Efek Jatuh Dengan CSS Pada Teks & Gambar - Dari beberapa kode efek yang ada di template blog ini, saya coba untuk mengkombinasikannya menjadi efek yang lain seperti yang akan saya jelaskan pada artikel ini, efek jatuh. Efek jatuh ini bisa digunakan pada teks atau gambar dan penggunaannya pun cukup mudah karena hanya menggunakan kode css saja

Membuat Efek Jatuh Dengan CSS Pada Teks & Gambar

PANDUAN TEMPLATE BLOG

Untuk membuat efek jatuh dengan css pada teks atau gambar seperti contoh diatas, caranya cukup mudah
  • Login ke akun Blogger Anda
  • Pilih menu Template >> Edit HTML
  • Cari kode ]]></b:skin> atau </style>. Untuk mencari kode silahkan gunakan caranya disini
  • Salin kode css berikut sebelum kode ]]></b:skin> atau </style>
  • Kode CSS
    .imganimasi{
     -webkit-animation-duration: 3s;
         -webkit-animation-delay: 2s;
         -webkit-animation-iteration-count: infinite;
    }
    .animasijatuh {
     -webkit-animation-name: animasijatuh;
     -moz-animation-name: animasijatuh;
     -o-animation-name: animasijatuh;
     animation-name: animasijatuh;
    }
    @-webkit-keyframes animasijatuh {
     0%{-webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;} 
     20%, 60%{ -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;} 
     40%{-webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;} 
     80%{-webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out;} 
     100%{-webkit-transform: translateY(700px); opacity: 0; }
    }
    @-moz-keyframes animasijatuh {
     0%{-moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;} 
     20%, 60%{-moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;} 
     40%{-moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;} 
     80%{-moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out;} 
     100%{-moz-transform: translateY(700px); opacity: 0;}
    }
    @-o-keyframes animasijatuh {
     0%{-o-transform: rotate(0); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;} 
     20%, 60%{-o-transform: rotate(80deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;} 
     40%{-o-transform: rotate(60deg); -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;} 
     80%{-o-transform: rotate(60deg) translateY(0); opacity: 1; -o-transform-origin: top left; -o-animation-timing-function: ease-in-out;} 
     100%{-o-transform: translateY(700px); opacity: 0;}
    }
    @keyframes animasijatuh {
     0%{transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out;} 
     20%, 60%{transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out;} 
     40%{transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out;} 
     80%{transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out;} 
     100%{transform: translateY(700px); opacity: 0;}
    }
  • Salin kode html berikut ini dimanapun yang ingin Anda berikan efek jatuh didalam blog Anda
  • <div class="imganimasi animasijatuh"></div>
  • Pemasangan efek jatuh pada teks
    <div class="imganimasi animasijatuh">Masukkan Teks Disini</div>
  • Pemasangan efek jatuh pada gambar
    <div class="imganimasi animasijatuh"><img src="ganti-dengan-link-gambar-disini" /></div>

Tertarik menggunakan efek jatuh dengan css pada teks dan gambar seperti contoh diatas? Silahkan dan semoga bermanfaat

Membuat Efek Jatuh Dengan CSS Pada Teks & Gambar Rating: 4.5 Diposkan Oleh: ana sriwahyuni

9 komentar:

  1. keren mbak tutorialnya, perlu di coba nih

    BalasHapus
    Balasan
    1. silahkan mas, semoga bermanfaat :)

      Hapus
  2. jadi tambah keren ya buk kalau ada efek jatuh nya ini. jadi pengen coba deh pasang efek pada blog soalnya belum pernah coba kecuali efek daun berjatuhan :D

    BalasHapus
    Balasan
    1. kode efek ini juga mengadopsi efek daun berjatuhan itu mbak dengan beberapa kombinasi dari kode lainnya. silahkan mbak Rini, semoga bermanfaat..

      Hapus
  3. wah keren juga ya mbak bisa memperindah tampilan postingan kita sehingga terkesan unik dan menarik :) ini termasuk ide unik dan lucu ya mbak ada sesuatu bergelantungan lalu jatuh dan bisa bikin pembaca berlama lama melihat itu trs, hehehe :D

    makasih sharingnya kapan2 dicoba di halaman statis about me :D

    BalasHapus
    Balasan
    1. :D makasih juga mbak Indri
      silahkan mbak dipasang semoga bermanfaat.. :)

      Hapus
  4. di copy, mantap nich efeknya (y)

    BalasHapus
    Balasan
    1. jangan lupa di paste ya, kalo di copy aja entar bisa nyangkut loh :)

      Hapus
  5. keren mbak....... keren!!!!
    boleh la boleh :-D

    BalasHapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia