Membuat efek berayun pada gambar

Membuat efek berayun pada gambar

  11 January    Andika

---

Awalnya saya memang memang berencana untuk tidak update lagi, nyatanya, melihat trafik yang bisa di katakan masih stabil hingga saat ini, sayang juga rasanya jika blog ini saya tinggalkan. Makanya saya kembali. Tapi Sebelumnya, Makasih banyak untuk kamu yang telah/selalu menyempatkan waktunya untuk mengunjugi blog ini!

Kali ini, saya akan berbagi Image effect yang pernah saya gunakan pada Template sebelumnya. Yaitu efek berayun atau bergoyang pada gambar.

Image effect ini memang tidak akan saya gunakan lagi pada template, namun tidak ada salahnya jika kodenya saya backup di sini. Ya mana tahu nantinya saya butuh lagi.

Demonya,

Untuk efek ini saya kasih nama berayun saja, bergoyang sebenarnya sih oke juga, tapi terserah lah.

Jika kamu tertarik menggunakan, silahkan, berikut kode CSSnya,

.berayun img {
    -webkit-animation:swinging 10s ease-in-out 0s infinite;
    -moz-animation:swinging 10s ease-in-out 0s infinite;
    animation:swinging 10s ease-in-out 0s infinite;
    -webkit-transform-origin:50% 0;
    -moz-transform-origin:50% 0;
    transform-origin:50% 0;
}

@-webkit-keyframes berayun {
    0% {
        -webkit-transform: rotate(0);
        }
        
    5% {
        -webkit-transform: rotate(10deg);
    }
    
    10% { 
        -webkit-transform: rotate(-9deg); 
        }
        
    15% { 
        -webkit-transform: rotate(8deg);
        }
        
    20% { 
        -webkit-transform: rotate(-7deg); 
        }
        
    25% { 
        -webkit-transform: rotate(6deg);
        }
        
    30% {
        -webkit-transform: rotate(-5deg); 
        }
        
    35% { 
        -webkit-transform: rotate(4deg); 
        }
        
    40% { 
        -webkit-transform: rotate(-3deg); 
        }
        
    45% { 
        -webkit-transform: rotate(2deg); 
        }
        
    50% { 
        -webkit-transform: rotate(0);
        }
        
    100% { 
        -webkit-transform: rotate(0); 
        }
}

@-moz-keyframes berayun {
    0% { 
        -moz-transform: rotate(0); 
        }
        
    5% { 
        -moz-transform: rotate(10deg);
        }
        
    10% {
        -moz-transform: rotate(-9deg);
        }
        
    15% {
        -moz-transform: rotate(8deg);
        }
        
    20% {
        -moz-transform: rotate(-7deg);
        }
        
    25% { 
        -moz-transform: rotate(6deg);
        }
        
    30% { 
        -moz-transform: rotate(-5deg); 
        }
        
    35% {
        -moz-transform: rotate(4deg);
        }
        
    40% { 
        -moz-transform: rotate(-3deg); 
        }
        
    45% { 
        -moz-transform: rotate(2deg);
        }
        
    50% {
        -moz-transform: rotate(0);
        }
        
    100% {
        -moz-transform: rotate(0); 
        }
}

@keyframes berayun {
    0% {
        transform: rotate(0);
        }
        
    5% {
        transform: rotate(10deg);
        }
        
    10% { 
        transform: rotate(-9deg); 
        }
        
    15% {
        transform: rotate(8deg);
        }
        
    20% { 
        transform: rotate(-7deg);
        }
        
    25% { 
        transform: rotate(6deg);
        }
        
    30% { 
        transform: rotate(-5deg);
        }
        
    35% { 
        transform: rotate(4deg); 
        }
        
    40% { 
        transform: rotate(-3deg); 
        }
        
    45% { 
        transform: rotate(2deg);
        }
        
    50% { 
        transform: rotate(0); 
        }
        
    100% { 
        transform: rotate(0); 
        }
}

Tempatkan kode di atas sebelum kode ]]></b:skin> pada template.

Untuk menampilkan efeknya pada postingan, berikut contoh penulisannya,

<div class="berayun">
    <img src="url gambar" />
</div>

Smoga berguna!