Code hiệu ứng gây sự chú ý cho Blog

1. Code hiệu ứng bộ 3 cái gì đó rơi trên web :

Code :

$(document).ready(function(){
$(document).snowfall({image :"Link-hinh-1", minSize: 10, maxSize:32, flakeCount: 25});
$(document).snowfall({image :"Link-hinh-2", minSize: 10, maxSize:32, flakeCount: 20});
$(document).snowfall({image :"Link-hinh-3", minSize: 10, maxSize:32, flakeCount: 20});
});
//]]>
</script>

Thay thế link hình cần "rơi" của bạn vào vị trí :

Link-hinh-1
Link-hinh-2
Link-hinh-3

Bộ link hình đề nghị :

Bộ hình hoa mai :

https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjRRFeGNYD3kjhywVk1sEpCLtNEnvI8HQW6bSa2ZRdGTvHJ8AoUjisxYsVchkfmCN7-DzLp0PnbBpa9dQWk3OwKVKmDdl7RUx9CicHDUz4xpRipBn8rxJ8DIlDLSJMzISnh3nxkp6KbHCU/s1600/hoamai1.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgrD_wiEPww01WXICXkFrXS4wWNf_gpVNrSurgaJBul3VvW6QaDj68CBZdgVt6FSzxCoHRgHZIb8hmycKQ5oVpUtUo5E62Kld_1eHxgb4XcUHXFI3Rr-UuSIKlqPy8qoqtPGXluP0iUUzc/s1600/hoamai2.png
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgEOmH96rZsv781MvjG3v-V7M9x4BGn0fMo_YxH3IwuIx3CdhBpQkKGIsjwftxiRE8RH7WmUcn09QcXyA4DYhFqbQjhZSSOXHjwEwbWaEsFx_d0inZafyo6U-DPFBzfST_Xt4uGiPXwKsU/s1600/hoamai3.png

Bộ hình lá :

https://media1.giphy.com/media/gKNRSqYNCef3k2G93g/source.gif
https://media1.giphy.com/media/jRAjwsu9gSP8cUU38w/source.gif
https://media1.giphy.com/media/Su0tjv0X0DWRIWh1bW/giphy.gif

2. Hiệu ứng DoLar rơi :

được chỉnh sửa từ code hiệu ứng hoa đào, hoa mai, tuyết rơi - hiệu ứng chỉ dùng trong những ngày tết, còn hiệu ứng tiền rơi, sài cả năm không cần thay hiệu ứng mới :

