Inilah Beberapa Nama Efek Serta Cara Kerjanya

Inilah Beberapa Nama Efek Serta Cara Kerjanya - Beberapa diantara Anda mungkin sudah mengenal berbagai macam bentuk dan nama-nama efek serta cara kerjanya (Hasil Tampilan). Ini hanya merupakan panduan dalam mengenal jenis-jenis nama efek serta hasil apa yang dapat ditampilkan saat Anda melihat atau membuat objek gerak dengan sistem perintah animasi, transisi dan hover.


KONSEP PEMBENTUKAN EFEK

//bentuk objek
div {
  width:200px;
  height:100px;
  background:#39f;
  border-radius:4px;
  margin:0 auto;
  transition:all 0.5s ease-out;
}

//perintah efek
div:hover {
  transform:rotate(360deg);
}

//combination to animasi
@keyframes (NAME-YOUR-ANIMATION) {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

Saat Anda melihat sebuah objek yang bergerak berputar, maka apa yang Anda pikirkan?. Anda akan mengatakan bahwa nama efek ini adalah "ROTASI EFFECT", menggabungkan beberapa bentuk pengaturan dengan CSS yang dihubungkan langsung dalam satu wilayah kode untuk mendapatkan sistem kinerja efek seperti perintah HOVER, maka efek akan bekerja sesuai dengan sentuhan MOUSE seperti ini misalnya:

Untuk membuat sebuah objek bergerak, hal yang terpenting adalah menyusun konsep efeknya akan seperti apa. Beberapa Contoh Bentuk-Bentuk Konsep Animasi sudah saya bahas di artikel sebelumnya untuk mempermudah langkah Anda saat membuat sebuah objek gerak yang nantinya akan di beri efek sesuai dengan nama dan bagaimana cara kerjanya. Misalnya Anda ingin membuat efek seperti ini:

1. Membuat Animasi Teks Berputar Efek 3D
2. Mengontrol Efek Gerak Dengan Perintah Hover
3. Galeri Gambar Efek Slider Desain Terbaru
4. Membuat Menu Daftar Isi Blog Efek Transisi

Terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77, tutorial kali ini saya akan memperkenalkan beberapa jenis bentuk efek serta bagaimana cara kerjanya.

LIHAT DISINI