Code hiệu ứng bong bóng cực đẹp khi di chuyển chuột cho blogspot - Insurance Finances

Code hiệu ứng bong bóng cực đẹp khi di chuyển chuột cho blogspot

Thêm code hiệu ứng chuột vào trang Blogspot của bạn sẽ làm cho trang blog của bạn 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 blog của bạn trở nên đẹp hơn, sinh động hơn. 

Giờ đây, các tính năng HTML, CSS, JavaScript ... cho phép người quản trị website / blog thêm các hiệu ứng click chuột, hình con trỏ ... Có rất nhiều hiệu ứng hay ho có thể kể đến như: hiệu ứng trái tim, chạy chữ theo chuột, hiệu ứng bong bóng, giáng sinh, năm mới ... 

Trong bài viết này, mình sẽ chia sẻ code Code hiệu ứng bong bóng cực đẹp khi di chuyển chuột cho blogspot các bạn có thể tham khảo để trang trí blog của mình.

{tocify} $title={Contents}

Các bước thực hiện:

• Bước 1: Đăng nhập vào Blogger
• Bước 2: Ấn vào chủ đề ➤ Chỉnh sửa HTML
• Bước 3: Bạn hãy copy đoạn code dưới đây, rồi chèn phía trên thẻ đóng </head>

<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>

• Bước 4: Lưu lại và xem kết quả.

Bạn có thể xem demo qua đoạn video ngắn bên dưới.

Lời kết

Hiệu ứng bong bóng giúp trang web sinh động hơn. Và nó cũng giúp bạn và những người khác cảm thấy thư giãn khi xem nội dung trang blog.

Như vậy, mình đã chia sẻ cho các bạn Code hiệu ứng bong bóng cực đẹp khi di chuyển chuột cho blogspot. Nếu các bạn thấy hay thì hãy đánh giá bài viết nhé. Mọi thắc mắc hay vấn đề bản quyền vui lòng comment bên dưới. Chúc các bạn thành công.

Related Posts