Скроллинг параллакса стал проще с StickyStack.js

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

Вы также можете построить уникальный стиль параллакса с использованием StickyStack.js плагин. Это построен на JQuery и удерживает каждый раздел главной страницы наверху при прокрутке вниз.

Это создает иллюзия многоуровневого сайта где каждая страница “стеки” поверх другого. Это действительно круто и довольно легко настроить самостоятельно.

Хотя его довольно легко настроить, он требует некоторого понимания разработки веб-интерфейса.

Вы должны сначала создавать отдельные разделы страницы внутри основного контейнера. Таким образом, вы будете иметь все в HTML, так что вы можете нацеливаться на все с помощью функции StickyStack jQuery.

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

Вот образец кода со страницы GitHub:

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

Хотя это не было обновлено в течение двух лет, это все еще очень надежный плагин. Это работал во всех браузерах, которые я тестировал (Chrome, Safari и Firefox) с поддержка всех версий jQuery.

Плюс минимизированный файл только 2 КБ который является приличным размером для плагина.

Чтобы узнать больше, посетите основной репо и посмотрите, что может предложить StickyStack. Я думаю, что это работает лучше всего на одностраничные сайты или же целевые страницы с большими полноэкранными фонами.

Вы также можете проверить живое демо на CodePen если вы хотите увидеть, как это выглядит на живом сайте.