Cara membuat Efek Getar di blogger menggunakan javascript

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.

DEMO

ada 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 &lt;!--</body>--&gt;&lt;/body&gt;

<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 &lt;!--</body>--&gt;&lt;/body&gt;

<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