[Hướng dẫn] Tạo Hiệu Ứng Tuyết Rơi Giáng Sinh Siêu Đẹp Không Cần Plugin

[Hướng dẫn] Tạo Hiệu Ứng Tuyết Rơi Giáng Sinh Siêu Đẹp Không Cần Plugin

Sắp đến giáng sinh rồi, tạo chút hiệu ứng tuyết rơi trên website để hưởng ứng không khí này thôi các bác ^^. Có rất nhiều cách để tạo hiệu ứng tuyết rơi, nhanh gọn có thể sử dụng plugin.

Tuy nhiên, hôm nay Flatsomea-z sẽ hướng dẫn các bạn cách tạo hiệu ứng tuyết rơi bao đẹp cho website mà không cần phải cài đặt plugin nặng web ạ

Bước 1: Chèn html vào Footer

Truy cập Giao diện > Tuỳ biến > Footer > Bottom text – Secondary. Paste đoạn code sau vào nhé:

<div id="snow"></div>

Bước 2: Tuỳ biến CSS 

Truy cập Giao diện > Tuỳ biến > Custom CSS. Copy và paste đoạn code sau vào đây nhé!

#snow {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
pointer-events: none;
z-index: 1000;
}

Bước 3: Thêm JS

Truy cập Flatsome > Advanced > Global Settings > Footer Scripts. Copy và paste đoạn code sau vào nhé

<script>
document.addEventListener('DOMContentLoaded', function(){
var script = document.createElement('script');
script.src = 'https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js';
script.onload = function(){
particlesJS("snow", {
"particles": {
"number": {
"value": 200,
"density": {
"enable": true,
"value_area": 800
}
},
"color": {
"value": "#ffffff"
},
"opacity": {
"value": 0.7,
"random": false,
"anim": {
"enable": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false
}
},
"line_linked": {
"enable": false
},
"move": {
"enable": true,
"speed": 5,
"direction": "bottom",
"random": true,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": true,
"rotateX": 300,
"rotateY": 1200
}
}
},
"interactivity": {
"events": {
"onhover": {
"enable": false
},
"onclick": {
"enable": false
},
"resize": false
}
},
"retina_detect": true
});
}
document.head.append(script);
});
</script>

Lưu lại và xoá cache là xong. Tận hưởng thành quả nhé!

Chúc các bạn thành công!