28.10.14
26
4 Model Efek Animasi Pada Teks - Ini adalah beberapa contoh bagaimana cara membuat teks bergerak dengan Melompat (Jumping Effect), Bergetar (Trembling Effect), Memberi Pewarnaan (Fill Color Effect) dan Berkedip (Blink Color) hanya dengan penggunaan CSS efek-animasi.

Untuk Contoh Bentuk-Bentuk Konsep Animasi sudah saya perjelas pada artikel sebelumnya. Anda bisa pelajari sebagai tahap awal untuk mempermudah pekerjaan Anda dalam mengkombinasikan model efeknya dengan kreatifitas Anda sendiri, seperti Membuat Efek Slide Teks Pada Gambar misalnya.


Animated Effect Text Picture



Terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77, saya akan berikan 4 Model Efek Animasi Pada Teks sebagai berikut:
  1. Jumping Text Effect
  2. Trembling Text Effect
  3. Animation Tetx Fill Color
  4. Blink



1. Jumping Text Effect (Efek Teks Melompat)
Properti yang digunakan dalam membuat efek ini adalah elemen animation-bounce, sedangkan untuk fungsi gerakan efek dengan perintah delay (penundaan). Teks pertama akan bergerak terlebih dahulu yang di ikuti oleh teks berikutnya dengan nilai-nilai penundaan yang sudah ditentukan dengan konsep penyusunan kode seperti ini:

<style type='text/css'>
.text {
  width: 100%;
  height: 100px;
  margin: auto;
  display: block;
  text-align: center;}

//sama dengan span:nth-child(1)
.text span {
  position: relative;
  top: 20px;
  display: inline-block;
  animation: bounce .3s ease infinite alternate;
  font-family: 'Titan One', cursive;
  font-size: 61px;
  color: blue;}

.text span:nth-child(2) {animation-delay: .1s;}
.text span:nth-child(3) {animation-delay: .2s;}
.text span:nth-child(4) {animation-delay: .3s;}
.text span:nth-child(5) {animation-delay: .4s;}

