VincentGarreau / particles.js

A lightweight JavaScript library for creating particles
https://vincentgarreau.com/particles.js/
MIT License
28.66k stars 4.81k forks source link

Onresize not working V2.0 #177

Open awsomedesigner opened 7 years ago

awsomedesigner commented 7 years ago

Hello

when i resize the screen size then particles will not look like same as normal screen.

my json file

{"particles":
    {
        "number":
            {
                "value":100,
                "density":{
                    "enable":true,
                    "value_area":2000
                }
            },
        "color":
            {
                "value":"#ffffff"
            },
        "shape":
            {
                "type":"circle",
                "stroke":
                    {
                        "width":0,
                        "color":"#cccccc"
                    },
                "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":5,
                "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",
                "attract":
                    {
                        "enable":false,
                        "rotateX":600,
                        "rotateY":1200
                    }
            }
    },
    "interactivity":{
        "detect_on":"canvas",
        "events":{
            "onhover":{"enable":true,"mode":"grab"},
            "onclick":{"enable":false,"mode":"push"},
        "resize":true},
        "onresize":{
            "density_auto": true,
            "density_area": 800
        },
        "modes":{
            "grab":{
                "distance":400,
                "line_linked":{
                    "opacity":1
                }
            },
            "bubble":{
                "distance":400,
                "size":40,
                "duration":2,
                "opacity":8,
                "speed":3
            },
            "repulse":{
                "distance":200
            },
            "push":{
                "particles_nb":4
            },
            "remove":{"particles_nb":2}
        }
    },
    "retina_detect":true,
    "config_demo":
    {
        "hide_card":false,
        "background_color":"#b61924",
        "background_image":"",
        "background_position":"50% 50%",
        "background_repeat":"no-repeat",
        "background_size":"cover"
    }
}
NNickey commented 7 years ago

Having the same issue with mine. Resizing the window doesn't refresh the canvas width/height making it only listen to the width/height the window/canvas first started with.

oncena commented 6 years ago

I've got the same issue, but to elaborate, handling the resize event is a bit buggy. Why? cause when I resize the window slowly via cursor, the resize is working (canvas size gets updated), but when I toggle via maximize/restore window state, the plugin is not updating the canvas size.

thekevshow commented 5 years ago

Same issue, this is super annoying and makes mobile not usable for making nice looking content.

msanandrea commented 4 years ago

Anyone solved this issue?

matteobruni commented 4 years ago

Have you tried this? https://github.com/matteobruni/tsparticles

It's an improved and actively developed version of this abandoned project

oncena commented 4 years ago

Thank you @matteobruni. I implemented a workaround long ago, but it is nice to have a working repo.