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
SIMPLE CATEGORY EFFECT
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.?
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
BACA JUGA
Menampilkan Bayangan Teks Saat HoverAnda 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.?
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul= 36 Contoh Text Animation
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 >>
efeknya bgus2 dan lembut .,...
BalasHapustpi sy mash lier juga buat praktekinnya ....hehehe ;-(
jangan lier mas, ntar susah lagi tidur, hehe..
Hapuskira-kira mas fiu suka bentuk efek yang mana neh.?
klo susah tidur kn ada devy ,,, hehe klo ada devy pasti bsa tdur ,,, :)
Hapusyg fancy sy suka yg shadow 2 ...
klo simple bnyk yg sy suka ,,, trutama yg shadow 1 juga ,,,hehe :)
lier itu apa ya?
HapusSoft banget efeknya yaa... Hahaha...
BalasHapusBener kata atas gue shadow 1 emang bagus bangt :))
Pengaruh gak sama loading blog???
BalasHapusMakasih banyk, salam blogwalking :)
BalasHapuswidih efeknya bagus banget, jadi mengingatkan presentasi saat menggunakan powerpoint.. :>) Tapi nda ada tutorialnya ya, cuma ada 4 efek doang :-?
BalasHapussaya suka sama efek bounce smuanya mba :-d
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.
Hapuspasti buatnya lama ya vy, sebab nyonteknyapun susah hihi.. semuanya bagus, tapi saya paling suka yang bounce down, kayak ular hehe
BalasHapuso iya ya mana kode kodenya ya..?
Hapustunggu tanggal maennya mb tika ,,,, :p
HapusDevy 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.
Hapuskalau 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.
Tepatnya tanggal terbitnya mas Fiu, ahh..mas fiu ini suka maen-maen teh, mentang-mentang koari malam jumat kah, hehe..!!
Hapusiya iya tunggu tanggal terbitnya ,,,
Hapuseh eh ,,, emg kenapa dngan malam jum'at sih ? haha apatuh koari ?
ya seperti kata teh santika, kalau malam jumat itu banyak godaannya, karena malam yang sakral kata mitos, koari sama dengan sekarang, (bahasa Sunda). hehe..!!
Hapusowalah koari tuh skrg tho ...hehe
Hapustrs godaan di malam jum'at buat devy apa coba ? hehe
lucu devy... kaya efek di power point, hehe
BalasHapusmungkin masih ada kaitannya sehingga ada kemiripan dgn power point....efek ini biasanya digunakan untuk mempercantik tampilan....
Hapusmantep tenan... boleh juga tuh beberapa code di bagi free mbak devy..!
BalasHapusmbak memang terer bab ini..boleh singgah lagi selepas ini..
BalasHapusbanyak mba, ada 36 yang dibagiin, semuanya menarik
BalasHapusmba devi ini selain cantik juga hebat ya bikin variasi di blog nya.hehe
BalasHapusterimakasih sahabat :)
BalasHapusizin pake ya Vy..!
BalasHapuskeren banget ya , lebih bervariasi dan bagus di terapkan kalo di blog
BalasHapusbagus juga untuk dicoba mbak,,, kayak presentasi di power poin :)
BalasHapuskalau cara scroll down di sidebar gimana ya? eh jangan - jangan udah pernah dibahas,,,, *brb* uplek - uplek blog..
BalasHapusmaaf dev baru bisa berkunjung....
BalasHapustadi 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.
innalilahiwainalilahirojiun..!! yang tabah ya mbah, semoga almarhuma ditempatkan disisi Allah SWT, dan keluarganya yang ditinggalkan diberikan kesabaran dan ketabahan.
Hapusamin..
innalilahiwainalilahirojiun ..
Hapus.Sabar ya mbah.. Tabahkan hati dan doakan selalu yang terbaik buat alarhumah.
.Terpesona kepada Pandangan Pertama. :d
BalasHapus.Efeknya keren-keren mbak hehe.
.Artikelnya menarik sekali. :))