Mengontrol Efek Gerak Dengan Perintah Hover

Info informasi Mengontrol Efek Gerak Dengan Perintah Hover atau artikel tentang Mengontrol Efek Gerak Dengan Perintah Hover ini semoga dapat bermanfaat, dan menambah wawasan. Selamat Membaca! Jangan lupa dishare juga! Jika merasa artikel ini bermanfaat juga untuk orang lain.

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

Demikian artikel tentang Mengontrol Efek Gerak Dengan Perintah Hover ini dapat kami sampaikan, semoga artikel atau info tentang Mengontrol Efek Gerak Dengan Perintah Hover ini, dapat bermanfaat. Jangan lupa dibagikan juga ya! Terima kasih banyak atas kunjungan nya.

Bersponsor
👉 Penerbit Content Placement Indonesia
👉 Artikel Kami Terbitkan Harga Terjangkau
👉 Jasa Content Placement
👉 Pasang Backlink Blogroll Premium
👉 Content Placement 50 Jaringan Backlink
👉 Jadi Agen Hanya 100 Ribu Selamanya
👉 Laptop Gaming Terbaik