<script type='text/javascript'> //<![CDATA[ var pictureSrc ="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj2QV9kUqyrIF6N7Twg8YxWnbhutzSvBiqVLjDWVpj_RRyrtzrW4_03zYlBfeWZe0h5h_VYrh_3eZHYyzDy9RimAxZ6RNNVDop6xuMPod-c10ETafho1uhh7fAZT-sCpXGsxf3oO-biNbY/s0/dolaS8a3.jpg"; //the location of the snowflakes var pictureWidth = 15; //the width of the snowflakes var pictureHeight = 15; //the height of the snowflakes var numFlakes = 10; //the number of snowflakes var downSpeed = 0.01; //the falling speed of snowflakes (portion of screen per 100 ms) var lrFlakes = 10; //the speed that the snowflakes should swing from side to side if( typeof( numFlakes ) != 'number' || Math.round( numFlakes ) != numFlakes || numFlakes < 1 ) { numFlakes = 10; } //draw the snowflakes for( var x = 0; x < numFlakes; x++ ) { if( document.layers ) { //releave NS4 bug document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>'); } else { document.write('<div style="position:absolute; z-index:9999;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>'); } } //calculate initial positions (in portions of browser window size) var xcoords = new Array(), ycoords = new Array(), snFlkTemp; for( var x = 0; x < numFlakes; x++ ) { xcoords[x] = ( x + 1 ) / ( numFlakes + 1 ); do { snFlkTemp = Math.round( ( numFlakes - 1 ) * Math.random() ); } while( typeof( ycoords[snFlkTemp] ) == 'number' ); ycoords[snFlkTemp] = x / numFlakes; } //now animate function flakeFall() { if( !getRefToDivNest('snFlkDiv0') ) { return; } var scrWidth = 0, scrHeight = 0, scrollHeight = 0, scrollWidth = 0; //find screen settings for all variations. doing this every time allows for resizing and scrolling if( typeof( window.innerWidth ) == 'number' ) { scrWidth = window.innerWidth; scrHeight = window.innerHeight; } else { if( document.documentElement && (document.documentElement.clientWidth ||document.documentElement.clientHeight ) ) { scrWidth = document.documentElement.clientWidth; scrHeight = document.documentElement.clientHeight; } else { if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) { scrWidth = document.body.clientWidth; scrHeight = document.body.clientHeight; } } } if( typeof( window.pageYOffset ) == 'number' ) { scrollHeight = pageYOffset; scrollWidth = pageXOffset; } else { if( document.body && ( document.body.scrollLeft ||document.body.scrollTop ) ) { scrollHeight = document.body.scrollTop;scrollWidth = document.body.scrollLeft; } else { if(document.documentElement && (document.documentElement.scrollLeft ||document.documentElement.scrollTop ) ) { scrollHeight =document.documentElement.scrollTop; scrollWidth =document.documentElement.scrollLeft; } } } //move the snowflakes to their new position for( var x = 0; x < numFlakes; x++ ) { if( ycoords[x] * scrHeight > scrHeight - pictureHeight ) { ycoords[x] = 0; } var divRef = getRefToDivNest('snFlkDiv'+x); if( !divRef ) { return; } if( divRef.style ) { divRef = divRef.style; } var oPix = document.childNodes ? 'px' : 0; divRef.top = ( Math.round( ycoords[x] * scrHeight ) + scrollHeight ) + oPix; divRef.left = ( Math.round( ( ( xcoords[x] * scrWidth ) - (pictureWidth / 2 ) ) + ( ( scrWidth / ( ( numFlakes + 1 ) * 4 ) ) * (Math.sin( lrFlakes * ycoords[x] ) - Math.sin( 3 * lrFlakes * ycoords[x]) ) ) ) + scrollWidth ) + oPix; ycoords[x] += downSpeed; } } //DHTML handlers function getRefToDivNest(divName) { if( document.layers ) { return document.layers[divName]; } //NS4 if( document[divName] ) { return document[divName]; } //NS4 also if( document.getElementById ) { return document.getElementById(divName); } //DOM (IE5+, NS6+, Mozilla0.9+, Opera) if( document.all ) { return document.all[divName]; } //Proprietary DOM - IE4 return false; } window.setInterval('flakeFall();',100); //]]> </script>

3. Hiệu ứng ruồi bò trên Blog :

