18.10.14
19
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:



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

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 >>
= TERIMA KASIH =

19 komentar

  1. waduh...yg membuat daftar isi kemarin belum sempat nyoba mbak,saya save dulu aja yah

    BalasHapus
    Balasan
    1. hehe...dengan senang hati mas, kalau artikel ini di save, nanti gimana dengan sahabat yang lain, bisa gak kebagian lagi, hehe..

      Hapus
    2. nda apa2 kalau Mas Yan..ambil semuanya, asalkan tuan rumah jangan di bawa pulang..! ;( :>)

      Salam ILUDI

      Hapus
    3. ngomong-ngomong ILUDI itu apaan sih mas al.?

      Hapus
    4. mas 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...

      Hapus
    5. Mas Haji..!, gak mau coba kue cucur atau es cendol..Mas..!, kasian sy Mas..Haji..sdh keliling lewati gang2..tp nda ada yg beli..!

      Mba Devi : Ke inbox

      Hapus
    6. mas haji Muhammad, daftar isi yang mana ya.?
      yang di halaman Beranda atau yang pada menu navigasi

      Hapus
  2. weh lumayan dapat pertamax lagi

    BalasHapus
    Balasan
    1. kalau premium kan selalu ngantri, beda dengan pertamax, mungkin karena mahal kali ya, hehe..
      jadi komentar pertama akan diberi diskon 70%..

      Hapus
  3. efeknya bisa dibuat 15 postingan..!, lumayan buat pengagum sahabat blogger77


    Salam ILUDI..!

    BalasHapus
  4. saya 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

    BalasHapus
    Balasan
    1. ooo..pantes td ke rumah Mas haji..Mas hajinya gak ada,. rupanya ada di sini..

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

      Hapus
    2. 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,

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

      Hapus
  5. software bantu buat bikin apa sih mba namanya, atau coding tangan sendiri, manual.

    BalasHapus
    Balasan
    1. kurang paham mas, maksudnya software apa yang mas tanyakan.?

      Hapus
  6. ada tips lagi, yang kemaren aja belom di praktekin :-)

    BalasHapus
    Balasan
    1. kalau sih nggak saya praktekin semuanya mas, bisa musmet dong kepalanya :d

      Hapus
  7. wah, bagus, mantap dicoba nih :)

    BalasHapus

  • Design
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JQuery
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • CSS
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • HTML
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK
  • JavaScript
    X
    Teks menu masih dalam tahap perbaikan, Untuk sementara Anda akan dialihkan ke link HOME. Terimakasih.!

    KLIK