Membuat Text Menarik Dengan Plugin Funtext jQuery

Haii semuanya, apa kabar..??

Selamat datang kembali di website tips dan trik Dumet School, yang akan selalu memberikan tips dan trik seputar dunia website. Nah pada kesempatan kali ini kita akan belajar tentang Membuat Text Menarik Dengan Plugin Funtext jQuery. Dimana hasil dari plugin funtext ini akan memberikan efek yang sangat menarik, untuk lebih jelasnya teman – teman bisa lihat pada gambar di bawah ini

Jika cursor di arahkan kemana saja, text akan muncul efek bayangan warna – warni

Cocok sekali untuk tampilan website sekolah TK,SD, karena anak – anak kecil kebanyakan suka dengan warna – warni bahkan sebagian kecil orang dewasa sangat suka dengan banyaknya warna. Ini masuk dalam kategory UX (User experience) yaitu berkenaan dengan pengalaman di sisi pengguna saat berinteraksi dengan interface (antar muka). Oke langsung saja kita akan praktekkan Membuat Text Menarik Dengan Plugin Funtext jQuery, klik link ini untuk download plugin yang sudah saya sediakan. Kemudian extract dalam satu folder, lalu siapkan text editornya dan copy script html nya di bawah ini

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery funText</title>
</head>
<body>
<h1 class="demo">Saya belajar di Dumet School</h1>
</body>
</html>

Selanjutnya tambahkan css nya

<style type="text/css">
body {
 background-color:#333;
}
.demo {
 color: red;
 text-align: center;
 font-size: 40px;
}
</style>

Jika sudah save dengan nama index.html, langkah berikutnya kita panggil plugin nya

<link href="jquerysctipttop.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.funtext.min.js"></script>

Kemudian kita tinggal panggil tag h1 nya dan tambahkan funtext nya

<script>
 $('h1').funText(50, 'reverseCandy');
</script>

Jika sudah save dan jalankan pada browsernya, maka ketika cursor di arahkan kemana saja efek akan mengikuti sesuai arah cursornya. Jika ingin efek nya besar atau kecil teman – teman tinggal atur saja sesuai keinginan teman – teman, latihan kali ini saya berikan 50 saja $(‘h1’).funText(50, ‘reverseCandy’) mungkin bisa ditambahkan agar efeknya semakin terlihat warna – warninya.

Baik, sekian pada tips kali ini tentang Membuat Text Menarik Dengan Plugin Funtext jQuery kita berjumpa kembali pada artikel yang akan datang. Semoga bermanfaat, terimakasih dan sampai jumpa.

Membuat Text Menarik Dengan Plugin Funtext jQuery

Kategori