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

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

Bộ link hình đề nghị :

Bộ hình hoa mai :

  1. https://4.bp.blogspot.com/-Pz9gplYXnVg/WHeI3NW2o0I/AAAAAAAACfM/bQhjTtpeZeIC2vMKRYN6u5do6HppGIkwACLcB/s1600/hoamai1.png
  2. https://1.bp.blogspot.com/-groQ9fqAtWk/WHeI6IN-bUI/AAAAAAAACfU/RC2RXr75qDAZKOsmSEqNeb_OyhFQ5gH8ACLcB/s1600/hoamai2.png
  3. https://2.bp.blogspot.com/-4npl186jl6A/WHeI3c_516I/AAAAAAAACfQ/9DbJuPWlz9I1i7836YHLoJR_NSAFDn3fACLcB/s1600/hoamai3.png

Bộ hình lá :

  1. https://media1.giphy.com/media/gKNRSqYNCef3k2G93g/source.gif
  2. https://media1.giphy.com/media/jRAjwsu9gSP8cUU38w/source.gif
  3. 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://1.bp.blogspot.com/-XfW45hU5IGs/YAvSMjUcX8I/AAAAAAAAChU/SZ3guFISv3wJnH3lUe6_NFmhxCvW3WPNACLcBGAsYHQ/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-->

3. Hiệu ứng ruồi bò trên Blog : 
<!-- Ruồi start --> <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://1.bp.blogspot.com/-gw4ADu38VZI/VtDSJWxpBVI/AAAAAAAAClo/LfFRNfLD6YQ/s1600/flies.png", "Long ruồi");
break;
case 2:
var fly = new Fly("test", "Nhặng", "Xanh", height_fly, width_fly, 0, 0, "https://2.bp.blogspot.com/-RJWSmB7LWCs/VtDQbezMLkI/AAAAAAAAClc/4BMD7iBSQzw/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://1.bp.blogspot.com/-O6lAftMxB50/VtDQbAdt1hI/AAAAAAAAClY/v-9OEzMS1VQ/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://1.bp.blogspot.com/-Q7Lzc5UOMJg/VtDQbJjA-KI/AAAAAAAAClU/11UJMD7hf4k/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://2.bp.blogspot.com/-RJWSmB7LWCs/VtDQbezMLkI/AAAAAAAAClc/4BMD7iBSQzw/s1600/style_1.png", "King ruồi");
// var fly3 = new Fly("test", "Nhặng", "Tuyệt sắc", 0, 0, 0, 0, "https://1.bp.blogspot.com/-O6lAftMxB50/VtDQbAdt1hI/AAAAAAAAClY/v-9OEzMS1VQ/s1600/style_2.png","Tom ruồi");
// var fly4 = new Fly("test", "Nhặng", "Hồng", 0, 0, 0, 0, "https://1.bp.blogspot.com/-Q7Lzc5UOMJg/VtDQbJjA-KI/AAAAAAAAClU/11UJMD7hf4k/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 -->
Digitalnomad.vn : Thiết Kế Web đa cấu trúc, trải nghiệm viết blog đa nội dung, Koc Content truyền thông cho chính mình, xây dựng hệ thống kiếm tiền tự động online, đa dạng nguồn tài chính từ việc kiến tạo các thu nhập thụ động trên internet. Gia Bảo, Blogger viết vì đam mê, chia sẻ kỹ thuật giúp bạn biến các thiết bị công nghệ kết nối internet, thành cỗ máy MMO khai thác mỏ vàng trực tuyến, các thức giúp chúng ta chạm tay vào 'tự do tài chính'.

Chủ Đề Nổi Bật :


Sponsor

1. thotgo.asia
2. goghepthanh.com
3. dichvuketoannasa.com
4. remcuakimanh.vn