Dalam kesempatan kali ini teknologi[dot]visitklaten[dot]com akan berbagi cara membuat efek pengetikan atau typing effect yang seperti mesin ketik dengan CSS.
Tanpa plugin dengan bermodalkan CSS yang cukup sederhana dan simple maka rekan-rekan bisa membuat efek pengetikan seperti mesin ketik di wordpress.
Efek pengetikan ini yakni sebuah tulisan/paragraph akan muncul secara perlahan huruf demi huruf dengan kecepatan sesuai settingan yang dibuat.
CSS adalah singkatan dari Cascading Style Sheets yang terdapat 3 versi yaitu CSS1, CSS2, dan CSS3. CSS adalah suatu aturan untuk mengatur beberapa komponen di dalam sebuah web sehingga membuat lebih terstruktur dan seragam.
CSS3 merupakan versi CSS terbaru yang bisa melakukan banyak hal terkait desain website. CSS3 mampu membuat animasi warna sampai animasi 3D di halaman website.
CSS sangat membantu untuk mempercantik tampilan website seperti dengan memberi warna, box shadow, padding, margin, align, posisi, dan efek pengetikan atau typing effect .
Membuat Efek Pengetikan
Untuk membuat typing effect menggunakan HTML dan CSS cukup mudah dan simple untuk membuatnya. Silakan lihat contoh dibawah ini nanti tinggal diganti tulisannya. yuk cap cuz
<div class="typewriter">
<div class="h3">VisitKlaten[dot]Com</div>
</div>
<style>
.typewriter .h3 {
overflow: hidden; /* Ensures the content is not revealed until the animation */
border-right: .15em solid orange; /* The typwriter cursor */
white-space: nowrap; /* Keeps the content on a single line */
margin: 0 auto; /* Gives that scrolling effect as the typing happens */
letter-spacing: .15em; /* Adjust as needed */
animation:
typing 3.5s steps(40, end),
blink-caret .75s step-end infinite;
}
/* The typing effect */
@keyframes typing {
from { width: 0 }
to { width: 100% }
}
/* The typewriter cursor effect */
@keyframes blink-caret {
from, to { border-color: transparent }
50% { border-color: orange; }
}
</style>
Nanti hasilnya kurang lebih akan seperti dibawah ini.
Terima kasih telah mengunjungi website kami.
Share jika bermanfaat, jika ada kritik, tambahan, pertanyaan atau saran silakan hubungi kami atau silakan isi di kolom komentar.
Komentar