Уже не первый год паралакс-эффект (parallax) довольно популярный в среде веб-разработчиков.
Сегодня я вам расскажу о том, как можно сделать у себя на сайте эффект паралакса, используя популярный плагин stellar.js
Итак, поехали
- Качаем плагин stellar.js тут – скачать stellar.js
- Подключаю jquery
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
- Подключаем stellar.js
<script type="text/javascript" src="/js/stellar.js"></script>
Так как у меня steallar.js находится в папке “js”, то я прописываю именно такой путь. У Вас же может быть свой путь в зависимости от расположения этого файла у Вас.
- Инициализируем плагин 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;
И все) тестируйте) Ваш паралакс эффект должен работать 🙂
Если не работает, то пишите в комментариях, постараюсь помочь
Для выравнивания картинки по горизонту добавить параметр в js файле:
$.stellar({
horizontalScrolling: false
});
Благодарочка, Дмитрий