Particles.js что это такое?

tsumbaluk.in.ua 5 Октябрь 2016

Последнее время часто видел этот эффект на сайтах и решил на одном из landing page тоже сделать что-то подобное. Наткнулся на этот онлайн генератор Particles.js particles.js Данная библиотека обладает множеством настроек начиная от количества частиц на экране до реагирования на события браузера. Задача у меня стояла следующая нужно было на фоне сайта сделать такой эффект. Итак, первым делом скачиваем архив с самой библиотекой. В нем вы найдете множество файлов, но нас интересует непосредственно сама библиотека я взял сжатую версию particles.min.js. Также там есть демо по которому легко разобраться что к чему. Вся прелесть в том что в генераторе в режиме реального времени мы можем сконфигурировать наш particles.json как нам угодно. Так же там доступен блок статистики при добавлении частиц стоит обращать внимание на количество FPS и не переусердствовать. Вот те незначительные настройки которые использовал я.

  • particles>number>value 60 кол-во. частиц
  • particles>color>value(single string) #ccc цвет частиц
  • particles>line_linked>color #ccc цвет связующи линий
  • interactivity>onhover>enable убираем событие hover
  • interactivity>onclick>enable убираем событие click
  • → Download current config (json) скачиваем наш конфиг и вставляем в месте инита библиотеки
particlesJS('particles-js',{
	"particles": {
		"number": {
			"value": 100,
			"density": {
				"enable": true,
				"value_area": 800}	
		},
		"color": {
			"value": "#8DAAB8"
		},
		"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": 8.8,
			"random": true,
			"anim": {
				"enable": false,
				"speed": 40,
				"size_min": 0.1,
				"sync": false
			}
		},
		"line_linked": {
			"enable": true,
			"distance": 150,
			"color": "#8DAAB8",
			"opacity": 0.4,
			"width": 2
		},
		"move": {
			"enable": true,
			"speed": 4,
			"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
});

И еще так как задачей было сделать background из частиц то нужно добавить немного CSS. Здесь устанавливаем фиксированную позицию во весь экран, делаем прозрачный фон, и добавляем z-index: -1; для того чтобы наш блок не мешал взаимодействовать с остальной страничкой.

#particles-js{ 
	position: fixed; 
	width: 100%; 
	height: 100%; 
	background-color: transparent; 				
	z-index: -1;
	top: 0; 
	left: 0; 
}

Результат

See the Pen Particles.js by Alexander Tsymbaluk (@rodan8888) on CodePen

Новое в блоге

Modx Revo multilanguage babel
tsumbaluk.in.ua || 05.03.2017

Modx Revo multilanguage babel

Node package manager publish package
tsumbaluk.in.ua || 11.02.2017

Node package manager publish package

Modx перенос на сервер или туда и обратно
tsumbaluk.in.ua || 01.11.2016

Modx перенос на сервер или туда и обратно

Gulp инструмент для удобной и быстрой front-end разработки!
tsumbaluk.in.ua || 05.10.2016

Gulp инструмент для удобной и быстрой front-end разработки!

Как определить страну и город по IP адресу, javascript?
tsumbaluk.in.ua || 05.10.2016

Как определить страну и город по IP адресу, javascript?

Инфографика в портфолио, блоге
tsumbaluk.in.ua || 05.10.2016

Инфографика в портфолио, блоге