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

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

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

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

  1. Качаем плагин stellar.js тут — скачать stellar.js
  2. Подключаю jquery
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
  3. Подключаем stellar.js
    <script type="text/javascript" src="/js/stellar.js"></script>

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

  4. Инициализируем плагин stellar.js
    <script>$.stellar();</script>
    

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

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

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

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

<section data-stellar-background-ratio="0.5" id="main-bg">

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

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

background-attachment: fixed;

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

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

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

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

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

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

    $.stellar({
    horizontalScrolling: false
    });

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

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