Lễ Giáng Sinh còn được gọi là lễ Thiên Chúa giáng sinh, Christmas, Xmas hay Noel (từ tiếng Pháp Noël, là viết tắt từ gốc Emmanuel, nghĩa là "Thiên Chúa ở cùng chúng ta"). Đây là một ngày lễ kỷ niệm ngày Chúa Giê-su sinh ra đời của phần lớn người theo đạo Thiên Chúa.
Ngày lễ Giáng Sinh mang thông điệp của sự hoà bình: "Vinh danh Thượng Đế trên cao – Bình an cho người dưới thế".
Hôm nay, hãy cùng Code Pro trang trí đón Noel cho blog/website bằng hiệu ứng tuyết rơi tuyệt đẹp nhé!
Các bước thực hiện
Bước 1: Copy toàn bộ code dưới đây và tùy chỉnh
<style>
#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}
</style>
<div id='snowflakeContainer'>
<p class='snowflake'>❄</p>
</div>
<script style='text/javascript'>
//<![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=50;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};
//]]>
</script>Bước 2: Tùy chỉnh mặc định
1. Thay đổi biểu tượng: <p class="snowflake">❄</p>
❊ ✽ ✫ ✬ ✭ ❃ ❋ ❀ ✤ ✥ ❄ ✾ ⋆ ✢ ✰ ☘ ❋ ✦ ✧ ✣ ✷ ✸ ✺ ✱ ✶ ✻ ❈ ❉ ✪
✿ ❁ ✩ ★ ✢ ✣ ☘ ✤ ✥ ✱ ✲ ✵ ✶ ✷ ❊ ❋ ✸ ✹ ✺ ✻ ✽ ✾ ✿ ❀ ❁ ❂ ❃ ❈ ❉
2. Thay đổi màu tuyết: color:#ebebeb
3. Thay đổi số lượng: numberOfSnowflakes=50
4. Thay đổi kích thước: 30+"px"
Bước 3: Lưu lại và tận hưởng thành quả!
Lời kết
Trên đây là toàn bộ hướng dẫn và code hiệu ứng tuyết rơi ngẫu nhiên trang trí Noel cho blog/website. Chúc các bạn có một ngày học tập và làm việc thật hiệu quả. Xin chào và hẹn gặp lại!