Code hiệu ứng 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 trở nên thú vị hơn. Thay đổi hiệu ứng của con trỏ chuột là điều bạn có thể tận dụng, nếu muốn website/blog có sự độc lạ trong mắt độc giả.

Hiện nay các tính năng 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 kiểu hiệu ứng để làm đẹp website, có thể kể đến như: 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 muốn sẽ chia sẻ cho các bạn loại hiệu ứng bong bóng rất đẹp khi di chuyển chuột trên website.

Thêm code hiệu ứng chuột bong bóng 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 vị trí bất kỳ trên trang web. Bằng cách tạo một widget “HTML Tùy chỉnh” trong trang web WordPress bạn đang quản lý để 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: Nếu bạn chèn mà thấy hiệu ứng chuột bong bóng đã xuất hiện khi di chuyển chuột, thì bạn đã thành công. Nhưng trường hợp mà chèn xong vẫn không thấy xuất hiện, thì lúc này bạn cần delete cache website WordPress, cache của trình duyệt hoặc bật chế độ ẩn danh (Ctrl + Shift + N) để kiểm tra cho chuẩn xác nhất.

Cũng giống như 25 trang web giải trí thư giãn. Tạo bong bóng nở ra trên website thì bạn cũng chỉ muốn giải trí cho vui mà thôi. Bạn có thể xem chi tiết cách thực hiện thêm hiệu ứng bong bóng khi rê chuột trên website WordPress, tại video dưới đây:

Kết luận

Như đã chia sẻ thì ngoài việc 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: Code chữ chạy theo con trỏ chuột, code hiệu ứng đẹp khi click chuột… Hoặc những vấn đề liên quan đến tạo hiệu ứng 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 là rất nhiều, hoặc sử dụng các 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 hiệu ứng thì độc giả vào website cũng dễ bị kích thích bởi sự độc đáo trên nền website của bạn. Điều này khiến họ muốn ở lại website của bạn lâu hơn, nhằm nô đùa với những hiệu ứng độc đáo. Chúc bạn thành công!