Dapatkah Anda memindahkan kursor mouse dengan javascript?

Question

Apakah Anda siap bermain dengan JavaScript? . Dalam tutorial ini, saya akan memberi tahu Anda cara memindahkan elemen ke posisi mouse di JavaScript

Table of Contents Show

Kode lengkap dalam satu file HTML
Cara Menyesuaikan Kursor Mouse dengan CSS
Cara Membuat Kursor Mouse Khusus dengan JavaScript
Cara menata kursor khusus dengan CSS
Cara menggunakan JavaScript untuk membuat kursor bergerak
Metode Mana yang Terbaik?
Bagaimana cara mendapatkan posisi kursor di JavaScript?

Saya harap Anda bersemangat untuk melihat bagaimana melakukan tugas ini

Ayo lihat…

Pertama-tama, mari buat elemen HTML kita yang akan kita pindahkan nanti ke posisi mouse

Di bawah ini adalah elemen HTML kami

<div id="myId"></div>

Di bawah ini adalah beberapa baris kode CSS agar terlihat seperti bola merah kecil

#myId {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: red;
  transition: 0.2s;
}

_

Jika Anda menjalankannya di browser, Anda akan melihat bola merah kecil. Tapi tidak akan terjadi apa-apa sekarang karena kami masih belum menambahkan kode JavaScript

Setelah kami menambahkan kode JavaScript kami, Anda dapat melihat bola merah kecil yang kami buat di layar bergerak dengan kursor mouse

Anda dapat melihat dalam kode CSS kami, bahwa kami telah menambahkan properti transisi CSS. Ini untuk membuatnya lebih menarik. Ini akan menambah efek animasi pada gerakan

Sekarang di bawah ini adalah kode JavaScript kami yang merupakan bagian utama dari tutorial kami untuk membuatnya berfungsi

document.onmousemove = function(e) { 
    var x = e.clientX; 
    var y = e.clientY; 
    document.getElementById('myId').style.marginLeft  = x+"px";
    document.getElementById('myId').style.marginTop  = y+"px";
    
}

Pada kode JavaScript di atas, kita telah menggunakan properti clientX untuk mendapatkan posisi elemen kita dari kiri dan properti clientY untuk mendapatkan posisi elemen kita dari atas

Properti clientX dan ClientY mengembalikan posisi horizontal dan vertikal dari pointer mouse ketika event mouse dipicu

Setelah itu, kami mengatur properti DOM CSS marginLeft dan marginTop ke elemen kami

Pada dasarnya, dalam tutorial ini, kita telah mengambil x dan y coordinate position of the mouse cursor and then apply them as the margin to our red ball or our element.

Untuk mendeteksi gerakan mouse, kami telah menggunakan

#myId {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background-color: red;
  transition: 0.2s;
}

0 Event sehingga setiap kali kami menggerakkan mouse, kami mendapatkan posisi pointer. Bergantung pada posisi mouse, kami mengatur margin CSS ke bola merah

Sekarang kode siap untuk diuji dan Anda dapat menjalankannya di browser Anda. Anda dapat melihat bahwa jika Anda menggerakkan mouse pada halaman, maka bola merah juga berpindah ke posisi mouse. Dengan pergerakan pointer mouse Anda, bola merah juga bergerak dengan baik

Kode lengkap dalam satu file HTML

Di bawah ini diberikan kode lengkap hanya dalam satu file HTML

<!DOCTYPE html>
<html>
<head>
  <title></title>

  <style type="text/css">
    #myId {
          width: 22px;
          height: 22px;
          border-radius: 50%;
          background-color: red;
          transition: 0.2s;
        }
  </style>
</head>
<body>

  <div id="myId"></div>


  <script type="text/javascript">
    document.onmousemove = function(e) { 
            var x = e.clientX; 
            var y = e.clientY; 
            document.getElementById('myId').style.marginLeft  = x+"px";
            document.getElementById('myId').style.marginTop  = y+"px";
    
        }
  </script>

</body>
</html>

_

Anda dapat menyalin kode lengkap, menyimpannya dalam file HTML dan membukanya dengan browser pilihan Anda untuk mengujinya