@keyframes bounce {
  100% {top:-20px;
    text-shadow:0 1px 0 #CCC,0 50px 25px rgba(0,0,0,.2);}}
</style>
<div class="text">
  <span>TEXT</span
</div>

Ibarat Anda merentangkan sebuah selendang yang panjang, lalu selendang tersebut Anda kebaskan, maka akan tercipta gelombang gerak dari pangkal sampai ujung selendang seperti ini:



GET IN CODE




2. Trembling Text Effect (Efek Teks Bergetar)
Gerakan teks dengan efek bergetar yang dihasilkan dengan penggunaan animation-name:tremble. Sebenarnya efek ini dapat bergerak Bergetar (Trembling) karena sudah didesain sedemikian dengan nilai kemiringan per 1 deg pada setiap jarak per 10% sampai 100% maksimal, sehingga gerakan akan terkesan memantul dari kiri-kanan, atas-bawah dengan durasi kecepatan 0.8s pada efek animasi. Susunan kodenya seperti ini:

<style type='text/css'>
.text {
  font-weight:900;
  font-size:55px;
  margin:0 auto;
  font-weight:light;
  line-height:74px;
  color:blue;
  text-align:center;
  animation-duration: 0.8s;
  transform-origin:50% 50%;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  animation-name: tremble;}

@keyframes tremble {
 0% {transform: translate(2px, 1px) rotate(0deg);}
 10% {transform: translate(-1px, -2px) rotate(-1deg);}
 20% {transform: translate(-3px, 0px) rotate(1deg);}
 30% {transform: translate(0px, 2px) rotate(0deg);}
 40% {transform: translate(5px, -1px) rotate(1deg);}
 50% {transform: translate(-1px, 2px) rotate(-1deg);}
 60% {transform: translate(-2px, 1px) rotate(0deg);}
 70% {transform: translate(6px, 2px) rotate(-1deg);}
 80% {transform: translate(-1px, -3px) rotate(1deg);}
 90% {transform: translate(2px, 1px) rotate(0deg);}
 100% {transform: translate(5px, -2px) rotate(-1deg);}}
</style>
<div class="text">
SAHABAT BLOGGER 77</div>


Bukan hanya Anda saja yang bisa mengalami sakit demam, efek pada teks berikut juga bisa merasakan hal yang sama. Menggigil, Gemetaran, Pusing hingga menampilkan bayangan (pandangan berkunang-kunang) seperti ini:



GET IN CODE




3. Animated Text Fill Color (Mengisi Warna Teks)
Posisi objek diam, namun WARNA yang akan kita jadikan target gerak dengan efek berjalan. Default teks dengan warna MERAH, sedangkan untuk warna target efek dengan warna transparan, sehingga efek teks akan berganti warna menjadi putih/transparant saat effect-color melintas (Mengisi Warna).

<style type='text/css'>
.text {
  text-transform: uppercase;
  letter-spacing: .5em;
  display: inline-block;
  border-top: 4px double darkred;
  border-bottom: 4px double darkred;
  padding: 1em 0em;
  position: absolute;
  text-align:center;
  margin: -2em auto;
  color:blue;}

.text span {
  font: 700 55px/1 "Oswald", sans-serif;
  letter-spacing: 0;
  padding: .25em 0 .325em;
  display: block;
  text-align:center;
  text-shadow: 0 0 80px rgba(255, 255, 255, 0.5);
  background: url(http://URL-gambar.png) repeat-y;
  obackground-clip: text;
  otext-fill-color: transparent;
  oanimation: aitf 80s linear infinite;
  otransform: translate3d(0, 0, 0);
  obackface-visibility: hidden;}

@keyframes aitf {
  0% {background-position: 0% 50%;}
  100% {background-position: 100% 50%;}}
</style>
<div class="text">
&mdash; WELL COME TO MY BLOG &mdash;
   <span>
       SAHABAT BLOGGER 77
   </span>
     <div style="color:#333">
        insert your desc text in here...
     </div>
</div>



GET IN CODE




4. Animasi Blink
Menciptakan Efek Pelangi Pada Text adalah konsep dasar dalam pembuatan efek terakhir kali ini. Sebenarnya hampir sama dengan animasi text fill, hanya saja untuk fungsi perintah pada animasi blink kali ini saya membuat banyangan pada teks (text-shadow) sebagai objek gerak yang selalu tampil bergantian, sedangakan untuk durasi tampil, saya memisahkan ke-2 warna bayangan tersebut dengan efek clip pada jarak per 5% dengan jarak nilai tertentu pada sisi top, right dan bottom, sedangkan sisi left dengan nilai auto.
Hasilnya - Cara Membuat Teks Berkedip Dengan Animasi Blink.


Nama dan bentuk efek animasi ini banyak ragamnya, ini hanya beberapa model saja untuk mempercantik teks judul blog Anda pada kolom header, jika suatu saat nanti Anda ingin mencoba membuat efek animasi pada teks dengan model yang berbeda, Anda bisa pelajari konsepnya disini. Baca Inilah Beberapa Nama Efek Serta Cara Kerjanya.

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul= 4 Model Efek Animasi Pada Teks
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 =

26 komentar

  1. page monitor aku penuh dengan pilihan demo shownya, banyak pilihannya lagih.. bagus bagus kabita doank, nerapinya ke blog aku kapan ya..

    BalasHapus
    Balasan
    1. bulan depan juga gpp kok ,,,, :)

      Hapus
    2. Mendingan saya coba saja sekarang biar gak penasaran sama Mbak Devy :)
      Maksudnya sama artikelnya Mbak Devy hhhh *senyum

      Hapus
    3. gak sekarang, gak besok, gak lusa, hmm...kapan-kapan juga boleh teh.

      Hapus
  2. hadeh...dipamerin lagi model css yg keren2 nih sama mbak devy.
    cuman membuka demo tulisan yg seperti selendang itu saya saya udah kepincut mbak

    sumpah keren banget

    BalasHapus
    Balasan
    1. mas yanto kepincut pake selendang, cocok banget

      Hapus
    2. Meski sy kurang demen animasi tapi trims udah berbagi...

      Salam dari Pulau Dollar

      Hapus
    3. kiraen teh mas yanto dah kepincuk ,,, eh ternyata ,,,, hahaha :p

      Hapus
    4. kirain kang yanto kepincut sama adminnya yang cantik
      :p 8-) (c)

      Hapus
    5. biarin sajalah mas yanto pakai selendang, kan mau daftar menjadi miss univers. hehe..

      kalau kepincut,langsung diangkut saja kang semuanya,

      Hapus
  3. ehm ,,, ini susah dibilng dengan kata2 lagi, soalnya mueni kreatif pisan euy devy teh ,,, :D

    sy aja klo disurung buat begtu hadoooohhh ,,, [-( hehehe

    BalasHapus
    Balasan
    1. mencoba memberikan apa yang belum ada kok mas Fiu, kalau yang sudah banyak kan menjadi bosan ntar mas fiu sam tutorial yang seperti ini saja.

      Hapus
    2. hehe, bener klo yg dh ada ntr malah gak asik ,,, jempol 10 deh buat devy ,,, (f)

      Hapus
  4. Urusan trik blogging Effects blogging, pokoknya segala Tek tek bengek blogging Mbak Devy jagonya deh... saya salut deh saya angak 4 Jempol deh (f)

    BalasHapus
    Balasan
    1. hehe...terimakasih mas untuk pujiannya, cukup 1 jempol aja mas, kalau 4 jempol yang diangkat, berarti mas saut bisa jatuh ntar..

      Hapus
    2. hahahahaha, jempolnya mas suad mah biar stu juga dh beraaaaaat banget ,,,, :)

      Hapus
  5. wahhh ternyata hanya bermain di keyframes aja ne.. dan tidak terlalu rumit mbak... saya suka dengan Trembling Text Effect mbak.. keren keren... (h)

    BalasHapus
  6. Jadi lebih keren ya mbak

    BalasHapus
  7. Bener-bener keren nich... jadi ngiler lihat demonya. Izin saya pelajari Mbak :)

    BalasHapus
  8. hadech,,_
    jadi ketahuan dch kalau jari kang saud jempol semua
    :p
    soalnya, jari-jarinya kang saud gede-gede semua samaan ama jempolnya
    8-) (c)

    BalasHapus
  9. mampir lagi nih mba,, ditunggu artikel berikutnya

    BalasHapus
  10. Wah bisa cantik nih tulisannya dgn huruf animasi.. *blink..blink*

    BalasHapus
  11. TEH DEVY LINK NYA SUDAH SAYA PASANG DI BLOG SAYA,,MOHON DICEK,KIBARKAN JUGA LINK SAYA YAHH . . . :) maaf komennya disini soalnya udah penuhh,,hehe

    BalasHapus
  12. ini kan yang diterapkan pada 36 contoh efek animasi? saya izin belajar ya. makasih

    BalasHapus
    Balasan
    1. beberapa diantaranya iya mbah, namun saya lebih menghilangkan button-script, dan menggantinya dengan media CSS @keyframes agar efek teks dapat bekerja secara terus-menerus. Infinite (efek tidak terbatas) kurang lebih seperti itu mbah.

      Hapus

  • 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