Cara Menggunakan Plugin jQuery focus-follow
Halo teman – teman, berjumpa kembali dengan saya di tips dan trik Source Code Aplikasi. Di artikel minggu ini saya banyak memberikan tips dan trik mengenai plugin jQuery, teman – teman yang belum tahu silahkan di review di artikel sebelumnya pastinya masih di halaman situs ini. Dan di kesempatan kali ini saya akan memberikan tips dan trik yang pun seputar plugin jQuery yaitu Cara Menggunakan Plugin jQuery focus-follow dimana plugin ini berfungsi bagi mouse hover, di contoh kali ini kita akan menggunakan beberapa image dan kemudian kita berikan plugin ini bagi menghasilkan efek yaitu mouse hover ketika mouse di arahkan karenanya hover akan mengikuti mouse dan hover akan muncul nah kurang lebih nya di bawah ini gambarannya
Kemudian ketika mouse di arahkan dimana saja karenanya hover akan mengikuti,
Bagus sekarang ini kita akan implementasikan Cara Menggunakan Plugin jQuery focus-follow sebelum mulai teman – teman siapkan text editornya dan unduh 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, bagi image teman – teman boleh menggunakan image apa saja bagi praktek di tips dan trik kali ini, selanjutny kita load library dan panggil plugin yang telah teman – teman unduh
<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>
Sekiranya telah save dan jalankan di browsernya, karenanya hasilnya sama seperti contoh di atas
Berikut yaitu Cara Menggunakan Plugin jQuery focus-follow jikalau teman – teman kurang puas dengan hasilnya mungkin pun kalian dapat eksperimen sendiri bagi lebih bagus hasilnya menurut kalian dan mahir pada menggunakan plugin jQuery ini. Bagus, demikianlah dulu di artikel kali ini dan kita berjumpa kembali di artikel yang akan datang.
Gampang – mudahan bermanfaat dan menjadi tambahan pengetahuan teman – teman mengenai plugin jQuery nya, terimakasih dan hingga jumpa.
Sumber https://kursuswebsite.org
