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 độc đáo hơn. Thay đổi hiệu ứng con trỏ chuột là điều bạn có thể chèn vào, để giúp website/blog có sự mới lạ.

Hiện nay các tính năng của 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 khi chuột di chuyển trên website khá ấn tượng.

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

Đa số các website hiện nay sử dụng mã nguồn WordPress. Bởi vậy, mình sẽ hướng dẫn cho các 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 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>

Xem bài viết: Cách chèn thời gian vào website WordPress.

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

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

Bạn 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ẻ cho bạn 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, Plugin) thấy rất nhiều, có chứa 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ả cũng dễ bị kích thích bởi sự độc đáo trên website. Điều này sẽ khiến độc giả ở lại website lâu hơn, để thư giãn với những hiệu ứng chuột đẹp. Chúc bạn thành công!

Bài viết đăng lần đầu 12/2019, cập nhật & chỉnh sửa 01/2021