Thêm code hiệu ứng chuột vào website WordPress sẽ làm cho trang web trở nên độc đáo hơn. Thay đổi hiệu ứng con trỏ chuột là điều bạn có thể áp dụng để làm cho website/blog có sự mới lạ.
Hiện nay, các tính năng HTML, CSS, JavaScript… cho phép quản trị viên website/blog có thể bổ sung 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, hiệu ứng bong bóng, giáng sinh, năm mới…
Nhưng đối với 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 rất ấ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 đều sử dụng mã nguồn WordPress. Cho nên, BkViet 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.
Bước 3: Tiếp theo, nhấn file header.php
Bước 4: Copy toàn bộ mã code dưới đây, rồi chèn vào phía trên thẻ đóng </head> của mẫu HTML trang web của bạn. 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:
Bước 5: Nếu hiệu ứng bong bóng đã xuất hiện tức là bạn đã thành công với thủ thuật này. Nhưng nếu chưa thấy, 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ệu ứng đã hiện lên chưa nhé.
Hiệu ứng bong bóng có tác dụng giúp làm cho website trở nên sinh động hơn. Và nó còn giúp chính bạn và mọi người cảm thấy thư giãn khi xem các nội dung trên website. Bởi hiện nay mọi người có vẻ khá lười đọc bài viết, mà thay vào đó là các nội dung Podcast, video.
Hãy 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ư đã nói, ngoài chia sẻ cho bạn 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 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) là rất nhiều, có chứa những tính năng hay ho 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 họ ở lại website lâu hơn, để thư giãn với những hiệu ứng chuột đẹp này. Chúc bạn thành công!
