Матвей Земсков

Заметки веб-мастера

Вторник, 14 ноября 2017 21:01

Параллакс эффекты - легко с StickyStack.js

Оцените материал
(4 голосов)

Параллакс эффекты на страницах сайта заставляют обратить на себя внимание посетителя. Эти эффекты заключаются в том, что при прокрутке страницы следующий блок постепенно сменяет предыдущий, сдвигаясь относительно него. При этом предыдущий блок не движется относительно области просмотра браузера. Parallax-эффекты можно увидеть на многих современных сайтах и шаблонах для CMS WordPress, потому что они широко распространены в современном дизайне.

Вы также можете создать уникальный parallax эффект с помощью плагина StickyStack.js. Этот JQuery-плагин позволяет при прокрутке страницы «закреплять» каждый блок вверху страницы, постепенно скрывая его следующим блоком. При этом создается иллюзия многоуровневого сайта, когда одна страница накладывается поверх другой. Это действительно интересный эффект, который можно получить самостоятельно без особого труда.

Несмотря на то, что плагин довольно легко подключить и настроить, это потребует некоторого понимания клиентской веб-разработки

Сначала разместим несколько блоков(section) внутри основного контейнера(div#main-content-wrapper). Таким образом мы получим определенную структуру HTML, с которой будет работать StickyStack.js.

В настройках при подключении плагина необходимо указать родительский и дочерние элементы и при желании «наложить» тень.

Пример подключения плагина со страницы проекта на GitHub:

JQuery

$('.main-content-wrapper').stickyStack({
	containerElement: '.main-content-wrapper',
	stackingElement: 'section',
	boxShadow: '0 -3px 20px rgba(0, 0, 0, 0.25)'
});

Несмотря на то, что StickyStack.js не обновлялся уже около 2 лет, он до сих пор корректно работает во всех браузерах. Автор проводил тестирование в браузерах Chrome, Safari и Firefox с поддержкой всех версий jQuery. В сжатом виде плагин занимает всего 2 Кб, что без сомнения также является плюсом.

Чтобы ознакомиться с плагином подробнее посетите официальную страницу репозитория StickyStack.

С помощью этого инструмента можно создавать замечательные параллакс эффекты на одностраничных веб-сайтах, а также лендингах с блоками, в которых фон занимает всю ширину экрана.

Если вы хотите увидеть, как будут выглядеть эффекты на реальном сайте, посетите демо-страницу на CodePen

Оригинал статьи: http://www.hongkiat.com/blog/parallax-scrolling-stickystack-js/

Перевод: Земсков Матвей

Прочитано 5348 раз
Мои услуги

Предлагаю следующие услуги:

  • Верстка шаблона сайта из дизайн-макета для CMS «1С-Битрикс Управление сайтом» и CMS “Joomla”
  • Создание форм различной сложности (обратная связь, анкеты и тп) для указанных CMS
  • Настройка и кастомизация компонентов и модулей для указанных CMS
  • Доработка модулей и компонентов для указанных CMS, добавление нестандартного функционала
  • Разработка лендингов (landing-pages)

По все вопросам обращайтесь через форму обратной связи

Скачать

Предлагаю вашему вниманию:

Наверх