Hướng dẫn chi tiết Copy đoạn code phía dưới và dán ngay sau thẻ <body> và lưu lại. <script type='text/javascript'> //<![CDATA[ var pictureSrc = "https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png"; //Link ảnh hoa muốn hiển thị trên web var pictureWidth = 15; //Chiều rộng của hoa mai or đào var pictureHeight = 15; //Chiều cao của hoa mai or đào var numFlakes = 10; //Số bông hoa xuất hiện cùng một lúc trên trang web var downSpeed = 0.01; //Tốc độ rơi của hoa var lrFlakes = 10; //Tốc độ các bông hoa giao động từ bên trai sang bên phải và ngược lại 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> Chúc bạn thành công 🎉

Phan Trung Trực để anh edit cho

Phan Trung Trực oke ngay 😅

Phan Trung Trực khách sáo quá 😄

Em cũng có nhưng nó mượt hơn Demo: https://www.nguyenhoangdat.gq/ CSS: #snowflakeContainer{position:absolute;left:0px;top:0px;} .snowflake{padding-left:15px;font-size:14px;line-height:24px;position:fixed;color:#ebebeb;user-select:none;z-index:1000;-moz-user-select:none;-ms-user-select:none;-khtml-user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;} .snowflake:hover {cursor:default} HTML Dán Trước </body> <div id='snowflakeContainer'> <p class='snowflake'><img style="width:20px" src="https://1.bp.blogspot.com/-CXx9jt2JMRk/Vq-Lh5fm88I/AAAAAAAASwo/XivooDn_oSY/s1600/hoamai.png" /></p> </div> Java Script <script> //<![CDATA[ var requestAnimationFrame=window.requestAnimationFrame||window.mozRequestAnimationFrame||window.webkitRequestAnimationFrame||window.msRequestAnimationFrame;var transforms=["transform","msTransform","webkitTransform","mozTransform","oTransform"];var transformProperty=getSupportedPropertyName(transforms);var snowflakes=[];var browserWidth;var browserHeight;var numberOfSnowflakes=39;var resetPosition=false;function setup(){window.addEventListener("DOMContentLoaded",generateSnowflakes,false);window.addEventListener("resize",setResetFlag,false)}setup();function getSupportedPropertyName(b){for(var a=0;a<b.length;a++){if(typeof document.body.style[b[a]]!="undefined"){return b[a]}}return null}function Snowflake(b,a,d,e,c){this.element=b;this.radius=a;this.speed=d;this.xPos=e;this.yPos=c;this.counter=0;this.sign=Math.random()<0.5?1:-1;this.element.style.opacity=0.5+Math.random();this.element.style.fontSize=4+Math.random()*30+"px"}Snowflake.prototype.update=function(){this.counter+=this.speed/5000;this.xPos+=this.sign*this.speed*Math.cos(this.counter)/40;this.yPos+=Math.sin(this.counter)/40+this.speed/30;setTranslate3DTransform(this.element,Math.round(this.xPos),Math.round(this.yPos));if(this.yPos>browserHeight){this.yPos=-50}};function setTranslate3DTransform(a,c,b){var d="translate3d("+c+"px, "+b+"px, 0)";a.style[transformProperty]=d}function generateSnowflakes(){var b=document.querySelector(".snowflake");var h=b.parentNode;browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var d=0;d<numberOfSnowflakes;d++){var j=b.cloneNode(true);h.appendChild(j);var e=getPosition(50,browserWidth);var a=getPosition(50,browserHeight);var c=5+Math.random()*40;var g=4+Math.random()*10;var f=new Snowflake(j,g,c,e,a);snowflakes.push(f)}h.removeChild(b);moveSnowflakes()}function moveSnowflakes(){for(var b=0;b<snowflakes.length;b++){var a=snowflakes[b];a.update()}if(resetPosition){browserWidth=document.documentElement.clientWidth;browserHeight=document.documentElement.clientHeight;for(var b=0;b<snowflakes.length;b++){var a=snowflakes[b];a.xPos=getPosition(50,browserWidth);a.yPos=getPosition(50,browserHeight)}resetPosition=false}requestAnimationFrame(moveSnowflakes)}function getPosition(b,a){return Math.round(-1*b+Math.random()*(a+2*b))}function setResetFlag(a){resetPosition=true}; //]]> </scrpit> Chúc Các Bạn Thành Công Nhé

Nguyễn Hoàng Đạt quả demo chất lượng đấy 🥰

Lê Anh Đức quá là Tết =))

Nguyễn Hoàng Đạt cháy thật sự 😅

Code hiệu ứng hoa mai rơi cho blog/website

Nguyễn Hoàng Đạt

Hà Trần Đức Trí của Trí Nqu được chưa =)))

TPIT

Nguyễn Hoàng Đạt ib minh voi
phath321@gmail.com

Omerta

Đẹp nhỉ
Anh em ghé ủng hộ tuyetnhan.co

« Trang trước