Membuat Efek Klik dan Tahan Dengan Javascript

Pada kesempatan kali ini kita akan belajar tentang Membuat Efek Klik dan Tahan Dengan Javascript. Nah disini efek yang ditampilkan dimana saat mouse di klik serta tahan maka akan tampil efeknya. Baiklah kalau begitu langsung saja bagaimana cara membuatnya.Langkah Membuat Efek klik dan tahan dengan Javascript sebagai berikut:

Step pertama:

Sahabat buat file html lalu ketikkan code seperti dibawah ini

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Membuat Efek Klik dan Tahan Dengan Javascript</title>
	<link rel="stylesheet" href="style.css">
</head>
<body>
	<section>
		<h3>Efek Klik dan Tahan</h3>
		<p>Cerita buku kedua sesungguhnya dimulai saat Milea dan Dilan meresmikan status pacaran mereka pada 22 Desember 1990 dalam sebuah kertas bermaterai yang Dilan namai Dokumen Perasaan. . <br><br>
		Romeo and Juliet-nya Shakespeare berakhir sejolinya mati bersama, Siti Nurbaya dan Samsul Bahri tak berakhir di pelaminan, Jack tewas di Titanic meninggalkan Rose, kekasihnya..<br><br>Selain romantis, sekolah itu adalah tempat yang banyak menyimpan kenangan. Terutama menyangkut seseorang yang sangat aku cintai, yang pernah mengisi hari-hariku di masa lalu..."  </p>
	</section>
	<div id="button"></div>

pada code diatas pada file html terdapat tag section dan sebuah tag div yang memiliki ID=button

Step kedua

sahabat tambahkan style CSS agar tampilan atau efek yang tampil lebih menarik. Coba ketikkan code CSS berikut :

@import url('https://fonts.googleapis.com/css?family=McLaren&display=swap');
*{margin:0;padding:0;box-sizing: border-box;cursor: none !important;}
section{
	width: 100%;
	min-height: 100vh;
	padding:100px;
	background: #20dff2;
	font-family: 'McLaren', cursive;
}
section h3{
	font-size: 35px;
	margin-bottom:10px;
}
section p{
	font-size: 17px;
}
#button{
	position: fixed;
	width: 20px;
	height: 20px;
	background: #dbeaf7;
	border-radius: 50%;
	transform: translate(-50%, -50%);
	mix-blend-mode: difference;
	transition:width 0.5s, height 0.5s;
}
#button:active
{
	width: 3200px;
	height: 3200px;
	transition:width 5s, height 5s;
}
#button:before
{
	content: '';
	position: absolute;
	top:50%;
	left:50%;
	width: 20px;
	height: 2px;
	background: #000;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: 0.5s;
}
#button:after
{
	content: '';
	position: absolute;
	top:50%;
	left:50%;
	width: 2px;
	height: 20px;
	background: #000;
	transform: translate(-50%, -50%);
	opacity: 0;
	transition: 0.5s;
}
#button:active:before,
#button:active:after
{
	opacity: 1;
}

Step selanjutnya yaitu tinggal menambahkan sebuah script dari javascript untuk memberikan pada efek mouse yuk ketikkan seperti dibawah ini:

<script>
		var button = document.getElementById('button');
		window.onmousemove = function(e){
			var x = e.clientX;
				y = e.clientY;
			cursor.style.left = x + 'px';
			cursor.style.top = y + 'px';
		}
	</script>

Jika sahabat sudah selesai mengetikan semua code yang berada diatas ,coba langsung jalankan pada browser masing-masing. Kemudian klik dan tahan untuk melihat apakah sudah berjalan efek yang ditampilkan.

Saya kira cukup dalam pembhasan kali ini tentang membuat efek klik dan tahan dengan javascript. semoga bermanfaat dan samapai jumpa dalam pembhasan lainnya,

terima kasih.

Membuat Efek Klik dan Tahan Dengan Javascript

Kategori