Hiệu ứng hoa mai rơi có 2 loại code là sử dụng javascript hoặc chỉ với css3. Với code chỉ với css sẽ cải thiện được tốc độ load của blog. Nếu bạn 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.
tạo hiệu ứng hoa mai rơi cho blogspot
Code hiệu ứng hoa mai rơi với javascript cho 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 hơi nặng nhưng hoa rơi rất đẹp.
DEMO
Hướng dẫn cài đặt code hiệu ứng hoa mai rơi cho blogspot
Code 1
Với code này bạ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 hoặc dán đoạn code vào trước thẻ</body>
<script type='text/javascript'> //<![CDATA[ var SNOW_Picture="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnqWq1dou0RFMOgjQcFUSPZuQGCiuTQOyoOSgqkyF0sT7DaXYYNn_o3hrnaqqJhemeqY4a5DlaBBQ-GGTT6fRLdzqzziUbLQFrssZteYG7QGb_hA-A6-WDk5haJiNewru0hLXnox5tEXA/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>
<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="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhnqWq1dou0RFMOgjQcFUSPZuQGCiuTQOyoOSgqkyF0sT7DaXYYNn_o3hrnaqqJhemeqY4a5DlaBBQ-GGTT6fRLdzqzziUbLQFrssZteYG7QGb_hA-A6-WDk5haJiNewru0hLXnox5tEXA/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ổ sung thêm hàng
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ỏ
<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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhCnxbzj1ojyM0YExtw5FvKg4YdpmgAFUsx2wWX59sulLgp8gQG8GTBQxs1kqnlziMzCB5pNX8yUJUscQ25SvXesWFgRbuG0c-YcSOSwEfgkwGkVfH13zWsUO2y9auy8BA8pvdiAfhzcAU/s1600/hoamai1.png", minSize: 10, maxSize:32, flakeCount: 25}); $(document).snowfall({image :"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhQuTirMlK-aehfJrl0bCJn91x41nfh1ijyKrDC_92sFfuUuZINc2kbGoukGaV8Xm5iBuEk3pcUuH6OFyHBh06dPPo8uxrxgM67SWyotVnotNow2qVshrUbWgpwgEF1Jg-RJ7Ob-2AFbS8/s1600/hoamai2.png", minSize: 10, maxSize:32, flakeCount: 20}); $(document).snowfall({image :"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_hF76zXodQlqMxeuuDE3KJLbnIOHDxomxfy6JgmVcKf2Ta4QVUUS5V9Kg9ws-imH4XKL8-SrqJf5tlu9-VNJbU8TC159j89TT_Eu4HQOntsx7BOLCEM9oRLS9yAZPdY1dnvL5RYB7mcQ/s1600/hoamai3.png", minSize: 10, maxSize:32, flakeCount: 20}); }); //]]> </script>
Code hiệu ứng cánh hoa đào rơi
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>
DEMO
<script>/*<![CDATA[*/ document.addEventListener("DOMContentLoaded",()=>{const body=document.getElementsByTagName("body");body[0].append(document.createElement("canvas"));const canvas=document.querySelector("canvas");canvas.style.position='fixed';canvas.style.top='0';canvas.style.pointerEvents='none';canvas.width=window.innerWidth;canvas.height=window.innerHeight;const ctx=canvas.getContext("2d");const TOTAL=10;const petalArray=[];const petalImg=new Image();petalImg.src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGLNH_my8Cfoj7ACX0gEfhuBoYo1mEsJ_BzezD97A-V_B6ack4a7GkgBWJLtSpR9nFVPwOLKn0_NXe7Ud50N6nLwBLQ7BSn34i29SEWsWoPuQCO3VSA0S_uuJ1GvfbtAcQ7RCUezMkoPI2/s0/hd.png";petalImg.addEventListener("load",()=>{for(let i=0;i<TOTAL;i++){petalArray.push(new Petal());} render();});function render(){ctx.clearRect(0,0,canvas.width,canvas.height);petalArray.forEach((petal)=>petal.animate());window.requestAnimationFrame(render);} window.addEventListener("resize",()=>{canvas.width=window.innerWidth;canvas.height=window.innerHeight;});let mouseX=0;class Petal{constructor(){this.x=Math.random()*canvas.width;this.y=Math.random()*canvas.height*2-canvas.height;this.w=25+Math.random()*15;this.h=20+Math.random()*10;this.opacity=this.w/40;this.flip=Math.random();this.xSpeed=0.5+Math.random()*0.5;this.ySpeed=0.5+Math.random()*0.3;this.flipSpeed=Math.random()*0.03;} draw(){if(this.y>canvas.height||this.x>canvas.width){this.x=-petalImg.width;this.y=Math.random()*canvas.height*2-canvas.height;this.xSpeed=0.5+Math.random()*0.5;this.ySpeed=0.5+Math.random()*0.3;this.flip=Math.random();} ctx.globalAlpha=this.opacity;ctx.drawImage(petalImg,this.x,this.y,this.w*(0.6+Math.abs(Math.cos(this.flip))/3),this.h*(0.8+Math.abs(Math.sin(this.flip))/5));} animate(){this.x+=this.xSpeed+mouseX*3;this.y+=this.ySpeed+mouseX*1;this.flip+=this.flipSpeed;this.draw();}} undefined;}); /*]]>*/</script>
Code hiệu ứng hoa mai rơi chỉ với CSS3 cho blogspot
DEMOCách cài đặt hiệu ứng này chỉ với việc dán code bên dưới vào trước thẻ </body>
<div class="snowflakes" aria-hidden="true"> <div class="snowflake" style="font-size: 30px;">✿</div> <div class="snowflake">✿</div> <div class="snowflake" style="font-size: 40px;">✿</div> <div class="snowflake">✿</div> <div class="snowflake" style="font-size: 30px;">✿</div> <div class="snowflake" style="font-size: 22px;">✿</div> <div class="snowflake" style="font-size: 50px;">✿</div> <div class="snowflake" style="font-size: 20px;">✿</div> <div class="snowflake" style="font-size: 70px;">✿</div> <div class="snowflake" style="font-size: 20px;">✿</div> </div> <style>/*<![CDATA[*/ @-webkit-keyframes snowflakes-fall { 0% { top: -10% } 100% { top: 100% } } @-webkit-keyframes snowflakes-shake { 0% { -webkit-transform: translateX(0px); transform: translateX(0px) } 50% { -webkit-transform: translateX(80px); transform: translateX(80px) } 100% { -webkit-transform: translateX(0px); transform: translateX(0px) } } @keyframes snowflakes-fall { 0% { top: -10% } 100% { top: 100% } } @keyframes snowflakes-shake { 0% { transform: translateX(0px) } 50% { transform: translateX(80px) } 100% { transform: translateX(0px) } } .snowflake { color: yellow; position: fixed; top: -10%; z-index: 9999; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: default; -webkit-animation-name: snowflakes-fall, snowflakes-shake; -webkit-animation-duration: 10s, 3s; -webkit-animation-timing-function: linear, ease-in-out; -webkit-animation-iteration-count: infinite, infinite; -webkit-animation-play-state: running, running; animation-name: snowflakes-fall, snowflakes-shake; animation-duration: 10s, 3s; animation-timing-function: linear, ease-in-out; animation-iteration-count: infinite, infinite; animation-play-state: running, running } .snowflake:nth-of-type(0) { left: 1%; -webkit-animation-delay: 0s, 0s; animation-delay: 0s, 0s } .snowflake:nth-of-type(1) { left: 10%; -webkit-animation-delay: 1s, 1s; animation-delay: 1s, 1s } .snowflake:nth-of-type(2) { left: 20%; -webkit-animation-delay: 6s, .5s; animation-delay: 6s, .5s } .snowflake:nth-of-type(3) { left: 30%; -webkit-animation-delay: 4s, 2s; animation-delay: 4s, 2s } .snowflake:nth-of-type(4) { left: 40%; -webkit-animation-delay: 2s, 2s; animation-delay: 2s, 2s } .snowflake:nth-of-type(5) { left: 50%; -webkit-animation-delay: 8s, 3s; animation-delay: 8s, 3s } .snowflake:nth-of-type(6) { left: 60%; -webkit-animation-delay: 6s, 2s; animation-delay: 6s, 2s } .snowflake:nth-of-type(7) { left: 70%; -webkit-animation-delay: 2.5s, 1s; animation-delay: 2.5s, 1s } .snowflake:nth-of-type(8) { left: 80%; -webkit-animation-delay: 1s, 0s; animation-delay: 1s, 0s } .snowflake:nth-of-type(9) { left: 90%; -webkit-animation-delay: 3s, 1.5s; animation-delay: 3s, 1.5s } /*]]>*/</style>
🌸
Chúc vui vẻ!
Nếu có nhu cầu sử dụng pháo hoa tham khảo:
Tại đây , Tại đây và Tại đây.