Mengontrol Efek Gerak Dengan Perintah Hover - Dengan penggunaan sebuah elemen CSS-animasi, maka dengan mudah kita membuat sebuah objek dapat bergerak. Karena pada hakikatnya keberadaan animasi ini berfungsi untuk membuat objek agar dapat bergerak secara otomatis (tanpa perintah).
Apa itu Animasi (efek gerak).?
Animasi adalah penggabungan beberapa fungsi elemen yang dibentuk dan disusun secara beraturan untuk membuat objek agar dapat bergerak yang ditentukan dengan nilai pertambahan waktu yang terjadi, objek sebagai target bisa berupa gambar atau tulisan. Biasanya sang Animator dalam membuat efek gerak (animasi) akan menentukan terlebih dahulu alur gerak suatu objek dari keadaan awal sampai keadaan akhir gerakan objek tersebut, sehingga dengan perumusan alur gerak yang tepat, maka akan dapat menghasilkan animasi (efek gerak) yang menarik untuk disaksikan.
PROSES PEMBUATAN ANIMASI (Efek Gerak)
Ada 2 kategori dalam membuat efek gerak, diantaranya adalah:
1. Sistem Otomatis
Efek gerak yang dihasilkan dengan sistem ini adalah pergerakan objek secara otomatis. Tanpa ada suatu perintah, objek akan bergerak saat ditampilkan, sebagai contoh:
2. Perintah Hover
Hover yang dimaksud disini adalah objek hanya akan dapat bergerak saat pointer mouse Anda berada diatas objek tersebut, dan gerakan efek akan kembali pada titik awal saat pointer mouse dilepas. singkatnya efek gerak akan terjadi hanya apabila Anda mengontrol dengan perintah hover, sebagai contoh:
REVERSE BOX HOVER
Menggerakkan objek dengan nilai start-top dan bergerak menuju ke kanan dengan cepat hingga akhir, dan akan kembali ke atas sebelum akhirnya menuju awal dengan nilai-down.
DEMO SHOW
BOX HOVER DOWN BACK
Kebalikan sebelumnya, namun gerakan efek saat kembali akan kebawah terlebih dahulu hingga akhirnya menuju titik awal saat pointer di lepas.
DEMO SHOW
ROTATION STOP
Gerakan efek berputar saat akan berada diakhir, namun tampilan background saya buat berubah sebelum akhirnya gerakan berhenti.
DEMO SHOW
TRANSISI DELAY
Gerakan dengan perhitungan delay, efek akan bekerja dengan waktu, misalnya dengan durasi 5 menit, maka efek akan terlihat jika waktu sudah mencapai 5 menit.
DEMO SHOW
STEP IT UP
Posisi awal objek dalam keadaan tenggelam dibawah, dengan perintah hover objek akan bergerak berlahan hingga akhirnya mengapung diatas (step by step).
DEMO SHOW
Apapun yang akan Anda jadikan sebagai target gerak, hal yang terpenting dalam pembuatan efek gerak animasi adalah dengan memperhatikan 2 hal berikut, yaitu: Objek dan alur gerak. Selebihnya terserah Anda.!! hehe..
Apa itu Animasi (efek gerak).?
Animasi adalah penggabungan beberapa fungsi elemen yang dibentuk dan disusun secara beraturan untuk membuat objek agar dapat bergerak yang ditentukan dengan nilai pertambahan waktu yang terjadi, objek sebagai target bisa berupa gambar atau tulisan. Biasanya sang Animator dalam membuat efek gerak (animasi) akan menentukan terlebih dahulu alur gerak suatu objek dari keadaan awal sampai keadaan akhir gerakan objek tersebut, sehingga dengan perumusan alur gerak yang tepat, maka akan dapat menghasilkan animasi (efek gerak) yang menarik untuk disaksikan.
PROSES PEMBUATAN ANIMASI (Efek Gerak)
Ada 2 kategori dalam membuat efek gerak, diantaranya adalah:
1. Sistem Otomatis
Efek gerak yang dihasilkan dengan sistem ini adalah pergerakan objek secara otomatis. Tanpa ada suatu perintah, objek akan bergerak saat ditampilkan, sebagai contoh:
- Efek Slide Show Otomatis Pada Gambar
- Menghilangkan | Memunculkan Obyek Dengan CSS3 Animasi
- Membuat Carousel Gambar 3D Dengan CSS Transform
2. Perintah Hover
Hover yang dimaksud disini adalah objek hanya akan dapat bergerak saat pointer mouse Anda berada diatas objek tersebut, dan gerakan efek akan kembali pada titik awal saat pointer mouse dilepas. singkatnya efek gerak akan terjadi hanya apabila Anda mengontrol dengan perintah hover, sebagai contoh:
REVERSE BOX HOVER
Menggerakkan objek dengan nilai start-top dan bergerak menuju ke kanan dengan cepat hingga akhir, dan akan kembali ke atas sebelum akhirnya menuju awal dengan nilai-down.
<style type="text/css">
#stage {
position: relative;
height: 4em;
background: #E9967A;
text-align: center;}
#box {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
background: #DC143C;
line-height: 2em;
color: #fff;
-webkit-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
-moz-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
-ms-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);}
#stage:hover #box {
left: calc(100% - 100px);
bottom: 2em;
left:660px;
-webkit-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
-moz-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
-ms-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);}
</style>
<div id="stage">
<div id="box">
Hover Me.!
</div>
</div>
#stage {
position: relative;
height: 4em;
background: #E9967A;
text-align: center;}
#box {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
background: #DC143C;
line-height: 2em;
color: #fff;
-webkit-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
-moz-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
-ms-transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);
transition: 1s 4s bottom, 4s left cubic-bezier(1,0,1,1);}
#stage:hover #box {
left: calc(100% - 100px);
bottom: 2em;
left:660px;
-webkit-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
-moz-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
-ms-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);}
</style>
<div id="stage">
<div id="box">
Hover Me.!
</div>
</div>
BOX HOVER DOWN BACK
Kebalikan sebelumnya, namun gerakan efek saat kembali akan kebawah terlebih dahulu hingga akhirnya menuju titik awal saat pointer di lepas.
<style type="text/css">
#stage {...}
#box {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
background: #DC143C;
line-height: 2em;
color: #fff;
-webkit-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
-moz-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
-ms-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);}
#stage:hover #box {
left: calc(100% - 100px);
bottom: 2em;
left:660px;}
</style>
<div id="stage">
<div id="box">
Hover Me.!
</div>
</div>
#stage {...}
#box {
position: absolute;
left: 0;
bottom: 0;
width: 100px;
background: #DC143C;
line-height: 2em;
color: #fff;
-webkit-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
-moz-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
-ms-transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);
transition: 1s bottom, 4s 1s left cubic-bezier(0,1,1,1);}
#stage:hover #box {
left: calc(100% - 100px);
bottom: 2em;
left:660px;}
</style>
<div id="stage">
<div id="box">
Hover Me.!
</div>
</div>
ROTATION STOP
Gerakan efek berputar saat akan berada diakhir, namun tampilan background saya buat berubah sebelum akhirnya gerakan berhenti.
<style type="text/css">
#stage {...}
#block {
...
-webkit-transition-property: left, top, background, -webkit-transform;
-moz-transition-property: left, top, background, -moz-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-moz-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
-moz-transition-delay: 0, 0, 0, 1s;
transition-delay: 0, 0, 0, 1s;}
#stage:hover #block {
...
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
left: calc(100% - 102px);}
</style>
<div id="stage">
<div id="block">
Hover Me.!
</div>
</div>
#stage {...}
#block {
...
-webkit-transition-property: left, top, background, -webkit-transform;
-moz-transition-property: left, top, background, -moz-transform;
-webkit-transition-duration: 2s, 2s, 1s, 1s;
-moz-transition-duration: 2s, 2s, 1s, 1s;
-webkit-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-moz-transition-timing-function: ease-out, ease-in, linear, ease-in-out;
-webkit-transition-delay: 0, 0, 0, 1s;
-moz-transition-delay: 0, 0, 0, 1s;
transition-delay: 0, 0, 0, 1s;}
#stage:hover #block {
...
-webkit-transform: rotate(720deg);
-moz-transform: rotate(720deg);
-o-transform: rotate(720deg);
-ms-transform: rotate(720deg);
transform: rotate(720deg);
left: calc(100% - 102px);}
</style>
<div id="stage">
<div id="block">
Hover Me.!
</div>
</div>
TRANSISI DELAY
Gerakan dengan perhitungan delay, efek akan bekerja dengan waktu, misalnya dengan durasi 5 menit, maka efek akan terlihat jika waktu sudah mencapai 5 menit.
<style type="text/css">
.fader2:hover td {background-color: green; color:#fff;}
.fader2 td {
background-color: red;
color:#fff;
transition-timing-function: cubic-bezier(1,0,1,0);
-moz-transition-timing-function: cubic-bezier(1,0,1,0);
-webkit-transition-timing-function: cubic-bezier(1,0,1,0);
-ms-transition-timing-function: cubic-bezier(1,0,1,0);
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;}
</style>
<table class="fader2" cellpadding="10" cellspacing="2">
<tr> <td style="transition-delay: 0s;-moz-transition-delay: 0s;">10%</td> <td style="transition-delay: 0.5s;-moz-transition-delay: 0.5s;">20%</td> <td style="transition-delay: 1.0s;-moz-transition-delay: 1.0s;">30%</td> <td style="transition-delay: 1.5s;-moz-transition-delay: 1.5s;">40%</td> <td style="transition-delay: 2.0s;-moz-transition-delay: 2.0s;">50%</td> <td style="transition-delay: 2.5s;-moz-transition-delay: 2.5s;">60%</td> <td style="transition-delay: 3.0s;-moz-transition-delay: 3.0s;">70%</td> <td style="transition-delay: 3.5s;-moz-transition-delay: 3.5s;">80%</td> <td style="transition-delay: 4.0s;-moz-transition-delay: 4.0s;">90%</td> <td style="transition-delay: 4.5s;-moz-transition-delay: 4.5s;">100%</td> </tr>
</table>
.fader2:hover td {background-color: green; color:#fff;}
.fader2 td {
background-color: red;
color:#fff;
transition-timing-function: cubic-bezier(1,0,1,0);
-moz-transition-timing-function: cubic-bezier(1,0,1,0);
-webkit-transition-timing-function: cubic-bezier(1,0,1,0);
-ms-transition-timing-function: cubic-bezier(1,0,1,0);
transition-duration: 0.5s;
-moz-transition-duration: 0.5s;
-webkit-transition-duration: 0.5s;
-ms-transition-duration: 0.5s;}
</style>
<table class="fader2" cellpadding="10" cellspacing="2">
<tr> <td style="transition-delay: 0s;-moz-transition-delay: 0s;">10%</td> <td style="transition-delay: 0.5s;-moz-transition-delay: 0.5s;">20%</td> <td style="transition-delay: 1.0s;-moz-transition-delay: 1.0s;">30%</td> <td style="transition-delay: 1.5s;-moz-transition-delay: 1.5s;">40%</td> <td style="transition-delay: 2.0s;-moz-transition-delay: 2.0s;">50%</td> <td style="transition-delay: 2.5s;-moz-transition-delay: 2.5s;">60%</td> <td style="transition-delay: 3.0s;-moz-transition-delay: 3.0s;">70%</td> <td style="transition-delay: 3.5s;-moz-transition-delay: 3.5s;">80%</td> <td style="transition-delay: 4.0s;-moz-transition-delay: 4.0s;">90%</td> <td style="transition-delay: 4.5s;-moz-transition-delay: 4.5s;">100%</td> </tr>
</table>
STEP IT UP
Posisi awal objek dalam keadaan tenggelam dibawah, dengan perintah hover objek akan bergerak berlahan hingga akhirnya mengapung diatas (step by step).
<style type="text/css">
.box {
position: relative;
height: 320px;
background:#ccc;}
.step-right {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
background-color: rgba(255,0,0,0.5);}
.box:hover .step-right {
width: 100%;
transition-duration: 5s;
-moz-transition-duration: 5s;
-webkit-transition-duration: 5s;
-ms-transition-duration: 5s;
transition-timing-function: steps(10, start);
-moz-transition-timing-function: steps(10, start);
-webkit-transition-timing-function: steps(10, start);
-ms-transition-timing-function: steps(10, start);}
.step-up {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: rgba(0,0,255,0.5);}
.box:hover .step-up {
height: 100%;
transition-duration: 5s;
-moz-transition-duration: 5s;
-webkit-transition-duration: 5s;
-ms-transition-duration: 5s;
transition-timing-function: steps(10, end);
-moz-transition-timing-function: steps(10, end);
-webkit-transition-timing-function: steps(10, end);
-ms-transition-timing-function: steps(10, end);}
</style>
<div class="box">
<div class="step-right"></div>
<div class="step-up">
Hover Me.!
</div>
</div>
.box {
position: relative;
height: 320px;
background:#ccc;}
.step-right {
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 100%;
background-color: rgba(255,0,0,0.5);}
.box:hover .step-right {
width: 100%;
transition-duration: 5s;
-moz-transition-duration: 5s;
-webkit-transition-duration: 5s;
-ms-transition-duration: 5s;
transition-timing-function: steps(10, start);
-moz-transition-timing-function: steps(10, start);
-webkit-transition-timing-function: steps(10, start);
-ms-transition-timing-function: steps(10, start);}
.step-up {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 0;
background-color: rgba(0,0,255,0.5);}
.box:hover .step-up {
height: 100%;
transition-duration: 5s;
-moz-transition-duration: 5s;
-webkit-transition-duration: 5s;
-ms-transition-duration: 5s;
transition-timing-function: steps(10, end);
-moz-transition-timing-function: steps(10, end);
-webkit-transition-timing-function: steps(10, end);
-ms-transition-timing-function: steps(10, end);}
</style>
<div class="box">
<div class="step-right"></div>
<div class="step-up">
Hover Me.!
</div>
</div>
Apapun yang akan Anda jadikan sebagai target gerak, hal yang terpenting dalam pembuatan efek gerak animasi adalah dengan memperhatikan 2 hal berikut, yaitu: Objek dan alur gerak. Selebihnya terserah Anda.!! hehe..
Semoga Anda menemukan Inspirasi dari tutorial kali ini. Terimakasih
No comments:
Post a Comment