Hai sobat coding rakitan, kali ini kita akan membahas tentang bagaimana caranya agar suatu text atau element bisa selalu mengikuti mouse pada html. Dalam pembuatan web terkadang kita memerlukan suatu hal menarik yang akan membuat pengunjung terkagum-kagum dengan web yang kita miliki.
Salah satu caranya dengan membuat tulisan bergerak mengikuti mouse kemanapun dia berada. Eits tapi masih di dalam layar browser yah.
Untuk menambahkan cara ini anda memerlukan bantuan library javascript yaitu jquery. Library ini akan sangat membantu kita dalam menyederhanakan kode-kode javascript.
Berikut adalah tampilan yang akan muncul bila anda menjalankan coding di bawah.
Agar bisa menampilkan seperti di atas anda bisa menggunakan kode javascript seperti ini :
<script type="text/javascript">
$('.kotak').mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
$('.kotak').mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
Class .kotak adalah tag div yang berwarna biru, dimana tag ini akan membatasi agar ketika kursor melewatinya tulisan tidak akan mengikut. Jika anda berniat untuk membuat tulisan mengikut kesemua sisi halaman atau full halaman maka anda bisa mengganti $('.kotak') menjadi $(document). Atau lebih jelasnya seperti ini :
<script type="text/javascript">
$(document).mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
$(document).mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
Kode lengkap untuk tampilan di atas seperti ini :
<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{
background: unset;
margin: unset;
}
#tulisan{
padding: 2%;
background: white;
border-radius: 7px;
top: 0;
}.kotak{
width: 500px;
height: 500px;
background-image: linear-gradient(#000c4e, blue);
overflow: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="kotak">
<div id="tulisan" style="position: absolute;display: none;">
<a>Coding Rakitan</a>
</div>
</div>
<script type="text/javascript">
$('.kotak').mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
</body>
</html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{
background: unset;
margin: unset;
}
#tulisan{
padding: 2%;
background: white;
border-radius: 7px;
top: 0;
}.kotak{
width: 500px;
height: 500px;
background-image: linear-gradient(#000c4e, blue);
overflow: hidden;
position: absolute;
}
</style>
</head>
<body>
<div class="kotak">
<div id="tulisan" style="position: absolute;display: none;">
<a>Coding Rakitan</a>
</div>
</div>
<script type="text/javascript">
$('.kotak').mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
</body>
</html>
Kode untuk membuat full halaman :
<!DOCTYPE html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{
background: red;
margin: unset;
}
#tulisan{
padding: 2%;
background: white;
border-radius: 7px;
top: 0;
}
</style>
</head>
<body>
<div id="tulisan" style="position: absolute;display: none;">
<a>Coding Rakitan</a>
</div>
<script type="text/javascript">
$(document).mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
</body>
</html>
<html>
<head>
<title>Coding Rakitan</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<style type="text/css">
body{
background: red;
margin: unset;
}
#tulisan{
padding: 2%;
background: white;
border-radius: 7px;
top: 0;
}
</style>
</head>
<body>
<div id="tulisan" style="position: absolute;display: none;">
<a>Coding Rakitan</a>
</div>
<script type="text/javascript">
$(document).mousemove(function(e){
$("#tulisan").css("display", "block");
$("#tulisan").css({left:e.pageX, top:e.pageY});
x = e.pageX;
y = e.pageY;
});
</script>
</body>
</html>
Demikian postingan kali ini tentang Membuat Text dan Tag Element Selalu Mengikuti Mouse atau Cursor. Semoga bermanfaat, silahkan tinggalkan komentar anda di bawah tentang postingan atau apa saja tentang blog ini.
Komentar
Posting Komentar