Cara Membuat typing text animation dengan typer JS
Monday 22 January 2018
Edit
Oke pada kesempatan kali ini saya akan memberikan tutorial singkat membuat typing text dengan typer.js untuk mempercantik tampilan website, langkah yang diperlukan sangat mudah hanya tinggal mendownload plugin typer.js.
Langsung saja, silahkan anda download plugin typer.js di halaman website resminya di https://steven.codes/typerjs/
Setelah di download silahkan buat folder dengan nama example kemudian simpan typer.js kedalam folder tersebut.
langkah selanjutnya adalah membuat sebuah file html, silahkan copas kode di bawah ini kemudian simpan dengan nama index.html kedalam folder latihan yang sudah di buat.
kemudian jalankan file tersebut di browser maka anda akan mendapatkan tampilan seperti dibawah ini
penjelasan singkat, kode dibawah ini merupakan pemanggilan class dan id dari typer.js :
data-words => Data kata yang akan dijadikan typer text
data-colors => Merubah warna text typer
data-delay => Kecepatan typer text
data-deleteDelay => Kecepatan menghapus typer text
pemanggilan plugin typer.js :
Bagaimana.? mudah bukan.? pastinya ya, semoga tutorial singkat ini bisa berguna dan bermanfaat bagi saya dan anda semuanya, silahkan dicoba dan dipraktekan.
Langsung saja, silahkan anda download plugin typer.js di halaman website resminya di https://steven.codes/typerjs/
Setelah di download silahkan buat folder dengan nama example kemudian simpan typer.js kedalam folder tersebut.
langkah selanjutnya adalah membuat sebuah file html, silahkan copas kode di bawah ini kemudian simpan dengan nama index.html kedalam folder latihan yang sudah di buat.
<html> <head> <title>Typer JS Example | www.hakkoblogs.com</title> </head> <body bgcolor="black"> <center> <h1 style="color: green; margin-top: 200px;">www.hakkoblogs.com is <span class="typer" id="main" data-words="great,the best, knowledge, best web tutorial" data-colors="green" data-delay="100" data-deleteDelay="1000"></span> <span class="cursor" data-owner="main"></span> </h1> </center> <center><p style="color: green;">Contoh Typer.Js | www.hakkoblogs.com</p></center> <script src="typer.js"></script> </body> </html>
kemudian jalankan file tersebut di browser maka anda akan mendapatkan tampilan seperti dibawah ini
penjelasan singkat, kode dibawah ini merupakan pemanggilan class dan id dari typer.js :
<h1 style="color: green; margin-top: 200px;">www.hakkoblogs.com is <span class="typer" id="main" data-words="great,the best, knowledge, best web tutorial" data-colors="green" data-delay="100" data-deleteDelay="1000"></span> <span class="cursor" data-owner="main"></span> </h1>
data-words => Data kata yang akan dijadikan typer text
data-colors => Merubah warna text typer
data-delay => Kecepatan typer text
data-deleteDelay => Kecepatan menghapus typer text
pemanggilan plugin typer.js :
<script src="typer.js"></script>
Bagaimana.? mudah bukan.? pastinya ya, semoga tutorial singkat ini bisa berguna dan bermanfaat bagi saya dan anda semuanya, silahkan dicoba dan dipraktekan.
Happy Coding & Programming