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:
// 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.
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ỏ.
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.
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
//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);
Chào ! Bạn thấy nội dung này thế nào?
