СПОДЕЛИ

Сега многу често може да видиме одредени елементи кои остануваат фиксни на страницата кога скролуваме надолу или нагоре, на пр. навигациското мени, заглавјето или страничната лента. Ова овозможува елементот да е постојано достапен, независно од позицијата на корисникот.

Овие елементи може да ги постигнете и само со CSS, меѓутоа со овој метод, ефектот нема да функционира при повеќе пребарувачи. Затоа ви составивме корисни JS библиотеки и jQuery додатоци со кои ќе го постигнете овој UX дизајн без проблеми.

1. Waypoints

sticky-waypointsWaypoints е библиотека за извршување на функција врз основа на позицијата на елементот во делот видлив за корисникот. Таа доаѓа со кратенка функција која го прави елементот залепен на позиција (фиксен). Вие може да ја прилагодувате насоката на скролување — нагоре, надолу, па дури лево и десно-според која елементот треба да се задржи во видното поле на корисникот.

2. Sticky Kit

sticky-stickykitСо StickyKit, не само што ќе постигнете елементот да се задржи во видно поле, туку може и да го направите фиксен во однос на елемент-родител кој го назначувате кон повеќе елементи одеднаш. Овој додадок доаѓа со некои напредни поставувања кои вклучуваат custom Events and Triggers.

3. StickyJS

sticky-stickyjsStickyJS е едноставен за употреба. Тој работи по инсталаијата без потреба од конфигурирање и модифицирање. Доколку ви треба да прилагодувате, тој доаѓа со Опции/Поставувања, Прилагоди Методи и Настани.

4. HeadRoom

sticky-headroomФиксно заглавје на страницата одзема вреден вертикален простор кој е многу важен кога ја гледате страницата од мобилен. Headroom е JavaScript библиотека која ќе ви креира фиксно заглавје кое ќе се скрие кога корисниците ќе скролуваат надолу, а ќе се појавува кога ќе скролуваат нагоре.

5. MakefixedJS

sticky-makefixedMakefixed ви дозволува елементите динамично да ви се фиксни како што корисникот скролува низ страницата. Само повикајте ја функцијата makeFixed() за елементот кој сакате да остане во видно поле. Погледнете го демото за да видите како работи.

6. MidnightJS

sticky-midnightjsMidnight Ви дозволува да залепите повеќе заглавја/ елементи и да се префрлате од еден во друг во зависност од позицијата во документот (DOM дрво). Погледнете го демото за да видите на што мислам. Дополнително може да ја менувате нивната боја само со додавање на атрибутот data-midnight со името на одредената боја.

7. ScrollMagic

sticky-scrollmagicScrollMagic има напредни карактеристики кои додаваат на интеракција за време на скролувањето. Може да закачите елементи од одредени скрол позиции, да додадете анимација врз основа на позицијата, па дури и да направите parallax ефект (каде позадината се движи поспоро од предната слика и дава на длабочина). Демото ќе ви претстави сѐ што овој додаток може да направи.

8. onScreen

sticky-onscreenonScreen е слична на Waypoints — ви дозволува да извршувате функции како елеметот влегува, заминува или постигнува одредена позиција во видното поле на пребарувачот.

9. jQuery Pin

sticky-jquerypinjQuery Pin е мал jQuery додаток за ,,закачување” или ,,откачување” на елементи на/од позиција. Моја омилена опција е можноста да го оневозможите кај одредени ширини на видното поле.

10. Sticky Float

sticky-stickyfloatSticky Float ни овозможува да даваме фиксна позиција на елементи која е во врска со нивниот родител-елемент. Може да ги поставите опциите за фиксирање според вашите барања со обезбедени параметри и промена на вредноста. Погледенте го демото овде.

11. Zebra Pin

sticky-zebrapinZebra Pin е лесен додаток кој прави било кој елемент да се залепи за својот содржател. Со овој додаток може да фиксирате елементи како навигацијата, страничните ленти, заглавјата, подножјата или било кој друг елемент кој сакате да остане видлив додека корисникот скролува надолу.

12. HC-Sticky

sticky-hcstickyСо HC-Sticky, може да направите фиксни елементи кои се во врска со сопствениот содржател, со било кој друг елемент или со самиот документ. Овој додаток има опции кои може да ги прилагодите според своите потреби, како растојание од врвот или дното, и др.

13. Sticky Mojo

sticky-mojoSticky Mojo е лесен, брз и флексибилен jQuery додаток кој прави неверојатни фиксни елементи. Комапатибилен е со модерните пребарувачи, а благо се влошува вo Internet Explorer.

14. Sticky Navbar

sticky-navbarДоколку сакате навикација на една страница која се задржува кога корисникот скролува надолу, тогаш ова е за вас. Sticky Navbar ќе ја постави вашата навигација во горниот дел од прозорецот на пребарувачот и ќе го потенцира anchor link за да се поврзе со соодветната секција на вашата страница. Може да додадете Animate.css за да го разубавите ефектот на навигација.

15. StickyStack

sticky-stickystackStickyStack ќе направи елеметите да се ставаат еден врз друг кога корисниците ќе го скролуваат елементот и ќе стасаат до горниот дел од видното поле. Со оваа библиотека, вашата долга страница ќе се трансформира во шпил карти.

Почетник си?

Не грижи се. Ако иднината си ја гледаш во оваа област нашите ментори се тука да ти помогнат да ги стекнеш потребните вештини. За почеток, погледни ги нашите студиските програми и курсевите кои можеш да ги следиш на далечина, во време и со динамика кои тебе ти одговараат.

Ти се допадна овој напис?
Се согласувам моите податоци да бидат префлени на MailChimp ( повеќе информации )
Стани член на клубот на веб професионалци Еверест и прв добивај информации кои можат да ти помогнат за твојот натамошен професионален развој.
И ние како и ти ги мразиме спамерите. Твојата email адреса никогаш нема да биде (про)дадена некому. Чесен збор.