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

Если вы хотите добавить интересный эффект к себе на сайт, то предлагаю воспользоваться 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
      });
 }
});

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

#Бэкграунды и фоны

10 016 2