Паралакс Скролиране стана лесно с StickyStack.js

Ефекти на паралакса вземете внимателно бързо. Тези ефекти поддържат определени гледни точки докато превъртате надолу по страницата. Ще откриете паралакс превъртане на много уебсайтове и WordPress теми и те са голяма част от съвременния уеб дизайн.

Можете също така да изградите a уникален паралакс стил използвайки 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.

Плюс това, файлът с минимизиран само 2KB което е приличен размер за плъгин.

За да научите повече, посетете основното репо и вижте какво може да предложи StickyStack. Мисля, че най-добре работи уебсайтове с една страница или целеви страници с големи фонове на цял екран.

Можете също да проверите a демо на CodePen ако искате да видите как това изглежда на живо на сайта.