Рецоммендед, 2024

Избор Уредника

10 Бест Параллак Сцроллинг Плугинс

Дуге странице за помицање постале су уобичајен тренд веб дизајна. Једна од најзгоднијих подврста овога су паралаксне странице за помицање, гдје се слике крећу како би се добио ефект паралаксе. Како се корисник помиче по страници, анимације се активирају и свеукупно даје свјеж изглед и осјећај било којој веб страници ако се правилно имплементира.

Израда паралаксе странице је често заморна јер захтева дубинско познавање ЦСС-а, Јавасцрипт-а и доброг веб дизајна. Ево листе најбољих плугинова за скроловање паралаксе који вам не само да олакшавају стварање сајтова за померање паралаксе, већ имају и богату библиотеку ефеката паралаксе, тако да постаје лакше и брже да развијете веб страницу која изгледа добро. .

ОДРИЦАЊЕ : Пре него што почнете, имајте на уму да је за коришћење ових додатака потребно познавање веб технологија (ХТМЛ / ЦСС / Јавасцрипт). Већина наведених додатака користи јкуери, тако да би могло бити потребно и познавање Јкуери-а.

Параллак Сцроллинг Плугинс

1. СцроллМагиц

СцроллМагиц је један од најпопуларнијих и богатијих јкуери додатака. То је ЈаваСцрипт библиотека која вам омогућава да створите наизглед магичне ефекте свитка. Користећи СцроллМагиц можете анимирати на основу вашег сцролл положаја. То значи да можете да поправљате, померате или анимирате ХТМЛ елементе док се крећете, без обзира на трајање које желите, а такође лако додајете ефекте паралакса на вашу веб локацију. Веома је прилагодљив и такође лаган (6кб када је гзиппед). Између осталих паралаксе сцролл плугина, Сцролл Магиц има најбољу документацију и екстерне ресурсе. Савршено је компатибилан са мобилним уређајима.

СцроллМагиц има много наведених примера. Проверите да ли постоје инспирација и упутства за коришћење ове библиотеке.

О томе:

Хомепаге: //јанпаепке.гитхуб.ио/СцроллМагиц/

Креирао: Јан Паепке

Инсталација:

1. ЦДН:

2. Преузмите Гитхуб

2. скроллр

скроллр је лагана чиста Јавасцрипт и ЦСС библиотека, без укљученог јКуери-а. У основи је "Сцролл Магиц поједностављен за ЦСС". Да бисте користили скроллр, не морате знати Јавасцрипт или било који јКуери. Довољно је само ХТМЛ и ЦСС. скроллр користи атрибуте података да анимира било који ХТМЛ елемент који желите. Један од главних недостатака скроллр-а је да анимације раде само док се страница помера. У супротном, сви ефекти се стављају на чекање. скроллр вам омогућава да анимирате све ЦСС особине ХТМЛ елемената.

О томе:

Хомепаге: //принзхорн.гитхуб.ио/скроллр/

Цреатед би: Принзхорн

Инсталација: Преузмите Гитхуб

3. пагеПилинг.јс

Паге Пилинг је јКуери плугин који вам омогућава да креирате ваш сајт на различите делове који се гомилају један изнад другог. Након скроловања или приступања УРЛ-у, свака секција се открива у уредној клизној анимацији. пагеПилинг.јс је компатибилан са свим платформама - десктоп, таблет и мобилним - и ради са већином претраживача. Он се грациозно деградира на старијим прегледачима који не подржавају његове анимације (као што је ИЕ 7). Да бисте користили додатак, морате укључити ЦСС и Јавасцрипт фајл унутар ХТМЛ-а. пагеПилинг.јс се иницијализује функцијом (доцумент) .реади:

$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});

За напредније иницијализације, прођите кроз РЕАДМЕ.мд.

О томе:

Хомепаге: //алваротриго.цом/пагеПилинг/

Цреатед би: алваротриго

Инсталација: Преузмите Гитхуб

4. Алтон

Алтон је јКуери 'сцролл-јацкинг за нас' плугин. Сцролл јацкинг значи да је природни сцролл вашег претраживача онемогућен у корист циљаног скроловања које вас, када га покренете (помоћу точкића миша или тачпеда), одведе до следеће вертикалне тачке на екрану, или на врху следећег контејнера.

Алтон дозвољава три различите врсте функционалности, назване 'Херо', 'Боокенд' и 'Стандард'. Стандард вам омогућава да користите читаво померање странице, са сваким одељком од 100% висине. Свитак доноси сљедећи одјељак или претходни одјељак. Боокенд вам омогућава да направите искуство у виду боокенд-а, док вам Херо дозвољава да прелиставате само 'Херо' секцију, док остатак странице има (поново омогућено) природно померање.

О томе:

Хомепаге: //папер-леаф.цом/алтон-јкуери-сцролл-јацкинг-плугин/

Цреатед би: папер-леаф

