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
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:
.jpg "Efek Rotasi Pada Gambar")
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:
Terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77, tutorial kali ini saya akan memperkenalkan beberapa jenis bentuk efek serta bagaimana cara kerjanya.
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);
}
}
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:
- Membuat Animasi Teks Berputar Efek 3D
- Mengontrol Efek Gerak Dengan Perintah Hover
- Galeri Gambar Efek Slider Desain Terbaru
- 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.
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= Inilah Beberapa Nama Efek Serta Cara Kerjanya
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 >>
waduh...yg membuat daftar isi kemarin belum sempat nyoba mbak,saya save dulu aja yah
BalasHapushehe...dengan senang hati mas, kalau artikel ini di save, nanti gimana dengan sahabat yang lain, bisa gak kebagian lagi, hehe..
Hapusnda apa2 kalau Mas Yan..ambil semuanya, asalkan tuan rumah jangan di bawa pulang..! ;( :>)
HapusSalam ILUDI
ngomong-ngomong ILUDI itu apaan sih mas al.?
Hapusmas yanto: memang bagus daftar isi yang dipostingkan mbak devy kemarin, tapi saya lagi ngebet nungguin mbak devy mosting cara mbuat daftar isi yang digunakan di sahabatblogger77 ini...lebih mantabb...salam kopi hangat mas dan semuanya saja...
HapusMas Haji..!, gak mau coba kue cucur atau es cendol..Mas..!, kasian sy Mas..Haji..sdh keliling lewati gang2..tp nda ada yg beli..!
HapusMba Devi : Ke inbox
mas haji Muhammad, daftar isi yang mana ya.?
Hapusyang di halaman Beranda atau yang pada menu navigasi
weh lumayan dapat pertamax lagi
BalasHapuskalau premium kan selalu ngantri, beda dengan pertamax, mungkin karena mahal kali ya, hehe..
Hapusjadi komentar pertama akan diberi diskon 70%..
efeknya bisa dibuat 15 postingan..!, lumayan buat pengagum sahabat blogger77
BalasHapusSalam ILUDI..!
(o)
Hapussaya ngedit2 ginian kok belum bisa2 ya...tapi saya tidak akan menyerah...eh mbak, tolong dong itu cara mbuatnya gimana, diperinci lagi ya..bagus kayaknya kalau diterapkan di blog saya ...hehe...salam kopi di pagi hari
BalasHapusooo..pantes td ke rumah Mas haji..Mas hajinya gak ada,. rupanya ada di sini..
Hapusrencanaya jg tadi mau ajak si Mas Fiu jalan2 pagi ke t4 Mas haji..tp berhubung Mas Fiunya lg nyuci di rumah...hihihi..iler dibantal blom ilang2,.padahal sdh pake 2 bungkus detergen..!, smoga mas fiu nda ke sini bisa2..mampus sy...ja..ja..ja..ja..!
Mas Haji Muhammad ini hanya merpakan panduan buat sahabat semua dalam mengenal nama-nama efek serta apa yang dapat dihasilkan jika kita membuat salah satu dari 15 efek yang saya tampilkan dalam tutorial ini mas haji,
Hapus[blockquote]misal efek BLIND akan menghasilkan gerakan seperti apa
Efek Explode akan menghasilkan gerakan seperti apa,
ini hanya merupakan contoh saja mas, jadi kodenya tidak devy jabarkan.[/blockquote]
software bantu buat bikin apa sih mba namanya, atau coding tangan sendiri, manual.
BalasHapuskurang paham mas, maksudnya software apa yang mas tanyakan.?
Hapusada tips lagi, yang kemaren aja belom di praktekin :-)
BalasHapuskalau sih nggak saya praktekin semuanya mas, bisa musmet dong kepalanya :d
Hapuswah, bagus, mantap dicoba nih :)
BalasHapus