Реклама
timeweb
falbar

Задний фон для сайта в виде частиц

14 октября 2014 3002 2

Если вы хотите добавить интересный эффект к себе на сайт, то предлагаю воспользоваться jQuery плагином particleground. При помощи этого дополнения вы сможете реализовать задний фон сайта в виде меняющихся и движущихся частиц.

Реклама

Живет этот плагин на странице github. На ней вы можете увидеть его работу, а так же скачать. Ограничение у этого дополнения только одно: работает в том браузере, который поддерживает HTML5.

Пользоваться плагином очень легко, для этого необходимо вызвать метод particleground() к нужному элементу. В нашем случае задний фон задается для всей области, поэтому применяем его к элементу body.

$("body").particleground();

У плагина множество настроек, которые позволяют: менять цвет частиц, цвет линий, число частиц, скорость их движения и ещё многое другое. С этими опциями вы можете ознакомиться в файле README, который находиться в архиве.

В этом примере мы задаем цвет частиц и линий, а также отменяем параллакс эффект при движении мыши.

$("body").particleground({
	dotColor: "#5cbdaa",
	lineColor: "#5cbdaa",
	parallax: false
});

Теперь давайте настроем плагин, чтобы частицы находились на заднем фоне страницы. Для этого стоит воспользоваться callback фикцией onInit(), которая запускается после инициализации плагина.

$("body").particleground({
	dotColor: "#5cbdaa",
	lineColor: "#5cbdaa",
	onInit: function(){
		$(this).find("canvas.pg-canvas").css({
			position: "fixed",
			zIndex: -1
		});
	}
});

Как видите пользоваться дополнением легко и просто, а настройка его займет пару секунд.

Реклама
ti1schweiger
3 ноября 2014
Норм работает. Чем отличается jquery.particleground.min.js от jquery.particleground.js? jquery.particleground.js вообще рабочий?
Антон Кулешов
4 ноября 2014
Первый файл это сжатая версия второго. Все скрипты рабочие, перед написанием статьи я их проверял проблем не было.
no_avatar