02
Th3
Th3
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…
