Halo teman – teman, berjumpa kembali dengan saya di tips dan trik Dumet School. Pada artikel minggu ini saya banyak memberikan tips dan trik tentang plugin jQuery, teman – teman yang belum tahu silahkan di review pada artikel sebelumnya tentunya masih di halaman website ini. Dan pada kesempatan kali ini saya akan memberikan tips dan trik yang juga seputar plugin jQuery yaitu Cara Menggunakan Plugin jQuery focus-follow dimana plugin ini berfungsi untuk mouse hover, di contoh kali ini kita akan menggunakan beberapa image dan kemudian kita berikan plugin ini untuk menciptakan efek yaitu mouse hover ketika mouse di arahkan maka hover akan mengikuti mouse dan hover akan muncul nah kurang lebih nya di bawah ini gambarannya
Kemudian ketika mouse di arahkan dimana saja maka hover akan mengikuti,
Baik sekarang kita akan implementasikan Cara Menggunakan Plugin jQuery focus-follow sebelum mulai teman – teman siapkan text editornya dan download terlebih dahulu plugin jQuery nya di link ini.
Kemudian isikan script html nya di bawah ini
<!doctype html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Cara Menggunakan Plugin jQuery focus-follow</title> </head> <body> <div class="container"> <h1>jQuery Plugin focus-follow</h1> <img src="image1.jpg" style="border-radius: 40px; -moz-border-radius : 40px;"> <img src="image2.jpg"> <img src="iamge3.jpg"> </br> <img src="image4.jpg"> <img src="image5.jpg" style="border-radius: 40px; -moz-border-radius : 40px;"> <img src="image6.jpg"> </br> <img src="image7.jpg"> <img src="image8.jpg"> <img src="image9.jpg" style="border-radius: 40px; -moz-border-radius : 40px;"> <img src="iamge10.jpg" style="border-radius: 40px; -moz-border-radius : 40px;"> </div> </body> </html>
Lalu save dengan index.html, untuk image teman – teman boleh menggunakan image apa saja untuk praktek di tips dan trik kali ini, selanjutny kita load library dan panggil plugin yang sudah teman – teman download
<link href="http://www.jqueryscript.net/css/jquerysctipttop.css" rel="stylesheet" type="text/css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous"> <script type="text/javascript" src="http://code.jquery.com/jquery-1.12.1.min.js"></script> <script type="text/javascript" src="../jquery.focus-follow.js"></script>
Lalu kita tambahkan css dan script jQuery nya
<style>
*{padding: 0; margin: 0}
body { background-color:#333; color:#fff;}
img{margin: 10px;}
.container {margin-top: 150px;}
h1{font-family: sans-serif;}
</style>
<script>
$(function() {
$("img").focusFollow({
wrapper: '.container',
color: '#fff',
opacity: 1,
margin_horizontal: 8,
margin_vertical: 8,
speed: 600,
timeout: 500
});
});
</script>
Jika sudah save dan jalankan pada browsernya, maka hasilnya sama seperti contoh di atas
Berikut adalah Cara Menggunakan Plugin jQuery focus-follow jika teman – teman kurang puas dengan hasilnya mungkin juga kalian bisa eksperimen sendiri untuk lebih bagus hasilnya menurut kalian dan mahir dalam menggunakan plugin jQuery ini. Baik, sekian dulu pada artikel kali ini dan kita berjumpa kembali pada artikel yang akan datang.
Mudah – mudahan bermanfaat dan menjadi tambahan pengetahuan teman – teman tentang plugin jQuery nya, terimakasih dan sampai jumpa.
The post Cara Menggunakan Plugin jQuery focus-follow appeared first on Kursus Website Terbaik.