Tạo hiệu ứng mạng nhện đẹp với particles.js

Trong thiết kế web, ngoài làm đúng chuẩn, tối ưu thì vẻ đẹp bên ngoài cũng góp phần không kém vào sự thành công. Nếu bạn muốn trang trí cho trang web thêm nổi bật hơn thì bạn có thể sử dụng particles.js.

Để biết được bộ script này hoạt động như thế nào, bạn có thể truy cập xem demo trên trang chủ của vincentgarreau.com. Cách sử dụng particles.js cũng rất đơn giản, bạn chỉ cần tải script về và load vào trang web của bạn.

<div id="particles-js"></div>

Sau đó, bạn thêm đoạn sau vào file javascript của bạn:

(function () {
    var particlesJs = document.getElementById("particles-js");

    if (null === particlesJs || !particlesJs) {
        return;
    }

    particlesJS('particles-js', {
            "particles": {
                "number": {
                    "value": 218,
                    "density": {
                        "enable": true,
                        "value_area": 1025.8919341219544
                    }
                },
                "color": {
                    "value": "#ffffff"
                },
                "shape": {
                    "type": "circle",
                    "stroke": {
                        "width": 0,
                        "color": "#000000"
                    },
                    "polygon": {
                        "nb_sides": 5
                    },
                    "image": {
                        "src": "img/github.svg",
                        "width": 100,
                        "height": 100
                    }
                },
                "opacity": {
                    "value": 0.5,
                    "random": false,
                    "anim": {
                        "enable": false,
                        "speed": 1,
                        "opacity_min": 0.1,
                        "sync": false
                    }
                },
                "size": {
                    "value": 3,
                    "random": true,
                    "anim": {
                        "enable": false,
                        "speed": 40,
                        "size_min": 0.1,
                        "sync": false
                    }
                },
                "line_linked": {
                    "enable": true,
                    "distance": 150,
                    "color": "#ffffff",
                    "opacity": 0.4,
                    "width": 1
                },
                "move": {
                    "enable": true,
                    "speed": 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": true,
                        "mode": "repulse"
                    },
                    "onclick": {
                        "enable": true,
                        "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
        }
    );
})();

Ngoài ra, bạn cũng có thể xem thêm nhiều tùy chọn khác trên Github. Chúc bạn thành công.