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 trang web của bạn bỗng trở nên sinh động, mới lạ. Thay đổi hiệu ứng con trỏ chuột cho blog/website là điều nên làm, nếu bạn đã quá nhàm chán với hiệu ứng đang có.

Việc thay đổi hình dạng con trỏ chuột, hiệu ứng chuột là điều khá dễ dàng. Vì hiện nay các tính năng HTML/JavaScript, CSS… cho phép quản trị viên blog/website làm điều đó. Bởi vậy, tôi muốn chia sẻ tới bạn một loại hiệu ứng bong bóng nở ra khi di chuyển chuột.

Có khá nhiều hiệu ứng giúp làm đẹp blog/website, chẳng hạn như: Hiệu ứng trái tim cho chuột, di chuyển theo chuột, chữ chạy theo chuột, hiệu ứng tuyết rơi… Tuy nhiêm, đối với bài viết này, mình sẽ hướng dẫn cho bạn hiệu ứng bong bóng nhé!

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

Vì đa số chúng ta đều sử dụng website mã nguồn WordPress. Bởi vậy, bài viết này mình sẽ chia sẻ cho bạn 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ị website WordPress mà bạn đang quản lý.

Bước 2: Bạn sử dụng đoạn mã code phía dưới đây, sau đó chèn vào những nơi trên website. Có thể chèn ở Header, Sidebar, Footer… Miễn sao website có tính năng cho chèn thêm code thì bạn có thể chèn vào.

<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, thật sự rất đẹp mắt. Đó là bạn hãy xem thành quả sau khi tôi đã thêm hiệu ứng bong bóng khi di chuyển chuột, thay đổi hình dạng con trỏ chuột vào website này của tôi.

Kết luận

Như tôi đã chia sẻ ở đầu bài viết, ngoài việc chia sẻ code hiệu ứng chuột bong bóng. Thì còn có rất 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 tạo tuyết rơi…

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

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