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.

hiệu ứng đẹp khi click chuột

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

code hiệu ứng cho web

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.

code con trỏ chuột đẹp

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>
Cách chèn thời gian vào website WordPress. Cách chèn Fanpage Facebook 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 đố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 vào lúc 10:21 ngày 13/08/2020 

Có thể bạn quan tâm?

GIỚI THIỆU: LÂM SINH

Trang web này được mình thành lập để mong muốn chia sẻ nhiều kiến thức hữu ích đến với mọi người. Nếu bạn đang gặp khó khăn trong quá trình tìm hiểu bài viết và cần sự giúp đỡ, thì có thể để lại comment phía dưới mỗi bài viết để mình có thể hỗ trợ cho bạn được tốt nhất. Cảm ơn các bạn đã đón đọc những bài viết trên website.

3
Bình luận trong bài viết này. Bạn đọc phản hồi vui lòng gõ tiếng Việt có dấu. Xin cảm ơn!

avatar
Mới nhất Cũ nhất
Tuấn
Độc giả
Tuấn

công nhận giúp web thêm đẹp, nhưng sợ người dùng họ k thích

TrungAZ
Độc giả
TrungAZ

Có plugin nào cho WP ko ta? Copy nhiều code quá ngại :v