Cara Memasang Plugin ZooMove pada Web

ZooMove merupakan sebuah plugin yang bisa kita gunakan sebagai tambahan efek pada sebuah gambar, dimana ZooMove ini memberikan efek Zoom pada gambar yang kita sorot. Bila kalian sedang mencari plugin apa yang cocok untuk efek gambar, tidak ada salahnya mencoba plugin ini. Nah berikut ini akan saya berikan tutorial bagaimana Cara Memasang Plugin ZooMove pada Web.

Sebelum memuali pada pemasangan plugin nya, tentu kalian harus mempersiapkan bahan-bahan nya terlebih dahulu yang paling penting adalah plugin ZooMove nya dan beberapa gambar sebagai objectnya. Nah untuk kasus ini saya menggunakan plugin ZooMove secara online artinya saya tidak perlu mendowload file ZooMove nya. Bagi yang ingin memasang secara offline kalian bisa download file pada link ZooMove ini.
Setelah bahan-bahan telah siap untuk kita pasang, langkah pertama adalah menampilkan gambar terlebih dahulu dengan kode HTML berikut.

<div class="wrapper">
    <figure class="zoo-item" data-zoo-scale="3" data-zoo-image="http://lorempixel.com/400/200/sports/"></figure>
</div>

Setelah itu, kita akan set layoutnya terlebih dahulu dengan kode CSS3 berikut ini.

.wrapper {width: 600px; margin: auto;}
.zoo-item {width: 600px; height: 400px; margin: auto;}

Kalau sudah kode HTML dan CSS diketikan semua, selanjutnya adalah tahap pemasangan plugin nya. Pertama silahkan kalian load terlebih dahulu file CSS ZooMove berikut diantara tag head. Pada kasus ini saya menggunakan file CSS secara online.

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.css">

Selanjutnya pasang lagi file jQuery library dan Js ZooMovenya dipaling bawah setelah tag body.

<script src="https://code.jquery.com/jquery-1.11.3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.js"></script>

 Dan tambahkan kode jQuery berikut.

<script>
        $('.zoo-item').ZooMove({
            cursor: 'true',
            scale: '1.2',
        });
</script>

Tampilan akhir semua kode seperti berikut.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ZooMove</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.css">
    <style>
        .wrapper {width: 600px; margin: auto;}
        .zoo-item {width: 600px; height: 400px; margin: auto;}
    </style>
</head>
<body>
    <div class="wrapper">
        <figure class="zoo-item" data-zoo-scale="3" data-zoo-image="http://lorempixel.com/400/200/sports/"></figure>
    </div>

    <script src="https://code.jquery.com/jquery-1.11.3.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/zoomove/1.2.1/zoomove.min.js"></script>
    <script>
        $('.zoo-item').ZooMove({
            cursor: 'true',
            scale: '1.2',
        });
    </script>
</body>
</html>

Setelah itu simpan filenya kemudian jalankan dibrowser masing-masing dan lihat hasilnya, jika kalian sorot pada object gambar maka akan terjadi efek Zoom. Baik cukup mudah bukan untuk pemasangan plugin ZooMove nya. Sekian tutorial mengenai Cara Memasang Plugin ZooMove pada Web. Selamat mencoba.

13 Agustus 2017

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 Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat