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

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

Hiện nay các tính năng của HTML/JavaScript, CSS… cho phép quản trị viên blog/website dễ dàng thay đổi hiệu ứng/hình dạng con trỏ chuột. Có nhiều loại hiệu ứng giúp làm đẹp cho website, có thể kể đến: Hiệu ứng trái tim, hiệu ứng di chuyển theo chuột, chữ chạy theo chuột, hiệu ứng bong bóng, hiệu ứng tuyết rơi…

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

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

Đa số mọi người đều sử dụng website 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 nhé!

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

Bước 2: Copy đoạn mã code dưới đây, sau đó chèn vào một vị trí bất kỳ trên trang web của bạn. Bằng cách tạo ra một widget “HTML Tùy chỉnh” ở trong trang web WordPress của bạn để chứa đoạn mã Code này.

<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 3: Và cuối cùng, cách thay đổi hiệu ứng rê di chuyển chuột bong bóng đã thành công. Nhưng lưu ý là khi đã chèn xong đoạn mã Code này vào trang web WordPress của bạn, nhưng có trường hợp vẫn chưa thấy xuất hiện bong bóng. Thì lúc này bạn cần phải xóa Cache trên website và bật chế độ ẩn danh của trình duyệt (Ctrl + Shift + N) để kiểm tra cho chuẩn xác nhất nhé.

Bạn có thể xem chi tiết hơn cách thực hiện việc thêm hiệu ứng bong bóng khi di chuyển chuột vào website WP, tại video dưới đây:

Kết luận

Như đã chia sẻ ban đầu, ngoài việc chia sẻ code hiệu ứng bong bóng để thay đổi hình dạng con trỏ chuột. Thì còn có nhiều hiệu ứng khác nữa cho WordPress: Code chữ chạy theo con trỏ chuột, code hiệu ứng đẹp khi click chuột… Hoặc những vấn đề khác như: Code tạo tuyết rơi trên website, khung cảnh Giáng sinh, năm mới…

Bạn có thể tìm kiếm những đoạn mã code này trên Internet, hoặc sử dụng những Plugin có chứa sẵn những tính năng kể trên.

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