Инсталација: Преузмите Гитхуб

5. Стеллар.јс

Стеллар је јКуери плугин путем којег можете лако додати ефекте скроловања паралаксе. Да бисте покренули, прво морате покренути $ .стеллар () функцију. Поставке анимације за појединачне елементе могу се конфигурирати користећи атрибуте података на том елементу.

Звјездана чак вам омогућава да имате позадине паралаксе, које су позадине које се премештају на свитак. Једна од најкориснијих карактеристика Стеллар.јс је компензација.

Сви елементи ће се вратити на своје првобитно позиционирање када њихови офсетни родитељи наиђу на ивицу екрана - плус или минус ваш опциони оффсет. То вам омогућава да створите замршене обрасце паралаксе врло лако. (Стеллар Доцументатион)

О томе:

Хомепаге: //маркдалглеисх.цом/пројецтс/стеллар.јс/

Креирао: Марк Далгеисх

Инсталација: Преузмите Гитхуб

6. мултиСцролл.јс

Овај додатак је креирао исти програмер (алваротриго) који је направио плугин за пагеПилинг.јс. Оно што је у основи мулти сцролл, то је да вам омогући да направите ефекат где се сваки одељак странице учитава у два подељена дела која клизају на место када се страница учита. Погледајте почетну страницу да бисте видели како ово изгледа у вашем прегледачу. мултиСцролл.јс вам омогућава да подесите брзину скроловања, олакшавање, опцију скроловања преко тастатуре и још много других својстава, тако да можете прилагодити ефекат тачно онако како је потребно.

О томе:

Хомепаге: //алваротриго.цом/мултиСцролл/

Цреатед би: алваротриго

Инсталација: Преузмите Гитхуб

7. СцроллМе

СцроллМе је додатак за додавање једноставних ефеката паралакса на вашу страницу. Може да скалира, ротира, преводи и мења непрозирност елемената на страници, док се померате надоле. СцроллМе не захтева Јавасцрипт, а довољно је само ЦСС знање. Додавањем класе “аниматеме” и потребних атрибута података, можете анимирати било који ХТМЛ елемент. СцроллМе се најбоље користи за додавање ЦСС ефеката. Лаган је и све анимације су глатке, све док их користите у модерирању.

О томе:

Хомепаге: //сцроллме.нцкпрсн.цом/

Креирао: Ницк Пеарсон

Инсталација: Преузмите Гитхуб

8. Параллак Сцролл

Параллак Сцролл је једноставан за коришћење јКуери плугин који вам омогућава да креирате ефекат померања паралаксе слике који се налази на сајтовима као што је Спотифи. Једноставно је користити - само наведите потребне ЦСС класе за носиоце слика. Уместо да користите да бисте користили овај додатак морате користити елементе који имају наведену позадинску слику (користећи ЦСС својство `бацкгроунд-имаге`. Елементе можете прилагодити помоћу ЦСС @медиа упита.

О томе:

Хомепаге: //параллак-сцролл.аенисм.цом/

Цреатед би: Аен

Инсталација: Преузмите Гитхуб

9. Јараллак

Јараллак је ЦСС и Јавасцрипт библиотека која је специјализована за ефекте скроловања паралаксе. Јараллак је конфигуриран користећи Јавасцрипт (не јКуери, само чиста ванила ЈС). Подржава глатке функције скроловања, олакшавање и анимацију паралаксе. Јараллак је подржан од стране већине претраживача, на свим платформама. Јараллак веб сајт има одличну документацију о томе како да прилагодите Јараллак за ваше потребе. Јараллак такође има видео туторијале који показују како да подесите Јараллак за ваш сајт и како да почнете.

О томе:

Хомепаге: //ввв.јараллак.цом/

Цреатед би: Јараллак

Инсталација: Преузмите са Јараллак веб сајта

10. Суперсцроллорама

Суперсцроллорама је плугин заснован на јКуери-у који подржава анимације за скроловање. Покреће га ТвеенМак и Греенсоцк Твеенинг Енгине, што повећава перформансе анимације и глаткоћу. Суперсцроллорама анимације се позивају преко јКуери, а можете користити и већину ТвеенМак.јс функција. Нажалост, ове анимације нису у потпуности подржане мобилним уређајима (зато што уређаји на додирном екрану управљају скроловањем на другачији начин). Међутим, користећи методу сетСцроллЦонтаинерОффсет, Суперсцроллорама ефектима се може приступити на мобилним уређајима.

Ево кода за ово:

.setScrollContainerOffset(x, y)

(к: к помак скрол-контејнера, и: к помак скрол-контејнера)

О томе:

Хомепаге: //јохнполацек.гитхуб.ио/суперсцроллорама/

Направио: јохнполацек

Инсталација: Преузмите Гитхуб

ВИДИ ТАКОЂЕ: 10 Бест Статиц Сите Генераторс

Top