Membuat Gambar Bergoyang Dengan CSS3


Membuat Gambar Bergoyang Dengan CSS3

Assalamualaikum Wr. Wb.
Kali ini kita akan belajar membuat gambar bergoyang dengan menggunakan CSS3 pastinya, efek ini menggunakan @rule keyframes sebagai keyframe animasinya. Apa itu @rule keyframes? @rule keyframes adalah sebuah tempat untuk menampung parameter-parameter pergerakan pada suatu objek, seperti namanya yaitu keyframe berarti mengacu pada keyframe suatu animasi. oke daripada penasaran, yuk langsung aja kita masuk ke pembahasan inti. disimak ya :)

Kali ini kita membutuhkan 3 item parameter pada cssnya : (keyframe buat animasinya, class, pseudo-class hovernya), Kita buat kerangkanya terlebih dahulu... Buat kerangka keyframenya, seperti ini :

@keyframes goyang {
 
}

Lalu kita buat kerangka class bernama goyang :

.goyang {
 
}

Dan terakhir kerangka pseudo-class hovernya :

.goyang:hover {
 
}

Sebelum berlanjut ke tahap meracik sebaiknya kita harus tau dulu pembagian waktu/timing pada css3. Secara default penulisannya seperti ini :

@keyframe coba {
    From { left: 0px; }
    To { left: 200px; }
}

Atau

@keyframe coba {
    0% { left: 0px; }
    100% { left: 200px; }
}

Pasti udah kebayangkan cara mendeklarasikannya bagaimana? Untuk pergerakan objeknya saya memberi perbandingan 50:100 tiap persentase perubahan bentukannya.

Oke, sekarang kita racik keyframe animasinya. Nah, ini sedikit review racikan awal keyframesnya... 

@keyframes goyang {
    0% { transform: translate(0,0) rotate(0deg) }
    2% { transform: translate(6px,-7px) rotate(2.5deg) }
    4% { transform: translate(8px,-8px) rotate(2.5deg) }
    6% { transform: translate(1px,-8px) rotate(-3.5deg) }
    8% { transform: translate(-3px,4px) rotate(-0.5deg) }
    10% { transform: translate(0,-3px) rotate(1.5deg) }
    /* dan seterusnya................... */
}

Ayo sekarang kita imajinasikan, objek yang nanti kita buat adalah objek bergoyang? Pasti objek kita nanti akan mengalami perubahan bentuk untuk bergerak kesamping kiri kanan dan berputar. udah terimajinasikan? Berarti yang kita butuhkan nanti adalah property transform dengan value translate (perpindahan) dan rotate (perputaran).

Sedikit gambaran adalah, setiap keliapatan pergerakannya kita bumbui dengan translate (x,y) dan rotate ( deg ) dan peritem dapat anda atur sendiri sesuai selera dan inilah hasil racikannya.

