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.
Terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77, saya akan berikan 4 Model Efek Animasi Pada Teks sebagai berikut:
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:
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:
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).
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.
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.
Terspesial buat sahabat semua pecinta SAHABAT BLOGGER 77, saya akan berikan 4 Model Efek Animasi Pada Teks sebagai berikut:
- Jumping Text Effect
- Trembling Text Effect
- Animation Tetx Fill Color
- 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>
.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:
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>
.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:
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">
— WELL COME TO MY BLOG —
<span>
SAHABAT BLOGGER 77
</span>
<div style="color:#333">
insert your desc text in here...
</div>
</div>
.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">
— WELL COME TO MY BLOG —
<span>
SAHABAT BLOGGER 77
</span>
<div style="color:#333">
insert your desc text in here...
</div>
</div>
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.
.jpg "Efek Rotasi Pada Gambar")
