Chia sẻ cách tạo hiệu ứng các hạt chuyển động bằng thư viện Particles.js
Particles.js là một thư viện JavaScript nhẹ và dễ sử dụng, cho phép bạn tạo ra những hiệu ứng hạt chuyển động ấn tượng trên trang web của mình. Với Particles.js, bạn có thể dễ dàng thêm vào trang web của mình hiệu ứng như sao băng, tuyết rơi, hoặc bất kỳ hiệu ứng dựa trên hạt nào khác 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.
 |
| Chia sẻ cách tạo hiệu ứng các hạt chuyển động bằng thư viện Particles.js |
Tùy chỉnh hiệu ứng hạt
Particles.js cung cấp một loạt các tùy chọn để bạn tùy chỉnh hiệu ứng hạt sao cho phù hợp nhất với thiết kế web của mình. Bạn có thể điều 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 file cấu hình JSON. Sự linh hoạt này giúp bạn có thể tạo ra các hiệu ứng độc đáo và cá nhân hóa theo ý muốn.
Tích hợp hiệu ứng vào trang web
Để tích hợp hiệu ứng hạt vào trang web, bạn cần chèn đoạn mã HTML cần thiết vào nơi bạn muốn hiển thị hiệu ứng trên trang. Đồng thời, cần đảm bảo rằng file 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ể sẽ gặp 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: Đăng nhập vào trang quản lý Blogger
Bước 2: Ấn vào Chủ đề → Chỉnh sửa HTML
Bước 3: Bạn hãy copy thư viện Particles.js và dán trên thẻ <head>
<script src='https://cdn.jsdelivr.net/particles.js/2.0.0/particles.min.js'/>Bước 4: Tiếp tục copy đoạn CSS dưới đây là dán vào thẻ </style>
#particles-js {position: fixed; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;background-color: var(--lightBg);} Lưu ý
Chỗ var(--lightBg) bạn thay bằng màu nền yêu thích nhé.
Bước 5: Sau đó copy đoạn JS dưới đây là dán vào thẻ </body>
<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>
Bước 6: Lưu lại và tận hưởng thành quả.
Kết luận
Particles.js mang lại một phương pháp đơn giản nhưng mạnh mẽ để thêm hiệu ứng hạt chuyển động vào trang web của bạn, giúp trang web trở nên sống động và thu hút người dùng hơn. Bằng cách tuân theo các bước cài đặt, tùy chỉnh, và tích hợp mà chúng tôi đã chia sẻ, bạn sẽ dễ dàng tạo ra những hiệu ứng đẹp mắt và độc đáo cho trang web của mình. Đừng quên thử nghiệm với các cấu hình khác nhau để tìm ra hiệu ứng phù hợp nhất với phong cách của bạn. Particles.js không chỉ là công cụ tạo hiệu ứng, mà còn là cách để bạn thể hiện sự sáng tạo và làm cho trang web của mình nổi bật.
