Chào các bạn, là một người làm web, chắc hẳn ai trong chúng ta cũng muốn “đứa con tinh thần” của mình có một chút gì đó khác biệt, một chút cá tính riêng để khách hàng hay độc giả ghé thăm phải trầm trồ: “Wow, web này làm hay thế!”.
Bên cạnh giao diện tổng thể hay nội dung chất lượng, những chi tiết nhỏ (micro-interactions) chính là thứ giữ chân người dùng ở lại lâu hơn. Và hôm nay, mình muốn chia sẻ với các bạn một đoạn code “nhỏ nhưng có võ” mà mình vừa tối ưu xong: Con trỏ chuột ThompBui Cute.
Đây không chỉ là một vòng tròn chạy quanh chuột thông thường, mà nó là sự kết hợp của kỹ thuật đồ họa mượt mà và khả năng tương tác thông minh. Hãy cùng mình khám phá nhé!
1. Tại sao bạn nên thay đổi con trỏ chuột mặc định?
Đã bao giờ bạn cảm thấy con trỏ chuột màu trắng của Windows hay màu đen của MacOS có phần… hơi chán chưa? Trong thiết kế web hiện đại, con trỏ chuột (Custom Cursor) đang trở thành một xu hướng mạnh mẽ.
Việc thay đổi con trỏ chuột giúp:
- Tăng nhận diện thương hiệu: Bạn có thể lồng ghép tên thương hiệu hoặc phong cách cá nhân ngay trên con trỏ.
- Cải thiện trải nghiệm người dùng (UX): Giúp người dùng biết chính xác khi nào họ đang ở trên một liên kết hoặc một nút bấm thông qua các nhãn văn bản đi kèm.
- Tạo sự chuyên nghiệp: Thể hiện sự tỉ mỉ của chủ sở hữu website đến từng chi tiết nhỏ nhất.
2. Điểm đặc biệt của đoạn code “ThompBui Cute”
Khác với các plugin nặng nề trên thư viện WordPress, đoạn code mình chia sẻ dưới đây cực kỳ nhẹ và có 3 tính năng “ăn tiền”:
Hiệu ứng đảo màu (Mix-Blend-Mode) thông minh
Vấn đề lớn nhất của con trỏ chuột màu trắng là khi di chuyển trên nền trắng, nó sẽ… tàng hình. Đoạn code này sử dụng thuộc tính mix-blend-mode: difference. Điều này có nghĩa là con trỏ sẽ tự động biến thành màu đen khi ở trên nền trắng, và giữ màu trắng khi ở trên nền tối. Bạn sẽ không bao giờ lo con trỏ bị mất dấu!
Chuyển động siêu mượt với RequestAnimationFrame
Hầu hết các code cursor hiện nay dùng CSS transition, điều này đôi khi gây ra hiện tượng “giật lag” nếu máy tính của người dùng đang xử lý nặng. Code của mình sử dụng vòng lặp requestAnimationFrame và thuật toán nội suy tuyến tính (Lerp). Kết quả? Vòng tròn sẽ đuổi theo chuột một cách mềm mại như lụa ở tốc độ 60 khung hình/giây.
Tự động nhận diện tương tác
Con trỏ này cực kỳ “thông minh”. Khi bạn di chuột vào một đường link, nó sẽ hiện chữ “ấn vào đi”. Khi bạn di chuột vào nút bấm, nó sẽ hiện “ấn vào nút đê”. Và mặc định, nó sẽ luôn đi cùng bạn với cái tên thân thương: “ThompBui Cute”.
3. Đoạn mã thần thánh (Full Code)
Dưới đây là toàn bộ đoạn code bạn cần. Bạn chỉ việc copy và làm theo hướng dẫn ở bước tiếp theo.
function wp_custom_cursor_thompbui_script() {
?>
<div class="cursor-dot" id="dot"></div>
<div class="cursor-circle" id="circle">
<div class="cursor-label" id="label">ThompBui Cute</div>
</div>
<style>
@media (pointer: fine) {
body, button, a, input, textarea, [role="button"], .hover-target {
cursor: none !important;
}
.cursor-dot {
position: fixed;
top: 0;
left: 0;
width: 6px;
height: 6px;
background: white;
border-radius: 50%;
pointer-events: none;
z-index: 999999;
margin-left: -3px;
margin-top: -3px;
will-change: transform;
display: block;
mix-blend-mode: difference;
}
.cursor-circle {
position: fixed;
top: 0;
left: 0;
width: 40px;
height: 40px;
border: 1px solid white;
border-radius: 50%;
pointer-events: none;
z-index: 999998;
margin-left: -20px;
margin-top: -20px;
transition: width 0.3s, height 0.3s, margin 0.3s, background-color 0.3s, border-color 0.3s;
display: flex;
align-items: center;
justify-content: center;
will-change: transform;
mix-blend-mode: difference;
}
.cursor-label {
position: absolute;
left: 50px;
white-space: nowrap;
color: white;
padding: 2px 8px;
font-size: 10px;
font-family: sans-serif;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 0.1em;
opacity: 1;
transition: opacity 0.2s;
pointer-events: none;
background: transparent;
}
}
@media (pointer: coarse) {
.cursor-dot, .cursor-circle {
display: none !important;
}
}
</style>
<script>
(function() {
const isPC = window.matchMedia("(pointer: fine)").matches;
if (!isPC) return;
const dot = document.getElementById('dot');
const circle = document.getElementById('circle');
const label = document.getElementById('label');
let mouseX = 0, mouseY = 0;
let dotX = 0, dotY = 0;
let circleX = 0, circleY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.clientX;
mouseY = e.clientY;
});
const render = () => {
dotX += (mouseX - dotX) * 1;
dotY += (mouseY - dotY) * 1;
dot.style.transform = `translate3d(${dotX}px, ${dotY}px, 0)`;
circleX += (mouseX - circleX) * 0.15;
circleY += (mouseY - circleY) * 0.15;
circle.style.transform = `translate3d(${circleX}px, ${circleY}px, 0)`;
requestAnimationFrame(render);
};
requestAnimationFrame(render);
document.body.addEventListener('mouseover', (e) => {
const target = e.target.closest('a, button, input[type="submit"], .hover-target');
if (!target) return;
const tagName = target.tagName.toLowerCase();
if (tagName === 'a') {
label.innerText = 'ấn vào đi';
} else {
label.innerText = 'ấn vào nút đê';
}
circle.style.width = '55px';
circle.style.height = '55px';
circle.style.margin = '-27.5px 0 0 -27.5px';
circle.style.backgroundColor = 'rgba(255, 255, 255, 0.1)';
});
document.body.addEventListener('mouseout', (e) => {
const target = e.target.closest('a, button, input[type="submit"], .hover-target');
if (!target) return;
label.innerText = 'ThompBui Cute';
circle.style.width = '40px';
circle.style.height = '40px';
circle.style.margin = '-20px 0 0 -20px';
circle.style.backgroundColor = 'transparent';
});
})();
</script>
<?php
}
add_action('wp_footer', 'wp_custom_cursor_thompbui_script');4. Hướng dẫn cài đặt vào website WordPress
Việc cài đặt cực kỳ đơn giản, ngay cả khi bạn không phải là một lập trình viên chuyên nghiệp:
- Truy cập vào trang quản trị WordPress: Vào mục Giao diện (Appearance) -> Theme File Editor.
- Tìm tệp functions.php: Ở cột bên phải, hãy tìm file có tên là
functions.php. - Dán đoạn code: Di chuyển xuống cuối file và dán toàn bộ đoạn mã trên vào.
- Lưu thay đổi: Nhấn Update File.
Lưu ý: Nếu bạn sử dụng các theme bản quyền có Child Theme, hãy dán vào file functions.php của Child Theme để tránh bị mất code khi cập nhật giao diện nhé!
5. Một vài lưu ý nhỏ
Mặc dù con trỏ chuột này rất đẹp, nhưng mình đã tích hợp sẵn một đoạn kiểm tra thiết bị. Nó sẽ tự động ẩn trên điện thoại và máy tính bảng. Tại sao ư? Vì trên màn hình cảm ứng, người dùng sử dụng ngón tay để chạm chứ không dùng chuột, việc hiển thị con trỏ sẽ gây vướng víu và mất thẩm mỹ. Code này chỉ dành riêng cho những “anh em” dùng PC/Laptop để có trải nghiệm tốt nhất.
6. Lời kết
Vậy là chỉ với vài phút thao tác, website của bạn đã sở hữu một hiệu ứng con trỏ chuột cực kỳ sang xịn mịn. Đừng ngần ngại thay đổi những thứ nhỏ nhất để tạo nên sự khác biệt lớn lao.
Nếu bạn gặp bất kỳ khó khăn nào trong quá trình cài đặt hoặc muốn tùy chỉnh chữ “ThompBui Cute” thành tên riêng của mình, hãy để lại bình luận phía dưới, mình sẽ hỗ trợ nhiệt tình!
Chúc các bạn thành công và có một website thật “Cute” nhé!
Keywords (SEO): Custom cursor WordPress, con trỏ chuột tùy chỉnh, code cursor mượt, hiệu ứng chuột đảo màu, ThompBui Cute, hướng dẫn WordPress.
Để lại một bình luận