particles.js icon indicating copy to clipboard operation
particles.js copied to clipboard

Onresize not working V2.0

Open awsomedesigner opened this issue 8 years ago • 6 comments

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"
	}
}

awsomedesigner avatar Jan 24 '17 06:01 awsomedesigner

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.

NNickey avatar Apr 06 '17 03:04 NNickey

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.

oncena avatar Jan 27 '18 13:01 oncena

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

thekevshow avatar Mar 22 '19 20:03 thekevshow

Anyone solved this issue?

msanandrea avatar Jun 14 '20 13:06 msanandrea

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

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

matteobruni avatar Jun 14 '20 14:06 matteobruni

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

oncena avatar Jun 14 '20 14:06 oncena