Noel đang đến gần, và để mang không khí lễ hội đến với khách truy cập, bạn có thể thêm hiệu ứng tuyết rơi trên website của mình. Đây là một cách đơn giản nhưng hiệu quả để trang trí website, giúp thu hút sự chú ý và tạo ấn tượng với người dùng.
Trong bài viết này, chúng tôi sẽ hướng dẫn bạn cách tích hợp hiệu ứng tuyết rơi vào website một cách nhanh chóng và dễ dàng, chỉ với vài đoạn mã đơn giản.
Hướng Dẫn Tích Hợp Mã Tuyết Rơi
Thêm mã Html
<div class="container">
<div class="star"></div>
</div>Thêm mã CSS
Bạn có thể thêm CSS để đảm bảo hiệu ứng tuyết rơi không ảnh hưởng đến các nội dung khác trên website.
body {
margin: 0;
padding: 0;
}
.container {
background: #111;
min-height: 100vh;
width: 100%;
overflow: hidden;
position: relative;
}
.star {
position: absolute;
top: -20px;
color: #FFFFFF;
font-size: 24px;
animation: anim 5s linear forwards;
}
.star::before {
content: "\f2dc";
font-family: 'Font Awesome 6 Free';
font-weight: 900;
text-shadow:
0 0 5px #fff,
0 0 20px #fff,
0 0 50px #fff;
}
@keyframes anim {
0% {
transform: translateY(0) rotate(0deg);
opacity: 1;
}
80% {
opacity: 1;
}
100% {
transform: translateY(100vh) rotate(360deg);
opacity: 0;
}
}Thêm mã Javascript
Bạn cần thêm đoạn mã JavaScript để tạo hiệu ứng tuyết rơi. Đoạn mã này có thể được đặt trong file script.js hoặc nhúng trực tiếp vào thẻ <script> trên trang của bạn.
<script>
const container = document.querySelector('.container');
function draw() {
const e = document.createElement("div");
e.classList.add("star");
container.appendChild(e);
// Sử dụng template literals đúng cách với backticks (`)
e.style.left = `${Math.random() * window.innerWidth}px`;
e.style.fontSize = `${Math.random() * 24}px`;
e.style.animationDuration = `${6 + Math.random() * 3}s`;
setTimeout(() => {
container.removeChild(e);
}, 15000);
}
setInterval(draw, 1);
</script>Nếu bạn sử dụng WordPress, hãy chèn mã JavaScript này vào file functions.php bằng cách sử dụng hook wp_enqueue_script.Nếu không, bạn có thể chèn trực tiếp vào thẻ <head> hoặc <body> trong file HTML.
Demo
