Cách tạo con trỏ chuột tùy chỉnh bằng CSS và JavaScript

Bạn đã bao giờ truy cập một trang web và hoàn toàn bị choáng ngợp bởi các tính năng tuyệt vời của nó chưa? Một trong số chúng có thể là con trỏ chuột thú vị khác với con trỏ mũi tên hoặc con trỏ thông thường mà bạn đã quen sử dụng.

Điều này thực sự có thể cải thiện trải nghiệm người dùng và gần đây tôi đã tự hỏi nó hoạt động như thế nào. Vì vậy, tôi bắt đầu thực hiện một số nghiên cứu và tôi đã tìm ra cách nó được thực hiện.

Trong bài viết này, tôi sẽ giải thích cách tạo một con trỏ chuột tùy chỉnh. Đến cuối bài viết này, bạn sẽ học cách tạo các con trỏ này bằng hai phương pháp khác nhau, sử dụng CSS và JavaScript. Sau đó, bạn sẽ sẵn sàng cải tiến trang web của mình bằng các con trỏ sáng tạo khác nhau để thu hút khán giả. Sẳn sàng? Hãy đi sâu vào.

điều kiện tiên quyết

Bài viết này thân thiện với người mới bắt đầu, nhưng để hiểu một số khái niệm, bạn nên có kiến ​​thức cơ bản về:

• HTML
• CSS cơ bản
• JavaScript cơ bản

Cách tùy chỉnh con trỏ chuột bằng CSS

Việc tùy chỉnh con trỏ chuột bằng CSS khá đơn giản, vì CSS đã có sẵn một thuộc tính để xử lý việc này. Tất cả những gì chúng ta cần làm là xác định thuộc tính này và sử dụng nó.

Với tư cách là Kỹ sư Frontend, chúng tôi thường xuyên sử dụng thuộc tính này – không gì khác chính là quyền năng toàn năng cursor tài sản. Vâng, thuộc tính đó là thứ cho chúng ta sức mạnh để tạo một con trỏ tùy chỉnh theo lựa chọn của chúng ta.

Trước khi đi đến một ví dụ thực tế, hãy xem xét các giá trị được liên kết với CSS cursor tài sản. Trong khi hầu hết các nhà phát triển chỉ sử dụng một vài cái quan trọng, thì chúng ta nên xem xét nhiều hơn nữa.

Từ đoạn mã trên và từ kết quả, bạn có thể xem và kiểm tra các con trỏ chuột khác nhau mà CSS có bằng cách di con trỏ chuột của bạn lên từng hộp chứa tên của từng CSS cursor giá trị tài sản.

Bây giờ làm cách nào để sử dụng CSS để tùy chỉnh con trỏ chuột? Để sử dụng tính năng này, bạn chỉ cần cho CSS biết hình ảnh bạn định sử dụng và trỏ thuộc tính con trỏ tới URL hình ảnh bằng cách sử dụng url giá trị.

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

Từ đoạn mã trên, bạn có thể thấy tôi đặt mã này trên nội dung tài liệu, vì vậy mã này có thể áp dụng cho con trỏ bất kể nó di chuyển ở đâu. Nó có hình ảnh được chỉ định trong url().

Giá trị tiếp theo của thuộc tính là dự phòng, chỉ trong trường hợp hình ảnh không tải hoặc không thể tìm thấy có thể do một số trục trặc bên trong. Tôi chắc rằng bạn sẽ không muốn trang web của mình “không có con trỏ”, vì vậy, việc thêm dự phòng là rất quan trọng. Bạn cũng có thể thêm bao nhiêu URL dự phòng nếu có thể hoặc muốn.

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

Bạn cũng có thể tùy chỉnh con trỏ trên một thành phần hoặc phần cụ thể trên trang web của mình. Dưới đây là một ví dụ về CodePen:

Đó là tất cả những gì cần thiết để tùy chỉnh con trỏ trong CSS. Bây giờ hãy xem cách chúng ta có thể làm điều này là JavaScript.

Cách tạo con trỏ chuột tùy chỉnh bằng JavaScript

Để thực hiện điều này với JavaScript, bạn cần thao tác DOM để có được kết quả mong muốn.

Đầu tiên, hãy xem HTML:

HTML

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

Từ đoạn mã trên, tôi đã tạo hai divs để đại diện cho con trỏ. Kế hoạch là điều khiển các div này từ JavaScript để chuyển động của chúng trên trang web được cuộn bởi JavaScript mousemove sự kiện bằng cách sử dụng tọa độ X và Y của chuyển động chuột.

Bây giờ chúng ta hãy chuyển sang phần CSS, từng phần một sẽ có ý nghĩa.

Cách tạo kiểu con trỏ tùy chỉnh bằng 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%;
}

Nhìn vào mã CSS ở trên, tôi đã tắt con trỏ (nhớ cursor:none?). Điều này sẽ làm cho con trỏ ẩn đi, chỉ cho phép con trỏ tùy chỉnh của chúng tôi hiển thị.

Các divs Tôi đã tạo kiểu để tạo cho chúng vẻ ngoài “giống như con trỏ” độc đáo. Bạn hoàn toàn có thể làm được nhiều hơn với nó, có thể thêm ảnh nền, biểu tượng cảm xúc, nhãn dán, v.v. miễn là có hình ảnh. Bây giờ, hãy xem JavaScript

Cách sử dụng JavaScript để làm cho con trỏ di chuyển

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)

Tôi đã thêm một trình xử lý sự kiện trên đối tượng cửa sổ chung để nghe bất kỳ chuyển động nào của chuột. Khi chuột di chuyển, moveCursor biểu thức hàm được gọi và nó nhận đối tượng sự kiện làm tham số. Với tham số này, tôi có thể lấy tọa độ X và Y trên chuột tại bất kỳ điểm nào trên trang.

Tôi đã chọn từng loại con trỏ từ DOM bằng JavaScript querySelector. Vì vậy, tất cả những gì tôi phải làm là di chuyển chúng theo tọa độ X và Y của chuột bằng cách kiểm soát các thuộc tính biến đổi trên kiểu bằng translate3d giá trị. Điều này sẽ cho phép các div di chuyển khi chuột di chuyển đến bất kỳ điểm nào trên trang web.

Và các backticks mà bạn nhìn thấy được gọi là mẫu chữ. Điều này cho phép viết các biến dễ dàng để nối chúng vào chuỗi. Cách khác là ghép các biến vào chuỗi.

Đơn giản, phải không? Đó là nó!

Dưới đây là mẫu CodePen và kết quả của đoạn mã trên:

Phương pháp nào hoạt động tốt nhất?

Giờ đây, với tư cách là nhà phát triển, việc chọn phương pháp nào phù hợp nhất với bạn là tùy thuộc vào bạn. Bạn có thể chọn sử dụng CSS nếu muốn sử dụng một số biểu tượng cảm xúc hoặc hình ảnh đẹp mắt làm con trỏ. Mặt khác, bạn có thể muốn sử dụng JavaScript để có thể tùy chỉnh các hình dạng phức tạp theo lựa chọn của mình và tạo hiệu ứng cho chuyển động của con trỏ.

Cách nào cũng được, miễn là bạn nhận được kết quả mong muốn và khiến tất cả khách truy cập trang web của bạn phải thán phục.

Tôi hy vọng bạn đã học được nhiều điều từ bài viết này, và tôi rất mong được thấy những gì bạn xây dựng với kiến ​​thức này.

Để biết thêm mẹo CSS, hãy theo dõi tôi trên Twitter.

Cảm ơn đã đọc, Hẹn gặp lại lần sau.