Untuk yang satu ini saya membahas dengan CSS jadi ngak perlu tambahan javascript sama sekali melainkan animation CSS dengan mengunakan animation maka dapat melakukan manipulasi dengan sesuai keinginan sobat tentu saja hal ini akan sulit bagi sobat yang masih awam dalam css tapi tidak perlu kawatir karena saya akan menjelaskan nya.
Cara Membuat Efek Text Mengetik
Hal pertama yang harus sobat lakukan adalah membuat HTML atau kode pemanggilnya dulu karena bila css dulu apa yang ingin di panggil? tentu saja hal ini dapat membuat bingung bila tidak sesuai dengan prosedur.
<div class="animasi">Hallo, Sobat Alpukoding...</div>
Kemudian tambahkan kode css untuk membuat animasi efek mengetik seperti berikut:
.animasi {
font-size:30px;
width:100%;
white-space:nowrap;
overflow:hidden;
-webkit-animation:typing 5s infinite steps(70, end);
animation:animasi 5s infinite steps(70, end);
}
@keyframes animasi {
from {width:0;}
}
@-webkit-keyframes animasi {
from {width:0;}
}
Kenapa nama animation nya animasi? karena disini kita memanggil kode dari class pada html jadi jika kode class pada html beda maka sobat harus merubahnya menjadi sama.
Comments