Cara Menggunakan Metode Tween pada Mootools
Sama dengan jQuery mootols pun mempunya beberapa sistem di dalamnya, sperti sistem set(). Sistem set ini berfungsi bagi memnambahkan styles atau event di sautu faktor yang telah kita bikin. Dimana faktor tersebut akan terpengaruh oleh style dan event yang telah kita berikan. Di panduan kali ini saya akan mencoba membahas mengenai Cara Menggunakan Metode Tween pada Mootools.
Sistem ini memberikan transisi halus antara dua nilai properti gaya. Mari kita ambil contoh yang menggunakan sistem tween bagi mengubah lebar div dari 100px ke 300px.
Nah, sekarang ini saya akan mencoba menjelaskan Cara Menggunakan Metode Tween pada Mootools, berikut langkah-langkahnya:
– Pertama-tama buka text editor teman-teman dan masukan kode html dan css di bawah ini:
<!DOCTYPE html>
<html>
<head>
<style><br /> /*memberikan css di id box*/<br /> #box {<br /> width: 100px;<br /> height: 200px;<br /> background-color: lightblue;<br /> border: 3px solid #eeeeee;<br /> }<br /> </style>
</head>
<body>
<div id = box> </div><br/>
<input type = button id = tombol_tween value = Tambah Lebar/>
</body>
</html>
Coba teman-teman jalankan di browser teman-teman karenanya tempilannya akan menjadi seperti gambar di bawah ini:
Kedua, teman-teman unduh file mootoolsnya di situs mootools, lalu simpan di pada folder yang sama dengan file htmlnya.
Ketiga, kita panggil file mootoolsnya dengan menggunakaan kode di bawah ini:
<script type = text/javascript src = MooTools-Core-1.6.0.js></script><br /><script type = text/javascript src = MooTools-More-1.6.0.js></script>
Keempat, masukan script di bawah ini bagi memberikan efek transisi dan penambahan width di id box, Berikut scriptnya:
<script type = text/javascript><br /> //variabel tweenFunction berfungsi bagi menampung kegunaan yang akan kita bikin<br /> var tweenFunction = function(){<br /> //merubah lebar box yang terdapat<br /> $('box').tween('width','400px')<br /> }<br /> //addEvent berfungsi bagi menjalankan proses apabila kita klik tombol tambah lebar<br /> window.addEvent('domready', function() {<br /> $('tombol_tween').addEvent('click', tweenFunction);<br /> });<br /></script>Setelah itu coba teman-teman refesh browser teman-teman, lalu teman-teman klik tombol Tambah Lebar karenanya otomatis box akan menambah lebarnya menjadi 400px. Seperti gambar di bawah ini:
Bagaimana teman-teman lumayan mudahkan menggunakan method tween di mootools.
Sekain panduan kali ini mengenai Cara Menggunakan Metode Tween pada Mootools. Selamat mencoba yah teman-teman semoga bermanfaat.
Sumber https://kursuswebsite.org
