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

14 октября 2014 Антон Кулешов 2691 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
Читайте далее

Увеличение картинки с помощью эффекта лупы на jQuery

21 февраля 2016 Антон Кулешов

Занимаясь продажами товаров в интернете, всегда нужно уделять внимание мелочам. Ведь, как известно, именно нюансы и эти самые мелочи влияют на окончательное решение потенциального покупателя. Как же нам помочь посетителю нашего сайта детально рассмотреть его интересующий товар? На этот вопрос есть определённый ответ – это добавление эффекта лупы при наведении на картинку, о котором мы и поговорим в этой статье.

Яндекс Диск для совместной работы

30 декабря 2015 ti1schweiger

Работая в команде, необходимо иметь надёжные коммуникации. Как только мы начинали работу над falbar, данный вопрос встал очень жестко. Ведь каждая статья перед появлением в ленте проходит этап подборки, разработки демо и кода, написание основной статьи, редактирование и модерацию. На каждом этапе необходимо обмениваться материалами, что-то перекидывать на проверку, что-то добавлять. Ранее мы пользовались «файлообменником» Скайпом, но скорость передачи даже небольших файлов очень низкая и необходимо присутствие человека по ту сторону монитора для нажатия кнопки подтверждения. Чтобы уйти от необходимости ловить друг друга онлайн, мы перешли на Документы от ВКонтакте – и скорость хорошая, и залить файлы можно в любое время. Залил, прикрепил к сообщению и сбросил – на том конце в любой момент заберут. Однако соц.сеть не радовала своей надежностью и периодические сбои, связанные с невозможностью загрузить файлы на сервер, обратили наш взор к Яндекс Диску.

Всплывающие подсказки на чистом CSS

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

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