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 :
<script type='text/javascript'>
//<![CDATA[
Date.now||(Date.now=function(){return(new Date).getTime()}),function(){"use strict";for(var t=["webkit","moz"],e=0;e<t.length&&!window.requestAnimationFrame;++e){var i=t[e];window.requestAnimationFrame=window[i+"RequestAnimationFrame"],window.cancelAnimationFrame=window[i+"CancelAnimationFrame"]||window[i+"CancelRequestAnimationFrame"]}if(/iP(ad|hone|od).*OS 6/.test(window.navigator.userAgent)||!window.requestAnimationFrame||!window.cancelAnimationFrame){var s=0;window.requestAnimationFrame=function(t){var e=Date.now(),i=Math.max(s+16,e);return setTimeout(function(){t(s=i)},i-e)},window.cancelAnimationFrame=clearTimeout}}(),function(t){t.snowfall=function(e,i){function s(s,n,a,r){this.x=s,this.y=n,this.size=a,this.speed=r,this.step=0,this.stepSize=h(1,10)/100,i.collection&&(this.target=m[h(0,m.length-1)]);var p=null;i.image?(p=document.createElement("img"),p.src=i.image):(p=document.createElement("div"),t(p).css({background:i.flakeColor})),t(p).attr({"class":"snowfall-flakes"}).css({width:this.size,height:this.size,position:i.flakePosition,top:this.y,left:this.x,fontSize:0,zIndex:i.flakeIndex}),t(e).get(0).tagName===t(document).get(0).tagName?(t("body").append(t(p)),e=t("body")):t(e).append(t(p)),this.element=p,this.update=function(){if(this.y+=this.speed,this.y>l-(this.size+6)&&this.reset(),this.element.style.top=this.y+"px",this.element.style.left=this.x+"px",this.step+=this.stepSize,y===!1?this.x+=Math.cos(this.step):this.x+=y+Math.cos(this.step),i.collection&&this.x>this.target.x&&this.x<this.target.width+this.target.x&&this.y>this.target.y&&this.y<this.target.height+this.target.y){var t=this.target.element.getContext("2d"),e=this.x-this.target.x,s=this.y-this.target.y,n=this.target.colData;if(void 0!==n[parseInt(e)][parseInt(s+this.speed+this.size)]||s+this.speed+this.size>this.target.height)if(s+this.speed+this.size>this.target.height){for(;s+this.speed+this.size>this.target.height&&this.speed>0;)this.speed*=.5;t.fillStyle=o.flakeColor,void 0==n[parseInt(e)][parseInt(s+this.speed+this.size)]?(n[parseInt(e)][parseInt(s+this.speed+this.size)]=1,t.fillRect(e,s+this.speed+this.size,this.size,this.size)):(n[parseInt(e)][parseInt(s+this.speed)]=1,t.fillRect(e,s+this.speed,this.size,this.size)),this.reset()}else this.speed=1,this.stepSize=0,parseInt(e)+1<this.target.width&&void 0==n[parseInt(e)+1][parseInt(s)+1]?this.x++:parseInt(e)-1>0&&void 0==n[parseInt(e)-1][parseInt(s)+1]?this.x--:(t.fillStyle=o.flakeColor,t.fillRect(e,s,this.size,this.size),n[parseInt(e)][parseInt(s)]=1,this.reset())}(this.x+this.size>d-c||this.x<c)&&this.reset()},this.reset=function(){this.y=0,this.x=h(c,d-c),this.stepSize=h(1,10)/100,this.size=h(100*i.minSize,100*i.maxSize)/100,this.element.style.width=this.size+"px",this.element.style.height=this.size+"px",this.speed=h(i.minSpeed,i.maxSpeed)}}function n(){for(r=0;r<a.length;r+=1)a[r].update();p=requestAnimationFrame(function(){n()})}var a=[],o={flakeCount:35,flakeColor:"#ffffff",flakePosition:"absolute",flakeIndex:999999,minSize:1,maxSize:2,minSpeed:1,maxSpeed:5,round:!1,shadow:!1,collection:!1,collectionHeight:40,deviceorientation:!1},i=t.extend(o,i),h=function(t,e){return Math.round(t+Math.random()*(e-t))};t(e).data("snowfall",this);var r=0,l=t(e).height(),d=t(e).width(),c=0,p=0;if(i.collection!==!1){var f=document.createElement("canvas");if(f.getContext&&f.getContext("2d"))for(var m=[],w=t(i.collection),g=i.collectionHeight,r=0;r<w.length;r++){var u=w[r].getBoundingClientRect(),x=t("<canvas/>",{"class":"snowfall-canvas"}),z=[];if(u.top-g>0){t("body").append(x),x.css({position:i.flakePosition,left:u.left+"px",top:u.top-g+"px"}).prop({width:u.width,height:g});for(var v=0;v<u.width;v++)z[v]=[];m.push({element:x.get(0),x:u.left,y:u.top-g,width:u.width,height:g,colData:z})}}else i.collection=!1}for(t(e).get(0).tagName===t(document).get(0).tagName&&(c=25),t(window).bind("resize",function(){l=t(e)[0].clientHeight,d=t(e)[0].offsetWidth}),r=0;r<i.flakeCount;r+=1)a.push(new s(h(c,d-c),h(0,l),h(100*i.minSize,100*i.maxSize)/100,h(i.minSpeed,i.maxSpeed)));i.round&&t(".snowfall-flakes").css({"-moz-border-radius":i.maxSize,"-webkit-border-radius":i.maxSize,"border-radius":i.maxSize}),i.shadow&&t(".snowfall-flakes").css({"-moz-box-shadow":"1px 1px 1px #555","-webkit-box-shadow":"1px 1px 1px #555","box-shadow":"1px 1px 1px #555"});var y=!1;i.deviceorientation&&t(window).bind("deviceorientation",function(t){y=.1*t.originalEvent.gamma}),n(),this.clear=function(){t(".snowfall-canvas").remove(),t(e).children(".snowfall-flakes").remove(),cancelAnimationFrame(p)}},t.fn.snowfall=function(e){return"object"==typeof e||void 0==e?this.each(function(i){new t.snowfall(this,e)}):"string"==typeof e?this.each(function(e){var i=t(this).data("snowfall");i&&i.clear()}):void 0}}(jQuery);
$(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 :
<!--code Dolar roi--> <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> <!--Het code Dolar roi-->
//<![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>
<!-- Ruồi end -->