Pernahkah Anda mengunjungi sebuah situs web dan benar-benar terpesona oleh fitur-fiturnya yang luar biasa? .

Ini benar-benar dapat meningkatkan pengalaman pengguna, dan akhir-akhir ini saya bertanya-tanya bagaimana cara kerjanya. Jadi saya mulai melakukan penelitian dan saya menemukan bagaimana hal itu dilakukan

Pada artikel ini, saya akan menjelaskan cara membuat kursor mouse khusus. Di akhir artikel ini, Anda akan mempelajari cara membuat kursor ini dengan dua metode berbeda, menggunakan CSS dan JavaScript. Maka Anda akan siap untuk mempercantik situs web Anda dengan kursor kreatif yang berbeda untuk membuat audiens Anda tetap terlibat. Siap?

Prasyarat

Artikel ini ramah bagi pemula, tetapi untuk memahami beberapa konsep, Anda harus memiliki pengetahuan dasar

HTML
CSS dasar
JavaScript dasar

Cara Menyesuaikan Kursor Mouse dengan CSS

Menyesuaikan kursor mouse dengan CSS cukup sederhana, karena CSS sudah memiliki properti untuk menanganinya. Yang perlu kita lakukan adalah mengidentifikasi properti ini dan menggunakannya

Sebagai Insinyur Frontend, kami sering menggunakan properti ini – ini tidak lain adalah properti cursor yang maha kuasa. Ya, properti itulah yang memberi kita kekuatan untuk membuat kursor kustom pilihan kita

Sebelum kita masuk ke contoh praktis, mari kita lihat nilai yang terkait dengan properti CSS cursor. Sementara sebagian besar pengembang hanya menggunakan beberapa yang penting, masih ada lagi yang harus kita perhatikan

Representasi visual dari semua kursor CSS

Dari cuplikan kode di atas dan dari hasilnya, Anda dapat melihat dan menguji berbagai kursor mouse yang dimiliki CSS dengan mengarahkan kursor mouse Anda ke setiap kotak yang berisi nama setiap nilai properti cursor CSS

Sekarang bagaimana cara menggunakan CSS untuk menyesuaikan kursor mouse?

body {
  cursor: url('image-path.png'),auto;
}

Dari cuplikan kode di atas, Anda dapat melihat saya menyetel ini di badan dokumen, sehingga dapat diterapkan ke kursor ke mana pun kursor dipindahkan. Ini memiliki gambar yang ditentukan dalam url()

Nilai properti selanjutnya adalah fallback, kalau-kalau gambar tidak dimuat atau tidak dapat ditemukan mungkin karena beberapa gangguan internal. Saya yakin Anda tidak ingin situs web Anda menjadi "tanpa kursor", jadi menambahkan fallback sangatlah penting. Anda juga dapat menambahkan URL fallback sebanyak yang Anda bisa atau inginkan

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

_

Anda juga dapat menyesuaikan kursor pada elemen atau bagian tertentu dari halaman web Anda. Di bawah ini adalah contoh CodePen

Menggunakan kursor khusus yang berbeda pada elemen yang berbeda di halaman web

Itu saja yang ada untuk menyesuaikan kursor di CSS. Sekarang mari kita lihat bagaimana kita bisa melakukannya di JavaScript

Cara Membuat Kursor Mouse Khusus dengan JavaScript

Untuk mewujudkannya dengan JavaScript, Anda perlu memanipulasi DOM untuk mendapatkan hasil yang diinginkan

Pertama, mari kita lihat HTML

HTML

<div class="cursor rounded"></div>
<div class="cursor pointed"><div>

Dari cuplikan kode di atas, saya membuat dua

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

0 untuk mewakili kursor. Rencananya adalah untuk memanipulasi div ini dari JavaScript sehingga pergerakan mereka di halaman web digulir oleh acara JavaScript

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

1 menggunakan koordinat X dan Y dari gerakan mouse

Sekarang mari kita ke bagian CSS yang semuanya akan masuk akal sepotong demi sepotong

Cara menata kursor khusus dengan CSS

body{
  background-color: #1D1E22;
  cursor: none;
}