<script type='text/javascript'>
//<![CDATA[
function Fly(fid, type, color, sh, sw, x, y, fly_img, name) {
if (typeof fly_img == "undefined" || fly_img == '') {
var fly_img = "image/flies.png";
}
if (typeof sh == "undefined" || sh == 0 || typeof sw == "undefined" || sw == 0) {
if (typeof(window.innerWidth) == 'number') {
var sw = window.innerWidth;
var sh = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { var sw = document.documentElement.clientWidth;
var sh = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
var sw = document.body.clientWidth;
var sh = document.body.clientHeight;
};
}
var f = document.createElement("DIV");
var offset = 200;
var offsetb = 250;
var caminando = true;
if (typeof x == "undefined" || x == 0 || typeof y == "undefined" || y == 0) {
var x = 0;
var y = 0;
if(Math.random() < 0.5){
if(Math.random() < 0.5){
var x = 5;
} else {
var x = (sw-50);
}
var y = Math.round(Math.random()*(sh-50));
} else {
if(Math.random() < 0.5){
var y = 5;
} else {
var y = (sh-50);
}
var x = Math.round(Math.random()*(sw-50));
}
}
if (typeof xx == "undefined" || xx == 0) {
var xx = 3;
}
if (typeof yy == "undefined" || yy == 0) {
var yy = 3;
}
this.movestep = 30;
this.type = type;
this.name = name;
this.color = color;
this.fid = fid;
this.move_strange = false;
if (Math.random() < 0.5) {
this.gender = "Ã„ÂÃ¡Â»Â±c";
} else {
this.gender = "CÄ‚Â¡i";
}
f.title = this.name + "nLoÃ¡ÂºÂ¡i: "+this.type+"nMÄ‚ u sÃ¡ÂºÂ¯c: "+this.color+"nGiÃ¡Â»â€ºi tÄ‚Ânh: "+this.gender;
f.id = fid;
f.style.width = "50px";
f.style.height = "50px";
f.style.backgroundImage = "url(" + fly_img + ")";
f.style.backgroundPosition = "0px -" + offset + "px";
f.style.position = "absolute";//"absolute";
f.style.left = Math.round(x) + "px";
f.style.top = Math.round(y) + "px";
f.style.zIndex = 9999;
f.style.cursor = "pointer";
f.style.cursor = "url('/images/xit_muoi.png'), auto;";
var parent = this;
f.addEventListener('click',function(){
parent.flying();
},false);
document.body.appendChild(f);
this.setmove = function(id) {
var parent = this;
if (!parent.move_strange){
if (y >= (sh-50) || Math.random() < 0.005) {
yy = -yy;
c();
} else if (y <= 1 || Math.random() < 0.005) {
yy = -yy;
c();
}
if (x >= (sw-50) || Math.random() < 0.005) {
xx = -xx;
c();
} else if (x <= 1 || Math.random() < 0.005) {
xx = -xx;
c();
}
}
x = x + xx;
y = y + yy;
f.style.left = Math.round(x) + "px";
f.style.top = Math.round(y) + "px";
if (Math.random() < 0.05) {
clearInterval(id);
id = setInterval(function() {
parent.p(id)
}, this.movestep);
caminando = false;
showOffset(offset);
} else {
if (caminando) {
caminando = false;
showOffset(offset);
} else {
caminando = true;
showOffset(offsetb);
}
}
};
this.p = function(id, movestep) {
var parent = this;
if (Math.random() < 0.075) {
clearInterval(id);
id = setInterval(function() {
parent.setmove(id)
}, parent.movestep);
}
};
function c() {
if (yy < 0) {
if (xx < 0) {
offset = 100;
offsetb = 150;
} else {
offset = 0;
offsetb = 50;
}
} else if (xx < 0) {
offset = 300;
offsetb = 350;
} else {
offset = 200;
offsetb = 250;
}
};
function showOffset(o) {
f.style.backgroundPosition = "0px -" + o + "px";
}
this.move = function() {
var parent = this;
var id = setInterval(function() {
parent.setmove(id);
}, parent.movestep);
}
this.flying = function() {
this.movestep = 0;
var parent = this;
timeout = Math.random() * (5000 - 2500) + 2500;
setTimeout(function(){
parent.movestep = 30;
},timeout);
}
this.moveout = function(){
var parent = this;
var outw = 0; var outh = 0;
if (typeof(window.innerWidth) == 'number') {
var outw = window.innerWidth;
var outh = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { var outw = document.documentElement.clientWidth;
var outh = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
var outw = document.body.clientWidth;
var outh = document.body.clientHeight;
};
parent.move_strange = true;
var hide = setInterval(function(){
if (y >= outh-50 || x >= outw-50 || y <= 0 || x <= 0){
$("#"+parent.fid).hide();
parent.move_strange = false;
clearInterval(hide);
}
}, 30);
}
this.goback = function(){
var parent = this;
var outw = 0; var outh = 0;
if (typeof(window.innerWidth) == 'number') {
var outw = window.innerWidth;
var outh = window.innerHeight;
} else if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) { var outw = document.documentElement.clientWidth;
var outh = document.documentElement.clientHeight;
} else if (document.body && (document.body.clientWidth || document.body.clientHeight)) {
var outw = document.body.clientWidth;
var outh = document.body.clientHeight;
};
parent.move_strange = true;
var show = setInterval(function(){
if (y >= outh-50 || x >= outw-50 || y <= 0 || x <= 0){ $("#"+parent.fid).show();
parent.move_strange = false;
clearInterval(show);
}
}, 30);
}
}
$(document).ready(function() {
var this_js_script = $('script[src*=flies-obj]');
// var var_1 = 0;
// alert(var_1);
var var_1 = this_js_script.attr('var_1');// bat tat ruoi
// alert(var_1);
var var_2 = this_js_script.attr('var_2');// nhiu ruoi
var var_3 = this_js_script.attr('var_3');// nhiu ruoi
// var var_3 = this_js_script.attr('var_3');// loai ruoi
// alert(var_2);
if(var_3 == 'true'){
var height_fly = 170;
var width_fly = 1000;
}else{
var height_fly = 0;
var width_fly = 0;
}
if(var_1 == 'false'){
return false;
}
var value = Math.floor(Math.random() * 4) + 1 ;
// alert(value);
switch (value) {
case 1:
var fly = new Fly("test", "NhÃ¡ÂºÂ·ng", "Ã„Âen", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGGQJbYJ-D_lSKvG8qYQemnYuQzZROZakU-vZIm2oBQ1q6KsaDKKdwAY2SEmmRwQyUlbL35ciB_Krb1Q9x1sN8UrD65SfwPadME2NCvXhpofdmlwq9il4Cm5Fz6vsrQetn2RgfF_cA7_0/s1600/flies.png", "Long ruÃ¡Â»â€œi");
break;
case 2:
var fly = new Fly("test", "NhÃ¡ÂºÂ·ng", "Xanh", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnp8xyWNVc9rXqZ_rbcqr1RmHn6QHyqyhlSbQPowdaTgSzBbgpN_mUk7esHWGESbs4VQbyhpBU9cdM1Gl-uVt4DpxUKFfQZa-BFpJZA_yiChYFKTPsOvNCPLX3PGeI0y4xtHoDcakSJg/s1600/style_1.png", "King ruÃ¡Â»â€œi");
break;
case 3:
var fly = new Fly("test", "NhÃ¡ÂºÂ·ng", "TuyÃ¡Â»â€¡t sÃ¡ÂºÂ¯c", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1XhZTxvjClbP_Fx26gmAPNqctx6hwOh7UYWgXy2BR2LD8t-C9T-B5ogcyrGBNv-QxAoBktwGA3SERlURa5uPuk9iAUuS6CF6YWZUIcBvUf6r9a41gvZklFu5jYZSdyTeqQgCSP9F3XA/s1600/style_2.png","Tom ruÃ¡Â»â€œi");
break;
case 4:
var fly = new Fly("test", "NhÃ¡ÂºÂ·ng", "HÃ¡Â»â€œng", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhah9s28D-Q4AgcmytB5R5vn7IE8ywZu_GS9PzXJ31W6lWhLOtFdn9lUBh2uye_zeP1IVvPULBrs3jh59FCl4tbTpknInwdOTeOmsgh25SDHbZ_LM8egq2zB-gipjzqxgYSNhNaaBdNh5w/s1600/style_3.png", "Queen ruÃ¡Â»â€œi");
break;
}
fly.move();
if(var_2 == 'true'){
var fly2 = new Fly("test", "NhÃ¡ÂºÂ·ng", "Xanh", height_fly, width_fly, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjhnp8xyWNVc9rXqZ_rbcqr1RmHn6QHyqyhlSbQPowdaTgSzBbgpN_mUk7esHWGESbs4VQbyhpBU9cdM1Gl-uVt4DpxUKFfQZa-BFpJZA_yiChYFKTPsOvNCPLX3PGeI0y4xtHoDcakSJg/s1600/style_1.png", "King ruÃ¡Â»â€œi");
// var fly3 = new Fly("test", "NhÃ¡ÂºÂ·ng", "TuyÃ¡Â»â€¡t sÃ¡ÂºÂ¯c", 0, 0, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_1XhZTxvjClbP_Fx26gmAPNqctx6hwOh7UYWgXy2BR2LD8t-C9T-B5ogcyrGBNv-QxAoBktwGA3SERlURa5uPuk9iAUuS6CF6YWZUIcBvUf6r9a41gvZklFu5jYZSdyTeqQgCSP9F3XA/s1600/style_2.png","Tom ruÃ¡Â»â€œi");
// var fly4 = new Fly("test", "NhÃ¡ÂºÂ·ng", "HÃ¡Â»â€œng", 0, 0, 0, 0, "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhah9s28D-Q4AgcmytB5R5vn7IE8ywZu_GS9PzXJ31W6lWhLOtFdn9lUBh2uye_zeP1IVvPULBrs3jh59FCl4tbTpknInwdOTeOmsgh25SDHbZ_LM8egq2zB-gipjzqxgYSNhNaaBdNh5w/s1600/style_3.png", "Queen ruÃ¡Â»â€œi");
fly2.move();
fly2.flying();
// fly3.move();
// fly4.move();
// fly4.flying();
}
$("#btnMove").click(function() {
fly.move();
fly2.move();
fly3.move();
});
$("#btnFlying").click(function() {
fly.flying();
});
$("#btnHide").click(function() {
fly.moveout();
});
$("#btnShow").click(function() {
fly.goback();
});
});
//]]>
</script>