Membuat Rotate Mouse Menggunakan Propeller.js

Membuat Rotate Mouse Menggunakan Propeller.js

Propoller.js adalah plugin jquery yang membantu untuk membuat suatu animasi rotate. Langkah pertama dalam membuat rotate yaitu teman-teman download filenya disini. Hal yang harus teman-teman ketahui sebelum menggunakan plugin propeller.js yaitu ada beberapa attribute yang disediakan untuk mengatur animasi dari rotate, dan berikut adalah listnya.

Jika sudah maka kita akan membuat struktur html untuk Membuat Rotate Mouse Menggunakan Propeller.js seperti di bawah ini.

<!DOCTYPE html>

<html>

<head>

    <title>Membuat Rotate Mouse Menggunakan Propeller.js</title>

</head>

<body style="overflow: hidden; background: salmon">

    <img id="satu" src="../example/img/turbine.png">

    <img id="dua" src="../example/img/turbine.png">

    <img id="tiga" src="../example/img/turbine.png">

    <img id="empat" src="../example/img/turbine.png">

</body>

</html>

Langkah selanjutnya teman-teman pastikan library jquerynya sudah ada dan file propeller.js yang sudah di download sudah terkoneksi dengan benar.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>

<script src="../src/propeller.js"></script>

Lalu buat fungsi propeller dengan attribute yang digunakan untuk mengatur rotatenya.

<script>

    $('#satu').propeller({

        inertia: 1,

        speed: 1

    });

    $('#dua').propeller({

        inertia: 1,

        speed: 1,

        step:45

    });

    $('#tiga').propeller({

        inertia: 1,

        speed: 0

    });

    $('#empat').propeller({

        inertia: 0,

        speed: 0

    });

</script>

Demikian artikel tentang Membuat Rotate Mouse Menggunakan Propeller.js. Smeoga dapat bermanfaat dan selamat mencoba.