36 Contoh Text Animation - Ini hanyalah sebuah panduan buat sahabat semua pecinta SAHABAT BLOGGER 77 untuk mengenal dan mengetahui bagaimana bentuk dan cara kerja efek animation sesuai dengan nama-nama gerakan pada text. Contoh seperti Jumping Text Effect, Trembling Text Effect, Animation Tetx Fill Color dan Blink yang sudah saya rangkum dalam sebuah tutorial tentang 4 Model Efek Animasi Pada Teks yang dapat Anda coba gunakan jika ingin membuat efek gerak (animation) di blog Anda dengan berbagai style.

Kali ini saya akan menambahkan lagi dengan memberikan 36 contoh nama dan bentuk efek gerak pada teks dengan CSS-animation. Dari 36 contoh nama efek berikut, saya bagi lagi dengan 2 kelas kategori FANCY (Indah) dan SIMPLE (Sederhana) seperti ini:

FANCY CATEGORY EFFECT
  • Shadow Level-2
  • Slide Around Level-3
  • Zoom Big And Zoom Small
  • Jitter
  • Bounce (Up Down, All, Left Right)
  • Roll (Left And Right)
  • Rainbow


SIMPLE CATEGORY EFFECT
  • Plain
  • Fade In Fast And Fade In Slow
  • Slide (Down, Top, Right and Left)
  • Font Size (Down and Top)
  • Rotate
  • 3D
  • Scale
  • Skew
  • Color (Slow, Fast and Subtle)
  • Background



Text Animation Style




BACA JUGA
Menampilkan Bayangan Teks Saat Hover


Anda cukup pilih dan KLIK nama efek pada tab sebelah KIRI, maka teks yang berada disebelah KANAN akan bergerak sesuai nama efek yang sudah Anda tentukan, dengan begitu bagaimana bentuk gerakan efek Rotate, Jitter, Bounce bisa Anda kenal. Bagaimana mau mencoba.?




LIHAT EFEK

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 36 Contoh Text Animation
Ditulis oleh= Devy Indriyani
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 =

32 komentar

  1. efeknya bgus2 dan lembut .,...
    tpi sy mash lier juga buat praktekinnya ....hehehe ;-(

    BalasHapus
    Balasan
    1. jangan lier mas, ntar susah lagi tidur, hehe..

      kira-kira mas fiu suka bentuk efek yang mana neh.?

      Hapus
    2. klo susah tidur kn ada devy ,,, hehe klo ada devy pasti bsa tdur ,,, :)

      yg fancy sy suka yg shadow 2 ...

      klo simple bnyk yg sy suka ,,, trutama yg shadow 1 juga ,,,hehe :)

      Hapus
  2. Soft banget efeknya yaa... Hahaha...
    Bener kata atas gue shadow 1 emang bagus bangt :))

    BalasHapus
  3. Pengaruh gak sama loading blog???

    BalasHapus
  4. Makasih banyk, salam blogwalking :)

    BalasHapus
  5. widih efeknya bagus banget, jadi mengingatkan presentasi saat menggunakan powerpoint.. :>) Tapi nda ada tutorialnya ya, cuma ada 4 efek doang :-?
    saya suka sama efek bounce smuanya mba :-d

    BalasHapus
    Balasan
    1. tutorial cara membuatnya memang tidak Devy jabarkan dalam artikel ini mas, karena efek yang devy buat terlalu banyak, jika dihitung ada sekitar 54 efek teks dengan CSS Animation, tetapi diantaranya sudah pernah devy buat, jadi kelak nama dan bentuk efek diatas akan devy buat sebagai tampilan untuk menemani efek gambar dalam artikel selanjutnya.

      Hapus
  6. pasti buatnya lama ya vy, sebab nyonteknyapun susah hihi.. semuanya bagus, tapi saya paling suka yang bounce down, kayak ular hehe

    BalasHapus
    Balasan
    1. o iya ya mana kode kodenya ya..?

      Hapus
    2. tunggu tanggal maennya mb tika ,,,, :p

      Hapus
    3. Devy membuat dan mengumpulkan efek dengan berbagai bentuk ini pada tanggal 18 Februari, dan baru saya rilis tanggal 26, hmm..cukup lama dan memakan waktu 1 minggu lebih,hehe..!! karena ya memang harus memberikan yang terbaik buat sahabat semua yang suka mampir kesini.

      kalau tentang kode cara membuatnya, memang tidak devy jabarkan dalam tutorial kali ini, karena hanya sebagai tahap perkenalan saja, rencananya beberapa efek diatas akan saya hubungkan untuk membuat tampilan efek gambar.

      Hapus
    4. Tepatnya tanggal terbitnya mas Fiu, ahh..mas fiu ini suka maen-maen teh, mentang-mentang koari malam jumat kah, hehe..!!

      Hapus
    5. iya iya tunggu tanggal terbitnya ,,,
      eh eh ,,, emg kenapa dngan malam jum'at sih ? haha apatuh koari ?

      Hapus
    6. ya seperti kata teh santika, kalau malam jumat itu banyak godaannya, karena malam yang sakral kata mitos, koari sama dengan sekarang, (bahasa Sunda). hehe..!!

      Hapus
    7. owalah koari tuh skrg tho ...hehe
      trs godaan di malam jum'at buat devy apa coba ? hehe

      Hapus
  7. lucu devy... kaya efek di power point, hehe

    BalasHapus
    Balasan
    1. mungkin masih ada kaitannya sehingga ada kemiripan dgn power point....efek ini biasanya digunakan untuk mempercantik tampilan....

      Hapus
  8. mantep tenan... boleh juga tuh beberapa code di bagi free mbak devy..!

    BalasHapus
  9. mbak memang terer bab ini..boleh singgah lagi selepas ini..

    BalasHapus
  10. banyak mba, ada 36 yang dibagiin, semuanya menarik

    BalasHapus
  11. mba devi ini selain cantik juga hebat ya bikin variasi di blog nya.hehe

    BalasHapus
  12. keren banget ya , lebih bervariasi dan bagus di terapkan kalo di blog

    BalasHapus
  13. bagus juga untuk dicoba mbak,,, kayak presentasi di power poin :)

    BalasHapus
  14. kalau cara scroll down di sidebar gimana ya? eh jangan - jangan udah pernah dibahas,,,, *brb* uplek - uplek blog..

    BalasHapus
  15. maaf dev baru bisa berkunjung....
    tadi sempat lihat aplikasi teks animasinya tarlihat atraktif sekali. penerapan efek transformasi untuk menciptakan teks animasi ternyata bisa banyak penerapannya dan banyak model yang dapat kita buat ya dev...ternyata bisa improve dari 4 model efek animasi pada teks ya dev. ok saya numpang pelajari ya dev.

    oh ya maaf baru bisa berkunjung...
    saya mengurus jenazah ibu yang telah berpulang kerahmatullah pada tanggal 24 kemarin. saya mohon doanya ya sista semoga beliau mendapat tempat terbaik di sisi Allah SWT, amin.

    BalasHapus
    Balasan
    1. innalilahiwainalilahirojiun..!! yang tabah ya mbah, semoga almarhuma ditempatkan disisi Allah SWT, dan keluarganya yang ditinggalkan diberikan kesabaran dan ketabahan.
      amin..

      Hapus
    2. innalilahiwainalilahirojiun ..
      .Sabar ya mbah.. Tabahkan hati dan doakan selalu yang terbaik buat alarhumah.

      Hapus
  16. .Terpesona kepada Pandangan Pertama. :d
    .Efeknya keren-keren mbak hehe.
    .Artikelnya menarik sekali. :))

    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