Support Idiot Attacker dengan klik subscribe di channel Disini, Banyak konten-konten Idiot attacker yg di upload disana.
Cara membuat Objek Bergoyang saat di scroll CSS3

Cara membuat Objek Bergoyang saat di scroll CSS3

Rio Setyawan 9:09 PM
Cara membuat Objek Bergoyang saat di scroll CSS3
Udah lama nih gak membuat tutorial di blog ini, sampai blognya berdebu wkwkwkw

Langsung saja ya tanpa basa basi
Cara membuat Objek Bergoyang saat di scroll CSS3
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 langsung saja
Siapkan senjatanya dulu
Notepad pastinya
Lalu buat struktur htmlnya.
<!DOCTYPE html>
<html>
<head>
    <title>Cara membuat Objek Bergoyang saat di scroll CSS3 | Idiot Attacker</title>
<style>
 
</style>
</head>
<body>
 
</body>
</html>

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 sudah kebayangkan cara mendeklarasikannya bagaimana.?

Untuk pergerakan objeknya saya memberi perbandingan 50:100 tiap persentase perubahan bentuknnya.
Perlu di ingat : semakin banyak rasio perbandingan maka semakin halus pula berjalannya animasi di layar.

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.

Sudah 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.

Cmon’ stady di baris pseudo-class hovernya.

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 slowww. 
 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;

And, 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="link logo gambarmu"/>

( 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>Cara membuat Objek Bergoyang saat di scroll CSS3 | Idiot Attacker</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="link logo gambarmu"/>
</body>
</html>


DEMO:

Sekian tutorial kali ini, tetep pantengi blog ini, biar gak kaya kuburan hehehe.
Sumber: Jago Coding, CC: Mohammad Nur Huda


Tag: CSS3, belajar css3, cara membuat gambar bergoyang, cara membuat object bergoyang, css gambar bergoyang, tutorial css, gambar bergoyang saat di scroll
Next
« Prev Post
Previous
Next Post »
0 Komentar
Post a Comment
Subscribe to: Post Comments (Atom)