Показать Меню
falbar Задний фон в виде частиц

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

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

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

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

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

$('body').particleground();

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

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

$('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
		});
	}
});

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

Спасибо за внимание.

Источник
jnicol.github.io/particleground

Подписаться на обновления

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