Code này do mình tự tay viết nên tự tối ưu đc, với code này thì tuyết cũng khá nhiều, đủ nhìn, không che nhiều nội dung quá và đặc biệt là code này giảm bớt lag khi truy cập website.
Để mà dùng code này thì mọi người copy code bên dưới và dán vào body cho mình nhá, nó áp dụng cho mọi loại web kể cả blogger hay web host thông thường.
Và đây là toàn bộ code tạo tuyết rơi nhé:
<style>
body {
--snow-height: 150vh;
--houdini-snow-flecks: 1500;
}
.snow {
height: 100vh;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
top: 0;
pointer-events: none;
user-select: none;
}
.snow .snowflake {
animation-duration: 20s;
animation-iteration-count: infinite;
animation-name: snow;
border-radius: 50%;
max-height: 8px;
max-width: 8px;
opacity: 0.4;
pointer-events: none;
position: absolute;
transform: translateY(-10px);
will-change: transform, opacity;
}
.snow .snowflake.c1 {
background-color: hsla(0, 0%, 100%, 0.9);
}
.snow .snowflake.c2 {
animation-duration: 18s;
background-color: #d6ffff;
}
.snow .snowflake.c3 {
animation-duration: 22s;
background-color: #fff;
}
@keyframes snow {
15%,
95% {
left: var(--drift);
opacity: 1;
}
100% {
opacity: 0.8;
transform: translateY(110vh);
}
}
</style>
<span class="snow"></span>
<script>
const snowContainer = document.querySelector(".snow");
const randomize = (min, max, round = false) => {
const randomPick = Math.random() * (max - min) + min;
return round ? Math.round(randomPick) : randomPick;
};
const snow = () => {
var snowcount = window.innerWidth * 0.25;
for (var i = 0; i <= snowcount; i++) {
const snowflake = document.createElement("span");
const size = randomize(0.15, 0.85);
const delay =
i < snowcount * 0.1 ? randomize(0, 0.5) : randomize(0.35, 18);
const leftPos = randomize(0, 100);
snowflake.classList.add("snowflake");
snowflake.classList.add(`c${randomize(1, 3, true)}`);
snowflake.style.left = `${leftPos}%`;
snowflake.style.width = `${size}vw`;
snowflake.style.height = `${size}vw`;
snowflake.style.setProperty("--drift", `${leftPos + 2}%`);
snowflake.style.animationDelay = `${delay}s`;
snowContainer.appendChild(snowflake);
}
};
snow();
</script>
Design by kimidev
