Parallax прокрутка легко з StickyStack.js

Ефекти паралакса приверніть увагу швидко. Ці ефекти зберегти певні фони в поле зору під час прокручування сторінки. Ви знайдете прокрутку паралакса на багатьох веб-сайтах і темах WordPress, і вони є великою частиною сучасного веб-дизайну.

Можна також створити a унікальний стиль паралакса за допомогою StickyStack.js підключати. Його побудований на jQuery і кожен розділ головної сторінки зберігається на вершині під час прокручування вниз.

Це створює ілюзія шаруватого веб-сайту де кожна сторінка “стеки” поверх іншої. Це дійсно здорово і досить легко налаштувати на свій розсуд.

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

Потрібно спочатку створювати окремі розділи сторінки всередині головного контейнера. Таким чином ви будете мати все укладено в HTML, таким чином, ви можете націлювати все за допомогою функції StickyStack jQuery.

Він також поставляється з декількома варіантами, де ви можете налаштувати батьківський контейнер, елементи, які повинні складати, і можливим тінь якщо вам подобається цей ефект.

Ось a зразок біт коду зі сторінки 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. Я думаю, що найкраще працює односторінкові веб-сайти або цільові сторінки з великим фоновим екраном.

Ви також можете перевірити a демо на CodePen якщо ви хочете побачити, як це виглядає на живому сайті.