Thủ thuật blogspot - Dautoblog

Hoa Mai Rơi Cho Blogspot

Hoa Mai Rơi Cho Blogspot
Thực ra đây là code tạo tuyết rơi trên blogspot nhưng mình đã chỉnh sửa lại(thay link ảnh) để bạn nào có nhu cầu trang trí blog của mình nhân dịp tết nguyên đán thì có thể lấy dùng ngay.
Cũng nên tìm hiểu chút ít về hoa mai:
Hoa mai trong tiếng Việt có thể là:
Mai vàng (Ochna integerrima, Họ Mai vàng (Ochnaceae): Loại hoa Tết truyền thống ở miền Nam Việt Nam.
Hoa của Mơ ta (Prunus mume, họ Hoa hồng (Rosaceae): Một loài cây trồng làm cảnh và lấy quả ở Trung Quốc, Nhật Bản, Triều Tiên và miền Bắc Việt Nam.
Áp dụng vào blogspot

Có hai code:
Code 1 dễ áp dụng,nhẹ nhàng nhưng sự bảng lảng của cánh hoa không được đẹp lắm.

DEMO

Code 2 phải cài đặt trong mẫu,hơi nặng nhưng hoa rơi rất đẹp.

DEMO

Cài đặt
Code 1
Với code này bạn chỉ cần vào bố cục và tiến hành thêm một tiện ích javascript/HTML dán code bên dưới vào và lưu lại là xong
Code:
<script type='text/javascript'>
//<![CDATA[
var SNOW_Picture="http://1.bp.blogspot.com/-aZQXzUqSw5E/VKdQ-NZEaxI/AAAAAAAAB9U/3Cj3b3PLygk/s1600/hoa-mai.png";//Bông hoa mai
var SNOW_no=10;//Số lượng bông hoa mai rơi
var SNOW_browser_IE_NS=(document.body.clientHeight)?1:0;
var SNOW_browser_MOZ=(self.innerWidth)?1:0;
var SNOW_browser_IE7=(document.documentElement.clientHeight)?1:0;
var SNOW_Time;
var SNOW_dx,SNOW_xp,SNOW_yp;
var SNOW_am,SNOW_stx,SNOW_sty;
var i,SNOW_Browser_Width,SNOW_Browser_Height;if(SNOW_browser_IE_NS){SNOW_Browser_Width=document.body.clientWidth;SNOW_Browser_Height=document.body.clientHeight;}else{if(SNOW_browser_MOZ){SNOW_Browser_Width=self.innerWidth-20;SNOW_Browser_Height=self.innerHeight;}else{if(SNOW_browser_IE7){SNOW_Browser_Width=document.documentElement.clientWidth;SNOW_Browser_Height=document.documentElement.clientHeight;}}}SNOW_dx=new Array();SNOW_xp=new Array();SNOW_yp=new Array();SNOW_am=new Array();SNOW_stx=new Array();SNOW_sty=new Array();for(i=0;i<SNOW_no;++i){SNOW_dx[i]=0;SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-50);SNOW_yp[i]=Math.random()*SNOW_Browser_Height;SNOW_am[i]=Math.random()*20;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();if(i==0){document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>
');}else{document.write('<\div id="SNOW_flake'+i+'" style="position: fixed; z-index: '+i+'; visibility: visible; top: 15px; left: 15px;"><img src="'+SNOW_Picture+'" border="0"></div>
');}}function SNOW_Weather(){for(i=0;i<SNOW_no;++i){SNOW_yp[i]+=SNOW_sty[i];if(SNOW_yp[i]>SNOW_Browser_Height-50){SNOW_xp[i]=Math.random()*(SNOW_Browser_Width-SNOW_am[i]-30);SNOW_yp[i]=0;SNOW_stx[i]=0.02+Math.random()/10;SNOW_sty[i]=0.7+Math.random();}SNOW_dx[i]+=SNOW_stx[i];document.getElementById("SNOW_flake"+i).style.top=SNOW_yp[i]+"px";document.getElementById("SNOW_flake"+i).style.left=SNOW_xp[i]+SNOW_am[i]*Math.sin(SNOW_dx[i])+"px";}SNOW_Time=setTimeout("SNOW_Weather()",20);}SNOW_Weather();
//]]>
</script>
Code 2
Với code này bạn cần vào chỉnh sửa HTML trong mẫu và dán đoạn code bên dưới vào trước thẻ </body>
Code:
<script type='text/javascript'>
//<![CDATA[
function flakeFall(){if(!getRefToDivNest("snFlkDiv0")){return}var e=0,t=0,n=0,r=0;if(typeof window.innerWidth=="number"){e=window.innerWidth;t=window.innerHeight}else{if(document.documentElement&&(document.documentElement.clientWidth||document.documentElement.clientHeight)){e=document.documentElement.clientWidth;t=document.documentElement.clientHeight}else{if(document.body&&(document.body.clientWidth||document.body.clientHeight)){e=document.body.clientWidth;t=document.body.clientHeight}}}if(typeof window.pageYOffset=="number"){n=pageYOffset;r=pageXOffset}else{if(document.body&&(document.body.scrollLeft||document.body.scrollTop)){n=document.body.scrollTop;r=document.body.scrollLeft}else{if(document.documentElement&&(document.documentElement.scrollLeft||document.documentElement.scrollTop)){n=document.documentElement.scrollTop;r=document.documentElement.scrollLeft}}}for(var i=0;i<numFlakes;i++){if(ycoords[i]*t>t-pictureHeight){ycoords[i]=0}var s=getRefToDivNest("snFlkDiv"+i);if(!s){return}if(s.style){s=s.style}var o=document.childNodes?"px":0;s.top=Math.round(ycoords[i]*t)+n+o;s.left=Math.round(xcoords[i]*e-pictureWidth/2+e/((numFlakes+1)*4)*(Math.sin(lrFlakes*ycoords[i])-Math.sin(3*lrFlakes*ycoords[i])))+r+o;ycoords[i]+=downSpeed}}function getRefToDivNest(e){if(document.layers){return document.layers[e]}if(document[e]){return document[e]}if(document.getElementById){return document.getElementById(e)}if(document.all){return document.all[e]}return false}var pictureSrc="http://1.bp.blogspot.com/-aZQXzUqSw5E/VKdQ-NZEaxI/AAAAAAAAB9U/3Cj3b3PLygk/s1600/hoa-mai.png";var pictureWidth=20;var pictureHeight=20;var numFlakes=10;var downSpeed=.01;var lrFlakes=10;if(typeof numFlakes!="number"||Math.round(numFlakes)!=numFlakes||numFlakes<1){numFlakes=10}for(var x=0;x<numFlakes;x++){if(document.layers){document.write('<layer id="snFlkDiv'+x+'"><imgsrc="'+pictureSrc+'" height="'+pictureHeight+'"width="'+pictureWidth+'" alt="*" border="0"></layer>')}else{document.write('<div style="position:absolute;"id="snFlkDiv'+x+'"><img src="'+pictureSrc+'"height="'+pictureHeight+'" width="'+pictureWidth+'" alt="*"border="0"></div>')}}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}window.setInterval("flakeFall();",100)//]]>
</script>
Bạn nào thích hoa đào thì tìm cánh hoa đào png thay thế vào link ảnh trong code hoặc dùng tạm

Code 3
Đây là code hoa mai rơi với nhiều loại cánh hoa cụ thể là hình ảnh:
- 1 bông hoa mai
- Cánh hoa mai lớn
- Cánh hoa mai nhỏ
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 :"https://4.bp.blogspot.com/-Pz9gplYXnVg/WHeI3NW2o0I/AAAAAAAACfM/bQhjTtpeZeIC2vMKRYN6u5do6HppGIkwACLcB/s1600/hoamai1.png", minSize: 10, maxSize:32, flakeCount: 25});
  $(document).snowfall({image :"https://1.bp.blogspot.com/-groQ9fqAtWk/WHeI6IN-bUI/AAAAAAAACfU/RC2RXr75qDAZKOsmSEqNeb_OyhFQ5gH8ACLcB/s1600/hoamai2.png", minSize: 10, maxSize:32, flakeCount: 20});
  $(document).snowfall({image :"https://2.bp.blogspot.com/-4npl186jl6A/WHeI3c_516I/AAAAAAAACfQ/9DbJuPWlz9I1i7836YHLoJR_NSAFDn3fACLcB/s1600/hoamai3.png", minSize: 10, maxSize:32, flakeCount: 20});
});
//]]>
</script>

Xong tết thì nhớ tháo code ra nhé
Chúc vui vẻ!
Comments blogger

Không có nhận xét nào :