Code hiệu ứng bong bóng nở ra cực đẹp khi chuột di chuyển

Thêm code hiệu ứng chuột vào website WordPress sẽ làm cho website sẽ trở nên thú vị hơn. Thay đổi hiệu ứng con trỏ chuột là điều bạn có thể tận dụng, để website/blog tạo được sự độc đáo cho độc giả.

Hiện nay các tính năng HTML, JavaScript, CSS… cho phép quản trị viên website/blog có thể tùy biến các hiệu ứng click chuột, hình dạng con trỏ chuột… Có nhiều hiệu ứng đẹp phải kể đến như: Hiệu ứng trái tim, chữ chạy theo chuột, hiệu ứng tuyết rơi, giáng sinh, năm mới…

Tuy nhiên, bài viết này mình sẽ chia sẻ cho bạn đoạn code hiệu ứng bong bóng đẹp khi chuột di chuyển trên website.

Thêm code hiệu ứng chuột bong bóng vào website WordPress

Đa số các website hiện nay đều sử dụng mã nguồn WordPress. Bởi vậy, mình sẽ hướng dẫn cho bạn cách thêm code hiệu ứng con trỏ chuột vào website mã nguồn WordPress.

Bước 1: Bạn đăng nhập vào trang quản trị trang web WordPress đang quản lý.

Bước 2: Tại phần Giao diện, click vào Sửa giao diện.

Bước 3: Tiếp theo, nhấn vào file header.php

Bước 4: Bạn copy toàn bộ mã code dưới đây, sau đó chèn vào phía trên thẻ đóng </head> của mẫu HTML trang web của mình. Sau đó nhấn vào Cập nhật tập tin.

Mã code:

<script type="text/javascript">
var colours=new Array("#F781BE", "#F781BE", "#F781BE", "#F781BE", "#F781BE"); // warna untuk border-top, border-right, border-bottom, border-left dan background gelembung
var bubbles=100; // jumlah maksmal gelembung
var x=ox=400;
var y=oy=300;
var swide=800;
var shigh=600;
var sleft=sdown=0;
var bubb=new Array();
var bubbx=new Array();
var bubby=new Array();
var bubbs=new Array();
window.onload=function() { if (document.getElementById) {
var rats, div;
for (var i=0; i<bubbles; i++) {
rats=createDiv("3px", "3px");
rats.style.visibility="hidden";
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="1px";
div.left="0px";
div.bottom="1px";
div.right="0px";
div.borderLeft="1px solid "+colours[3];
div.borderRight="1px solid "+colours[1];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.top="0px";
div.left="1px";
div.right="1px";
div.bottom="0px"
div.borderTop="1px solid "+colours[0];
div.borderBottom="1px solid "+colours[2];
div=createDiv("auto", "auto");
rats.appendChild(div);
div=div.style;
div.left="1px";
div.right="1px";
div.bottom="1px";
div.top="1px";
div.backgroundColor=colours[4];
div.opacity=0.5;
if (document.all) div.filter="alpha(opacity=50)";
document.body.appendChild(rats);
bubb[i]=rats.style;
}
set_scroll();
set_width();
bubble();
}}
function bubble() {
var c;
if (x!=ox || y!=oy){
ox=x;
oy=y;
for (c=0; c<bubbles; c++) if (!bubby[c]) {
bubb[c].left=(bubbx[c]=x)+"px";
bubb[c].top=(bubby[c]=y)+"px";
bubb[c].width="3px";
bubb[c].height="3px"
bubb[c].visibility="visible";
bubbs[c]=3;
break;
}
}
for (c=0; c<bubbles; c++) if (bubby[c]) update_bubb(c);
setTimeout("bubble()", 40);
}
function update_bubb(i) {
if (bubby[i]) {
bubby[i]-=bubbs[i]/2+i%2;
bubbx[i]+=(i%5-2)/5;
if (bubby[i]>sdown && bubbx[i]>0) {
if (Math.random()<bubbs[i]/shigh*2 && bubbs[i]++<8) {
bubb[i].width=bubbs[i]+"px";
bubb[i].height=bubbs[i]+"px";
}
bubb[i].top=bubby[i]+"px";
bubb[i].left=bubbx[i]+"px";
}
else {
bubb[i].visibility="hidden";
bubby[i]=0;
return;
}
}
}
document.onmousemove=mouse;
function mouse(e) {
set_scroll();
y=(e)?e.pageY:event.y+sleft;
x=(e)?e.pageX:event.x+sdown;
}
window.onresize=set_width;
function set_width() {
if (document.documentElement && document.documentElement.clientWidth) {
swide=document.documentElement.clientWidth;
shigh=document.documentElement.clientHeight;
}
else if (typeof(self.innerHeight)=="number") {
swide=self.innerWidth;
shigh=self.innerHeight;
}
else if (document.body.clientWidth) {
swide=document.body.clientWidth;
shigh=document.body.clientHeight;
}
else {
swide=800;
shigh=600;
}
}
window.onscroll=set_scroll;
function set_scroll() {
if (typeof(self.pageYOffset)=="number") {
sdown=self.pageYOffset;
sleft=self.pageXOffset;
}
else if (document.body.scrollTop || document.body.scrollLeft) {
sdown=document.body.scrollTop;
sleft=document.body.scrollLeft;
}
else if (document.documentElement && (document.documentElement.scrollTop || document.documentElement.scrollLeft)) {
sleft=document.documentElement.scrollLeft;
sdown=document.documentElement.scrollTop;
}
else {
sdown=0;
sleft=0;
}
}
function createDiv(height, width) {
var div=document.createElement("div");
div.style.position="absolute";
div.style.height=height;
div.style.width=width;
div.style.overflow="hidden";
return (div);
}
</script>

Bước 5: Nếu hiệu ứng bong bóng xuất hiện, thì bạn đã thành công đối với vấn đề này. Nhưng trường hợp vẫn không thấy xuất hiện hiệu ứng bong bóng. Lúc này bạn cần xóa cache của website WordPress, cache trình duyệt hoặc bật chế độ ẩn danh (Ctrl + Shift + N) để kiểm tra cho hiệu quả nhất nhé.

Hiệu ứng bong bóng ngoài việc làm đẹp cho website, còn giúp bạn và người đọc cảm thấy thư giãn hơn khi đọc các nội dung trên website. Vì bây giờ người ta thường rất lười đọc bài viết, mà thay vào đó là các kênh Podcast, video.

Bạn có thể xem demo hiệu ứng bong bóng khi chuột di chuyển tại video dưới đây:

Kết luận

Như đã chia sẻ, ngoài chia sẻ code hiệu ứng bong bóng để thay đổi hình dạng con trỏ chuột. Còn có nhiều hiệu ứng khác cho WP: Chữ chạy theo chuột, hiệu ứng khi click chuột, hiệu ứng tuyết rơi… Bạn có thể tìm thấy những hiệu ứng này trên Internet (sử dụng Code hoặc Plugin) có chứa những tính năng hấp dẫn này.

Khi thao tác di chuyển chuột, bên cạnh các hiệu ứng thì độc giả cũng dễ bị kích thích bởi sự độc đáo trên website. Điều này có thể khiến họ sẽ ở lại website của bạn lâu hơn, để nô đùa với những hiệu ứng đẹp. Chúc bạn thao tác thành công!

Cập nhật mới lúc 10:21 ngày 13/08/2020