Thêm code hiệu ứng chuột vào website WordPress sẽ làm cho website trở nên độc đáo hơn. Thay đổi hiệu ứng con trỏ chuột là điều bạn có thể thực hiện, để giúp website/blog có sự mới lạ.
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 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 đều sử dụng mã nguồn WordPress. Cho nên, 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 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 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 thủ thuật này. Nhưng trường hợp mà 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 giúp 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 (theo quan điểm của tôi).
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ư đã 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. 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!