@keyframes goyang {
    0% { transform: translate(0,0) rotate(0deg) }
    2% { transform: translate(6px,-7px) rotate(2.5deg) }
    4% { transform: translate(8px,-8px) rotate(2.5deg) }
    6% { transform: translate(1px,-8px) rotate(-3.5deg) }
    8% { transform: translate(-3px,4px) rotate(-0.5deg) }
    10% { transform: translate(0,-3px) rotate(1.5deg) }
    12% { transform: translate(-1px,2px) rotate(0.5deg) }
    14% { transform: translate(6px,6px) rotate(-1.5deg) }
    16% { transform: translate(-7px,4px) rotate(-0.5deg) }
    18% { transform: translate(7px,8px) rotate(-3.5deg) }
    20% { transform: translate(-6px,2px) rotate(1.5deg) }
    22% { transform: translate(9px,5px) rotate(-1.5deg) }
    24% { transform: translate(7px,-2px) rotate(0.5deg) }
    26% { transform: translate(-7px,-10px) rotate(-0.5deg) }
    28% { transform: translate(-10px,-8px) rotate(-1.5deg) }
    30% { transform: translate(8px,4px) rotate(0.5deg) }
    32% { transform: translate(0,4px) rotate(1.5deg) }
    34% { transform: translate(-8px,6px) rotate(-0.5deg) }
    36% { transform: translate(-5px,7px) rotate(1.5deg) }
    38% { transform: translate(-4px,-4px) rotate(-1.5deg) }
    40% { transform: translate(9px,4px) rotate(-1.5deg) }
    42% { transform: translate(9px,-5px) rotate(2.5deg) }
    44% { transform: translate(-5px,-4px) rotate(-2.5deg) }
    46% { transform: translate(7px,-7px) rotate(1.5deg) }
    48% { transform: translate(-5px,8px) rotate(0.5deg) }
    50% { transform: translate(9px,1px) rotate(-1.5deg) }
    52% { transform: translate(-9px,-5px) rotate(-3.5deg) }
    54% { transform: translate(-2px,9px) rotate(1.5deg) }
    56% { transform: translate(6px,-1px) rotate(1.5deg) }
    58% { transform: translate(-6px,0) rotate(-0.5deg) }
    60% { transform: translate(3px,1px) rotate(1.5deg) }
    62% { transform: translate(5px,-7px) rotate(-0.5deg) }
    64% { transform: translate(9px,2px) rotate(2.5deg) }
    66% { transform: translate(6px,0) rotate(-2.5deg) }
    68% { transform: translate(5px,-4px) rotate(-2.5deg) }
    70% { transform: translate(-8px,5px) rotate(-2.5deg) }
    72% { transform: translate(-6px,-2px) rotate(0.5deg) }
    74% { transform: translate(-3px,7px) rotate(-3.5deg) }
    76% { transform: translate(-7px,-8px) rotate(-3.5deg) }
    78% { transform: translate(-1px,-2px) rotate(2.5deg) }
    80% { transform: translate(8px,6px) rotate(-2.5deg) }
    82% { transform: translate(-2px,-9px) rotate(2.5deg) }
    84% { transform: translate(8px,-10px) rotate(-0.5deg) }
    86% { transform: translate(-6px,0) rotate(2.5deg) }
    88% { transform: translate(-1px,9px) rotate(-3.5deg) }
    90% { transform: translate(-7px,8px) rotate(1.5deg) }
    92% { transform: translate(-10px,-8px) rotate(0.5deg) }
    94% { transform: translate(-8px,6px) rotate(1.5deg) }
    96% { transform: translate(4px,-9px) rotate(2.5deg) }
    98% { transform: translate(-4px,9px) rotate(0.5deg) }
}

Oke selanjutnya kita beri parameter bagian classnya. Di sini kita hanya membutuhkan margin saja untuk memberi jarak agar objek tidak terlalu di pojok...

.goyang {
    margin: 15px 0 0 15px;
}

Untuk style yang terakhir adalah menjadikan hover kita sebagai proses jalannya animasi yang tadi kita buat. Pada baris pertama kita buat deklarasi pemanggil keyframe animasi yang kita buat tadi...

animation-name: goyang;

Lalu dibawahnya kita buat durasi untuk animasi kita nantinya...

animation-duration: 5s;

Dan kita atur jalannya perulangan animasi menjadi infinite (perulang-ulang/tak hingga).

animation-iteration-count: infinite;

Untuk timingnya kita pakai (ease-in-out) agar lebih slow.

animation-timing-function: ease-in-out;

Terakhir kita tambahkan play statenya agar animasi kita nanti langsung play/jalan saat cursor mouse saat posisi hover.

animation-play-state: running;

Dan ini jadinya rangkaian pseudo-classnya.

.goyang:hover {
    animation-name: goyang;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-play-state: running;
}

Lalu kita beri gambar sebagai objek logo buat objek animasinya, pada tag body.

<img class="goyang" src="1.png"/>

(kita beri deklarasikan atribut class dengan nama putar dan kita beri atribut src atau tempat direktori gambar yang dimaksud)

 

Jadi keseluruhan codenya, seperti ini...

<!DOCTYPE html>
<html>
<head>
    <title>Gambar Goyang</title>
