Вы также можете создать уникальный parallax эффект с помощью плагина StickyStack.js. Этот JQuery-плагин позволяет при прокрутке страницы «закреплять» каждый блок вверху страницы, постепенно скрывая его следующим блоком. При этом создается иллюзия многоуровневого сайта, когда одна страница накладывается поверх другой. Это действительно интересный эффект, который можно получить самостоятельно без особого труда.
Несмотря на то, что плагин довольно легко подключить и настроить, это потребует некоторого понимания клиентской веб-разработки
Сначала разместим несколько блоков(section) внутри основного контейнера(div#main-content-wrapper). Таким образом мы получим определенную структуру HTML, с которой будет работать StickyStack.js.
В настройках при подключении плагина необходимо указать родительский и дочерние элементы и при желании «наложить» тень.
Пример подключения плагина со страницы проекта на GitHub:
JQuery
Несмотря на то, что StickyStack.js не обновлялся уже около 2 лет, он до сих пор корректно работает во всех браузерах. Автор проводил тестирование в браузерах Chrome, Safari и Firefox с поддержкой всех версий jQuery. В сжатом виде плагин занимает всего 2 Кб, что без сомнения также является плюсом.
Чтобы ознакомиться с плагином подробнее посетите официальную страницу репозитория StickyStack.
С помощью этого инструмента можно создавать замечательные параллакс эффекты на одностраничных веб-сайтах, а также лендингах с блоками, в которых фон занимает всю ширину экрана.
Если вы хотите увидеть, как будут выглядеть эффекты на реальном сайте, посетите демо-страницу на CodePen
Оригинал статьи: http://www.hongkiat.com/blog/parallax-scrolling-stickystack-js/
Перевод: Земсков Матвей