Home JavaScript

Membuat Text Dan Tag Element Selalu Mengikuti Mouse Atau Cursor

12:12 AM
A+ A- Print Email

Hai sahabat serhamo, kali ini kita akan membahas wacana bagaimana caranya semoga suatu text atau element dapat selalu mengikuti mouse pada html. Dalam pembuatan web terkadang kita memerlukan suatu hal menarik yang akan menciptakan pengunjung terkagum-kagum dengan web yang kita miliki.

Salah satu caranya dengan menciptakan goresan pena bergerak mengikuti mouse kemanapun ia berada. Eits tapi masih di dalam layar browser yah.

Untuk menambahkan cara ini anda memerlukan derma library javascript merupakan jquery. Library ini akan sangat membantu kita dalam menyederhanakan kode-kode javascript.

Berikut merupakan tampilan yang akan muncul jikalau anda menjalankan coding di bawah.




Agar dapat menampilkan ibarat di atas anda dapat memakai instruksi javascript ibarat 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>

Class .kotak merupakan tag div yang berwarna biru, dimana tag ini akan membatasi semoga dikala kursor melewatinya goresan pena tidak akan mengikut. Jika anda berniat untuk menciptakan goresan pena mengikut kesemua sisi halaman atau full halaman maka anda dapat mengganti $('.kotak') menjadi $(document). Atau lebih jelasnya ibarat 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>

Kode lengkap untuk tampilan di atas ibarat ini :

<!DOCTYPE html>
<html>
<head>
<title></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></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 menciptakan full halaman :


<!DOCTYPE html>
<html>
<head>
<title></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></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 wacana postingan atau apa saja wacana blog ini.