Паралакс-эффект за 3 минуты с помощью stellar.js

Уже не первый год паралакс-эффект (parallax) довольно популярный в среде веб-разработчиков.

Сегодня я вам расскажу о том, как можно сделать у себя на сайте эффект паралакса, используя популярный плагин stellar.js

Итак, поехали

  1. Качаем плагин stellar.js тут — скачать stellar.js
  2. Подключаю jquery
  3. Подключаем stellar.js

     Так как у меня steallar.js находится в папке «js», то я прописываю именно такой путь. У Вас же может быть свой путь в зависимости от расположения этого файла у Вас.
  4. Инициализируем плагин stellar.js

Ну вот, в принципе, и все 🙂

Теперь нам нужно подключить наш паралакс через data атрибут

Допустим, у меня есть section, где я бы хотел бекграунд сделать паралакс

Я прописываю так

data-stellar-background-ratio=»0.5″. Тут устанавливаем скорость вашего паралакс

ВАЖНО! Теперь section, к которому мы применяем паралакс, должна иметь css-свойство

И все) тестируйте) Ваш паралакс эффект должен работать 🙂

Если не работает, то пишите в комментариях, постараюсь помочь

автор: Роман Довгаль

С 2010 года я занимаюсь интернет маркетингом. Сюда входит и SEO, и SMM, и SMO, и, собственно маркетинговое продвижение не только сайтов, а проектов в комплексе :)
Для меня каждый проект – это отдельная жизнь. Своя целевая аудитория, свои методы продвижения, свои показатели результативности :)

2 комментария

  1. Для выравнивания картинки по горизонту добавить параметр в js файле:

    $.stellar({
    horizontalScrolling: false
    });

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *