Particles.js là một thư viện JavaScript nhẹ và dễ sử dụng, cho phép bạn tạo ra các hiệu ứng hạt chuyển động ấn tượng trên trang web của bạn. Với Particles.js, bạn có thể dễ dàng thêm vào trang web của mình các hiệu ứng như sao băng, tuyết rơi, hoặc bất kỳ hiệu ứng nào khác dựa trên hạt mà bạn có thể tưởng tượng. Điều này không chỉ làm tăng tính thẩm mỹ cho trang web mà còn tạo ra một trải nghiệm duyệt web độc đáo và thú vị cho người dùng.
Tùy chỉnh hiệu ứng hạt
Particles.js là một quá trình linh hoạt và đa dạng. Thư viện này cung cấp một loạt các tùy chọn cho phép bạn điều chỉnh hiệu ứng hạt sao cho phù hợp nhất với thiết kế web của bạn. Bạn có thể tinh chỉnh số lượng hạt, màu sắc, độ trong suốt, tốc độ chuyển động và nhiều thuộc tính khác thông qua tệp cấu hình JSON. Sự linh hoạt này cho phép bạn tạo ra các hiệu ứng độc đáo và cá nhân hóa theo ý muốn, mang lại một trải nghiệm duyệt web độc đáo và thú vị cho người dùng.
Tích hợp hiệu ứng vào website/blogspot
Để đưa hiệu ứng hạt vào trang web của bạn, bạn cần chèn mã HTML cần thiết vào vị trí bạn muốn hiển thị hiệu ứng trên trang. Đồng thời, đảm bảo rằng tệp JavaScript của thư viện Particles.js đã được liên kết đúng cách trong trang của bạn. Trong quá trình tích hợp, có thể xuất hiện một số vấn đề như hiệu ứng không hiển thị đúng cách trên các thiết bị hoặc trình duyệt khác nhau. Để khắc phục, bạn cần kiểm tra lại mã nguồn và cấu hình để đảm bảo tất cả đã được thiết lập chính xác.
Hướng dẫn tạo hiệu ứng hạt chuyển động
Bước 1: Truy cập vào trang quản lý của Blogger và đăng nhập.
Bước 2: Chọn mục "Chủ đề" và sau đó chọn "Chỉnh sửa HTML".
Bước 3: Sao chép mã của thư viện Particles.js và dán nó vào bên trong thẻ <head>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'/>
#particles-js {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;background-color: var(--lightBg);}
<div id='particles-js'/>
<script>
particlesJS("particles-js", {
"particles": {
"number": {
"value": 88,
"density": {
"enable": true,
"value_area": 700
}
},
"color": {
"value": ["#004DFF", "#D80032", "#FFAA00", "#00FF00"]
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#ffffff"
},
"polygon": {
"nb_sides": 15
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1.5,
"opacity_min": 0.15,
"sync": false
}
},
"size": {
"value": 2.5,
"random": false,
"anim": {
"enable": true,
"speed": 2,
"size_min": 0.15,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 110,
"color": "#00BFFF",
"opacity": 0.4,
"width": 1.25
},
"move": {
"enable": true,
"speed": 1.6,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"bounce": false,
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse"
},
"onclick": {
"enable": false,
"mode": "push"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 8,
"speed": 3
},
"repulse": {
"distance": 200,
"duration": 0.4
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true
});
</script>