039 4321 444
039 4321 444
0335006543
0335006543
1 Donate cho em ly cafe được hông ^^

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

Hieu-ung-tuyet-roi-giang-sinh

[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 ạ

Hieu-ung-tuyet-roi-giang-sinh
Hieu-ung-tuyet-roi-giang-sinh

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!

Trả lời

Email của bạn sẽ không được hiển thị công khai.