.rounded{
  width: 30px;
  height: 30px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.pointed{
  width: 7px;
  height: 7px;
  background-color: white;
  border-radius: 50%;
}

Melihat kode CSS di atas, saya menonaktifkan kursor (ingat

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

2?). Ini akan membuat kursor tidak terlihat, memungkinkan kursor khusus kami hanya untuk ditampilkan

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

0 yang saya tata untuk memberikan tampilan "mirip kursor" yang unik. Anda benar-benar dapat berbuat lebih banyak dengannya, mungkin menambahkan gambar latar belakang, emoji, stiker, dan sebagainya asalkan ada gambar. Sekarang, mari kita lihat JavaScript

Cara menggunakan JavaScript untuk membuat kursor bergerak

const cursorRounded = document.querySelector('.rounded');
const cursorPointed = document.querySelector('.pointed');


const moveCursor = (e)=> {
  const mouseY = e.clientY;
  const mouseX = e.clientX;
   
  cursorRounded.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
  
  cursorPointed.style.transform = `translate3d(${mouseX}px, ${mouseY}px, 0)`;
 
}

window.addEventListener('mousemove', moveCursor)

Saya menambahkan pendengar acara pada objek jendela global untuk mendengarkan gerakan mouse apa pun. Saat mouse bergerak, ekspresi fungsi

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

_4 dipanggil dan menerima objek event sebagai parameter. Dengan parameter ini saya bisa mendapatkan koordinat X dan Y pada mouse di mana saja di halaman

Saya sudah memilih setiap jenis kursor dari DOM menggunakan JavaScript

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

5. Jadi yang harus saya lakukan adalah memindahkannya sesuai dengan koordinat X dan Y mouse dengan mengontrol properti transformasi pada gaya dengan nilai

body {
  cursor: url('image-path.png'), url('image-path-2.svg), 
          url('image-path-3.jpeg'), auto;
}

6. Ini akan memungkinkan div untuk bergerak saat mouse bergerak ke titik mana pun di halaman web

Dan backticks yang Anda lihat disebut template literal. Ini memungkinkan menulis variabel dengan mudah untuk menambahkannya ke string. Alternatifnya adalah menggabungkan variabel ke string

Sederhana, bukan?

Di bawah ini adalah contoh CodePen dan hasil potongan kode di atas

Kursor mouse khusus menggunakan JavaScript

Metode Mana yang Terbaik?

Sekarang terserah Anda sebagai pengembang untuk memilih metode mana yang paling cocok untuk Anda. Anda dapat memilih untuk menggunakan CSS jika Anda ingin menggunakan beberapa emoji atau gambar cantik sebagai kursor. Di sisi lain, Anda mungkin ingin menggunakan JavaScript sehingga Anda dapat menyesuaikan bentuk kompleks pilihan Anda dan menganimasikan gerakan kursor.

Either way baik-baik saja, selama Anda mendapatkan hasil yang diinginkan dan wow semua pengunjung situs Anda

Saya harap Anda belajar banyak dari artikel ini, dan saya menantikan untuk melihat apa yang Anda bangun dengan pengetahuan ini

Untuk tips CSS lainnya, ikuti saya di Twitter

Terima kasih telah membaca, Sampai jumpa di lain waktu

Franklin Okoli

Seorang Insinyur Perangkat Lunak dengan minat yang besar dalam membangun desain dan estetika piksel yang sempurna, antarmuka pengguna yang bersih, dengan fokus pada pengalaman dan interaksi pengguna

Jika Anda membaca sejauh ini, tweet ke penulis untuk menunjukkan bahwa Anda peduli. Tweet terima kasih

Belajar kode secara gratis. Kurikulum open source freeCodeCamp telah membantu lebih dari 40.000 orang mendapatkan pekerjaan sebagai pengembang. Memulai

Bagaimana cara mendapatkan posisi kursor di JavaScript?

Untuk mendapatkan koordinat mouse di JavaScript, terapkan properti "clientX" dan "clientY" dengan event onclick untuk mendapatkan koordinat mouse terbaru setelah klik tombol, properti "pageX" dan "pageY" dan metode "addEventListener()" untuk mendapatkan

kode javascript