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

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

Кнопки социальных сетей

28 мая 2016 Антон Кулешов

Приветствую, читатели falbar, сегодня мы рассмотрим одну простенькую JavaScript библиотеку sharer для добавления кнопок социальных сетей. Большой плюс этого скрипта заключается в том, что в нём реализована функция «поделиться» более чем для 20 социальных сетей.

Создаем раскрывающиеся блоки тремя способами, используя jQuery, classList API и JavaScript

17 января 2015 Антон Кулешов

Раскрывающиеся блоки довольно популярное решение, если необходимо сэкономить место или, когда контент разделен на группы, и какая-то его часть может быть не интересна ряду пользователей сайта.

Плавный скроллинг и плавающее меню

30 августа 2014 Антон Кулешов

На некоторых сайтах можно увидеть такое явление как плавный скроллинг при нажатии на пункты меню, особенно это любят делать на страницах захвата. Это возможность позволяет быстро перемещаться между основными блоками контента.