Table of Contents

Hallo semua pada artikel kali ini admin mau mengshare tutorial Cara membuat Efek Getar di blogger menggunakan pure js, mau itu tombol gambar link dll
untuk mencoba demonya silakan klik salah satu icon pada blog ini melalui mobile atau klik tombol demo di bawah ini.
DEMOada bbrpa versi yang akan saya share untuk tutorial kali ini
Tutorial versi 1
jika yang ingin kalian kasih efek getar tidak ada id/class nya dan hanya ingin memberi icon itu saja yang ingin dikasih efek getar kalian bisa coba cara pertama ini, kalian cukup menambahkan script js berikut
navigator.vibrate(50
)
untuk contoh nya kalian bisa lihat dibawah ini
function darkMode(){navigator.vibrate(50
);localStorage.setItem("mode","darkmode"===localStorage.getItem("mode")?"light":"darkmode"),"darkmode"===localStorage.getItem("mode")?document.querySelector("#mainCont").classList.add("drK"):document.querySelector("#mainCont").classList.remove("drK")};
Tutorial versi 2
untuk tutorial kedua ini silakan salin script di bawah ini dan letakkan di atas kode </body>
atau <!--</body>--></body>
<script>/*<![CDATA[*/
var shK = document.querySelectorAll('.tIc,.mobMn li,.mnMn li'); for (var i = 0; i < shK.length; i++) {
var gT = shK[i]; gT.addEventListener('click', function() {
navigator.vibrate(50
)});
}
/*]]>*/</script>
kalian bisa menambahkan class lainya di code yang sudah saya tandai
Tutorial versi 3
untuk tutorial ketiga tidak jauh berbeda pada tutorial kedua,hanya saja pemanggilan classnya yang berbeda, silakan salin script di bawah ini dan letakkan di atas kode </body>
atau <!--</body>--></body>
<script>/*<![CDATA[*/
var getar = document.querySelectorAll('.getar');
for (var i = 0; i < getar.length; i++) {
var getarr = getar[i];
getarr.addEventListener('click', function() {
navigator.vibrate(50
)
});
}
/*]]>*/</script>
Cara Penggunaan untuk tutorial ketiga
cara penggunana kalian cukup panggil class getar pada element html yang ingin di buat efek getar ketika ada aksi klik,bisa berupa tombol link gambar apapun itu bebas.
<!-- contoh -->
<button class='getar'>klik di sini</button>
<!-- atau -->
<a class='getar' href='#'>ini tautan aktif</a>
<!-- atau -->
<div class='getar'>ini div</div>
kalian bisa mengubah ukuran 50
dengan angka yang kalian inginkan, angka 50 adalah untuk mengatur besar/kecilnya getaran yang ingin kalian buat
ok jadi sekian cara membuat efek getar saat ada aksi klik yang bisa saya bagikan kali ini semoga bermanfaat dan terima kasih telah berkunjung.
Source:
www.wendycode.com