Mengontrol Efek Gerak Dengan Perintah Hover

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:

• 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>

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.

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

DEMO SHOW




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>

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.

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

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

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

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

Semoga Anda menemukan Inspirasi dari tutorial kali ini. Terimakasih

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= Mengontrol Efek Gerak Dengan Perintah Hover
Ditulis oleh= Devy
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip (meng-Copy), baik itu sebagian atau keseluruhan isi dari artikel ini harap menyertakan link dofollow ke >>

http://sahabatblogger77.blogspot.com/2014/09/mengontrol-efek-gerak-dengan-perintah-hover.html

= TERIMA KASIH =

Devy Indriyani

Join To Sahabat Blogger 77