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.

Attribute

Value

Description

inertia

0-1

periode rotasi. (1= rotasi tak terbatas)

angel

0-180

posisi rotate

step

1-180

jarak pergerakan antar rotasi

Speed

0-1

kecepatan rotasi

 

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.

13 Mei 2019

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Kursus Postgre SQL Database Developer Terbaik 2024 di Jakarta
chat