<style>
@keyframes goyang {
    0% { transform: translate(0,0) rotate(0deg) }
    2% { transform: translate(6px,-7px) rotate(2.5deg) }
    4% { transform: translate(8px,-8px) rotate(2.5deg) }
    6% { transform: translate(1px,-8px) rotate(-3.5deg) }
    8% { transform: translate(-3px,4px) rotate(-0.5deg) }
    10% { transform: translate(0,-3px) rotate(1.5deg) }
    12% { transform: translate(-1px,2px) rotate(0.5deg) }
    14% { transform: translate(6px,6px) rotate(-1.5deg) }
    16% { transform: translate(-7px,4px) rotate(-0.5deg) }
    18% { transform: translate(7px,8px) rotate(-3.5deg) }
    20% { transform: translate(-6px,2px) rotate(1.5deg) }
    22% { transform: translate(9px,5px) rotate(-1.5deg) }
    24% { transform: translate(7px,-2px) rotate(0.5deg) }
    26% { transform: translate(-7px,-10px) rotate(-0.5deg) }
    28% { transform: translate(-10px,-8px) rotate(-1.5deg) }
    30% { transform: translate(8px,4px) rotate(0.5deg) }
    32% { transform: translate(0,4px) rotate(1.5deg) }
    34% { transform: translate(-8px,6px) rotate(-0.5deg) }
    36% { transform: translate(-5px,7px) rotate(1.5deg) }
    38% { transform: translate(-4px,-4px) rotate(-1.5deg) }
    40% { transform: translate(9px,4px) rotate(-1.5deg) }
    42% { transform: translate(9px,-5px) rotate(2.5deg) }
    44% { transform: translate(-5px,-4px) rotate(-2.5deg) }
    46% { transform: translate(7px,-7px) rotate(1.5deg) }
    48% { transform: translate(-5px,8px) rotate(0.5deg) }
    50% { transform: translate(9px,1px) rotate(-1.5deg) }
    52% { transform: translate(-9px,-5px) rotate(-3.5deg) }
    54% { transform: translate(-2px,9px) rotate(1.5deg) }
    56% { transform: translate(6px,-1px) rotate(1.5deg) }
    58% { transform: translate(-6px,0) rotate(-0.5deg) }
    60% { transform: translate(3px,1px) rotate(1.5deg) }
    62% { transform: translate(5px,-7px) rotate(-0.5deg) }
    64% { transform: translate(9px,2px) rotate(2.5deg) }
    66% { transform: translate(6px,0) rotate(-2.5deg) }
    68% { transform: translate(5px,-4px) rotate(-2.5deg) }
    70% { transform: translate(-8px,5px) rotate(-2.5deg) }
    72% { transform: translate(-6px,-2px) rotate(0.5deg) }
    74% { transform: translate(-3px,7px) rotate(-3.5deg) }
    76% { transform: translate(-7px,-8px) rotate(-3.5deg) }
    78% { transform: translate(-1px,-2px) rotate(2.5deg) }
    80% { transform: translate(8px,6px) rotate(-2.5deg) }
    82% { transform: translate(-2px,-9px) rotate(2.5deg) }
    84% { transform: translate(8px,-10px) rotate(-0.5deg) }
    86% { transform: translate(-6px,0) rotate(2.5deg) }
    88% { transform: translate(-1px,9px) rotate(-3.5deg) }
    90% { transform: translate(-7px,8px) rotate(1.5deg) }
    92% { transform: translate(-10px,-8px) rotate(0.5deg) }
    94% { transform: translate(-8px,6px) rotate(1.5deg) }
    96% { transform: translate(4px,-9px) rotate(2.5deg) }
    98% { transform: translate(-4px,9px) rotate(0.5deg) }
}
.goyang {
    margin: 15px 0 0 15px;
}
.goyang:hover {
    animation-name: goyang;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
    animation-play-state: running;
}
</style>
</head>
<body>
    <img class="goyang" src="1.png"/>
</body>
</html>

Demonya seperti ini

 

 

Begitulah cara membuat gambar bergoyang dengan CSS3, gimana? mudah bukan? sekian ya, selamat mencoba!

Wassalamualaikum Wr. Wb.


http://short.erllang.ga/DTnAc

Suka Dengan Artikel ini? Bagikan!  
Facebook Twitter Google+ LINE WhatsApp
Komentar pada “ Membuat Gambar Bergoyang Dengan CSS3