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.

Tạo hiệu ứng mạng nhện với 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.

2 bình luận cho “Tạo hiệu ứng mạng nhện đẹp với particles.js

    1. Tích hợp dễ mà bạn. Chỉ cần làm theo hướng dẫn của họ trên Github thôi, muốn thêm vào bất kỳ chỗ nào trong WordPress đều được.

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *