Langsung saja scriptnya
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.kotak{
height: 500px;
width: auto;
background-color: blue;
}
</style>
</head>
<body>
<div id="kotak" class="kotak" onmouseover="over()">
</div>
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
<script>
$('.kotak').mousemove(function(event){
const x = Math.round((window.innerHeight / event.clientX) * 255);
const y = Math.round((window.innerWidth / event.clientY) * 255);
$('.kotak').css('background-color','rgb('+x+',0,'+y+')');
});
</script>
<script>
$('.kotak').mouseleave(function(){
$('.kotak').css('background-color','blue');
});
</script>
</body>
</html>
Saya menggunakan jQuery untuk event handlingnya , kalian bisa saja menggunakan Vanilla Javascript (Native Javascript).
CSS saya menggunakan rgb (Contoh: rgb(200,0,200))
jadi saya menggunakan hasil dari gabungan event window innerheight/width dan event client height/width.
logikanya ketika kursor bergerak (mousemove) akan otomatis mengganti hasil dari perhitungan dalam variabel x dan y lalu variabel x dan y akan digunakan untuk rgb pada background color yang mana akan terus berganti jika kursor bergerak valuenya.
Keren nih tutorialnya.tampilan blog mnjadi kere.trimakasih gan
ReplyDelete👍👍
ReplyDelete👍👍
ReplyDelete👍👍
ReplyDelete