Thêm code hiệu ứng chuột vào website sẽ làm website trở nên độc lạ hơn. Thay đổi hiệu ứng con trỏ chuột là điều bạn có thể làm để giúp website/blog có sự mới lạ.
Hiện nay, các tính năng HTML, CSS, JavaScript… cho phép chúng ta dễ dàng 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….
Đối với bài viết này, BkViet.Com muốn chia sẻ cho bạn đoạn mã code hiệu ứng bong bóng khi chuột di chuyển trên website, rất đẹp mắt.
Thêm code hiệu ứng chuột bong bóng vào website WordPress
Đa số website hiện nay đều sử dụng mã nguồn WordPress. Cho nên, 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 WordPress.
Bước 1: Đầu tiên, bạn đăng nhập vào trang quản trị website WordPress của bạn.
Bước 2: Tại phần Giao diện, click Sửa giao diện.
Bước 3: Tiếp theo, nhấn vào file header.php
Bước 4: Copy toàn bộ mã code dưới đây, sau đó chèn vào phía trên thẻ đóng </head> của khối code file header.php. 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: Lúc này, bạn cần truy cập vào một bài viết bất kỳ trên trang web của bạn thì hiệu ứng bong bóng sẽ xuất hiện.
Trường hợp mà chưa thấy hiện thì bạn nhấn tổ hợp phím Ctrl + F5 để load lại trang nhé.
Hiệu ứng bong bóng giúp website trở nên thú vị hơn khi người đọc bài viết trên website. Nó còn giúp chính bạn cảm thấy được thư giãn mỗi khi truy cập vào website của mình.
Kết luận
Như đã đề cập, ngoài chia sẻ code hiệu ứng bong bóng để thay đổi hình dạng con trỏ chuột khi truy cập vào website. Thì còn có nhiều hiệu ứng khác cho WordPress như: Chữ chạy theo chuột, hiệu ứng khi click chuột, hiệu ứng tuyết rơi… Bạn sẽ dễ dàng tìm kiếm những hiệu ứng này trên mạng rất nhiều. Đó là những đoạn mã code, plugin.
Bên cạnh đọc nội dung bài viết, khi độc giả di chuyển chuột thấy xuất hiện hiệu ứng đẹp mắt thì họ cũng cảm thấy được thư giãn. Và như vậy họ sẽ ở lại website của bạn lâu hơn. Đây cũng là một điểm để giúp tăng thứ hạng bài viết của bạn.
