Membuat Rotate Mouse Menggunakan Propeller.js

13/05/2019    Shelli Ripati    139     Website

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.

No data.

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More

Cara Cepat Pintar Membuat Website, Tanpa Perlu Basic IT

Membuat website perusahaan, portal berita, blog, katalog online, dan e-commerce.

Learn More