Hướng dẫn thêm hiệu ứng con trỏ chuột
Mở file functions.php trong child theme của bạn (nếu chưa có child theme, bạn nên tạo child theme để tránh mất thay đổi khi update theme). Thêm đoạn code sau:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// Hiệu ứng trỏ chuột function color_changing_cursor_effect() { ?> <div class="color-changing-cursor"></div> <style> .color-changing-cursor { position: fixed; width: 15px; height: 15px; border-radius: 50%; pointer-events: none; z-index: 9999; background: red; transform: translate(-50%, -50%); } </style> <script> document.addEventListener("mousemove", function (e) { const cursor = document.querySelector(".color-changing-cursor"); cursor.style.top = `${e.pageY}px`; cursor.style.left = `${e.pageX}px`; cursor.style.background = `rgb(${e.pageX % 255}, ${e.pageY % 255}, ${(e.pageX + e.pageY) % 255})`; }); </script> <?php } add_action('wp_footer', 'color_changing_cursor_effect', 1000); |
Hiệu ứng “Wave” (Gợn sóng khi di chuyển chuột)
Vòng tròn tạo hiệu ứng lan tỏa khi chuột di chuyển.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
function wave_cursor_effect() { if (!wp_is_mobile()) { ?> <div class="wave-cursor"></div> <style> .wave-cursor { position: fixed; width: 20px; height: 20px; border-radius: 50%; background: rgba(0, 181, 232, 0.8); pointer-events: none; transform: translate(-50%, -50%); animation: ripple 1s infinite; z-index: 9999999; } @keyframes ripple { 0% { transform: translate(-50%, -50%) scale(1); opacity: 1; } 100% { transform: translate(-50%, -50%) scale(3); opacity: 0; } } </style> <script> document.addEventListener("mousemove", function (e) { const cursor = document.querySelector(".wave-cursor"); cursor.style.top = e.clientY + "px"; cursor.style.left = e.clientX + "px"; }); </script> <?php } } add_action('wp_footer', 'wave_cursor_effect', 1000); |
Hiệu ứng “Trails” (Vệt sáng theo sau chuột)
Một loạt các vòng tròn nhỏ mờ theo sau con trỏ.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 |
function trail_cursor_effect() { if (!wp_is_mobile()) { ?> <style> .trail { position: fixed; width: 8px; height: 8px; border-radius: 50%; background: rgba(220, 86, 86, 0.8); pointer-events: none; animation: fadeOut 0.5s forwards; z-index: 9999999; } @keyframes fadeOut { from { opacity: 1; } to { opacity: 0; } } </style> <script> document.addEventListener("mousemove", function (e) { const trail = document.createElement("div"); trail.className = "trail"; trail.style.top = e.clientY + "px"; trail.style.left = e.clientX + "px"; document.body.appendChild(trail); // Xóa vệt sau một thời gian setTimeout(() => trail.remove(), 500); }); </script> <?php } } add_action('wp_footer', 'trail_cursor_effect', 1000); |
Hiệu ứng “Blob Cursor” (Con trỏ co giãn)
Một blob mềm mại thay đổi kích thước theo chuyển động chuột.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
function blob_cursor_effect() { if (!wp_is_mobile()) { ?> <div class="blob-cursor"></div> <style> .blob-cursor { position: fixed; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 105, 180, 0.7); pointer-events: none; transition: transform 0.2s ease-out, background-color 0.2s ease-out; z-index: 9999999; transform: translate(-50%, -50%) scale(1); } a:hover ~ .blob-cursor { transform: translate(-50%, -50%) scale(1.5); background: rgba(255, 69, 0, 0.8); } </style> <script> document.addEventListener("mousemove", function (e) { const blob = document.querySelector(".blob-cursor"); blob.style.top = e.clientY + "px"; blob.style.left = e.clientX + "px"; }); document.querySelectorAll("a").forEach(el => { el.addEventListener("mouseover", () => { const blob = document.querySelector(".blob-cursor"); blob.style.transform = "translate(-50%, -50%) scale(1.5)"; blob.style.backgroundColor = "rgba(255, 69, 0, 0.8)"; }); el.addEventListener("mouseout", () => { const blob = document.querySelector(".blob-cursor"); blob.style.transform = "translate(-50%, -50%) scale(1)"; blob.style.backgroundColor = "rgba(255, 105, 180, 0.7)"; }); }); </script> <?php } } add_action('wp_footer', 'blob_cursor_effect', 1000); |
Vòng tròn chạy theo chuột
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
//vòng tròn chạy theo chuột function black_circle_effect() { ?> <style> .black-circle { position: fixed; width: 40px; height: 40px; border: 1px solid black; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); transition: transform 0.1s ease-out; } </style> <script> document.addEventListener("mousemove", function (e) { let circle = document.querySelector(".black-circle"); if (!circle) { circle = document.createElement("div"); circle.className = "black-circle"; document.body.appendChild(circle); } circle.style.top = `${e.pageY}px`; circle.style.left = `${e.pageX}px`; }); </script> <?php } add_action('wp_footer', 'black_circle_effect', 1000); |
Quý khách cần tư vấn thiết kế web giá rẻ, vui lòng nhấn nút bên dưới:
Chào ! Bạn thấy nội dung này thế nào?
Xem thêm:
- Hướng dẫn tùy chỉnh mô tả danh mục sản phẩm hiển thị sau danh sách sản phẩm thay vì phía trên
- Hướng dẫn code function trang Xóa các ký tự đặc biệt trong một đoạn văn bản
- Hướng dẫn code function kiểm tra chặn spam Contact Form 7 (CF7) dựa trên số lượng cuộn màn hình
- Hướng dẫn code function Thêm các tệp CSS và JS vào trang web WordPress
- 28 tiêu chí SEO Onpage quan trọng nhất được Google công nhận hoặc khuyến nghị
