Почетна » Тоолкит » ЈаваСцрипт Либрариес фор Цоол Сцроллинг Еффецтс

    ЈаваСцрипт Либрариес фор Цоол Сцроллинг Еффецтс

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

    Када се корисник помера низ Вашу веб страницу, акција може бити дизајниран да покрене разне опције анимације као што су ефекти фаде, замућење, 3Д, паралакса и још много тога. Овде постоји 25 ЈС библиотека које вам могу помоћи да постигнете такав одговор у дизајну сајта.

    Сцролл Ревеал

    Библиотека која олакшава додавање анимације за претраживање и за веб и за мобилне уређаје. Можете подесити прилагођавање, 3Д ротације, трајање и многе мор параметре на елемент који желите анимирати.

    Зависности: ноне | Величина: 2.9кб | Лиценца: МИТ

    Анивиев

    Додатак који ради заједно са Анимате.ЦСС да омогући анимације само када ваш елемент дође у оквир за приказ.

    Зависности: јКуери | Величина: 1кб | Лиценца: Н / А

    Фаде Инто Виев

    Плугин који додаје ефекат фаде ин / оут елементима када улазе или излазе из унапред одређених прозора.

    Зависности: јКуери | Величина: 3.81кб | Лиценца: Н / А

    ВОВ

    ВОВ ће открити Анимате.цсс анимације након сцролл догађаја. Можете подесити трајање анимације, одлагања, помаке и итерације директно из ХТМЛ ознаке, а затим само позвати класу елемента из ЈС-а.

    Зависности: Анимате.цсс | Величина: 8.23кб | Лиценца: МИТ

    СцроллМагиц

    Овај додатак ће приказати ефекат "Магицал" када корисник помери страницу. Савршен је за анимирање, причвршћивање елемента или пребацивање ЦСС класе, све на основу позиције померања. СцроллМагиц може радити заједно са ГСАП и ВелоцитиЈС у креирању анимацијске сцене. Погледајте комплетан демо овде.

    Зависности: јКуери, ГСАП, Велоцити.јс | Величина: 16.9кб | Лиценца: МИТ

    јСцроллабилити

    јСцроллабилити вам омогућава да креирате појединачне веб странице са сложеним анимацијама заснованим на скролању. Након корисника, елемент ће се анимирати на основу сцролл позиција. Анимације се покрећу на основу дубине свитка, и наравно можете подесити почетак и крај анимације.

    Зависности: јКуери | Величина: 1.86кб | Лиценца: МИТ

    пусхИн.јс

    Једноставна библиотека која додаје долли-ин или пусх-ин ефект на било који елемент који ради када корисник помиче страницу. Лако је имплементирати: само додајте параметре за старт, стоп и спеед дата-парамс на ваш ХТМЛ елемент.

    Зависности: ниједан | Величина: 4.94кб | Лиценца: Н / А

    Сцроллиссимо

    Ово је ЈС библиотека за додавање глатких анимација контролисаних померањем. Користи греенсоцк-ове твеенс-ове и временске линије за генерисање глатких анимација.

    Зависности: ГреенСхоцк ТвеенЛите / ТвеенМак | Величина: 2.94кб | Лиценца: Н / А

    јКуери Плугин за помицање анимације

    Ово је јКуери плугин за додавање анимације која покреће виевпорт користећи Греенсоцк. То олакшава анимирање елемената олакшавањем, трансформисањем, скалирањем, ротацијом и 3Д анимацијама.

    Зависности: јКуери, ГреенСхоцк | Величина: 14кб | Лиценца: ГНУ ГПЛ

    Цирцлр

    Цирцлр вам омогућава да креирате анимацију ротације за елемент који се покреће померањем, догађајима миша или догађајима додира. Савршен је за излагање производа који се може гледати са свих 360 ступњева, активиран од стране корисника.

    Зависности: ниједан | Величина: 6.05кб | Лиценца: МИТ

    Сцроллиматор

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

    Зависности: ниједан | Величина: 37.7кб | Лиценца: Н / А

    Цроссфаде

    Цроссфаде је додатак који додаје ефекат цроссфаде на слику. Нејасан ефекат ће се наставити док се корисник помера даље.

    Зависности: јКуери | Величина: 3.19кб | Лиценца: МИТ

    Паге Сцролл Еффецт

    Ово је библиотека за експерименталне ефекте померања страница које је креирао ЦодиХоусе. Користи велоцитеи.јс анимације.

    Зависности: јКуери, Велоцити.јс | Величина: 17.6кб | Лиценца: Н / А

    јкуери.параллак-сцролл

    Ова библиотека омогућава додавање ефекта паралаксе на вертикално померање странице. Само увезите јКуери и јкуери.еасинг.1.3.јс, а затим додајте 'дата-параллак' атрибут и опционални патаметри за ваш елемент да бисте прилагодили ефекат.

    Зависности: јКуери, јКуери.еасинг | Величина: 8.72кб | Лиценца: ГНУ ГПЛ

    параллак.јс

    Параллак.јс је једноставан плугин који додаје ефекат скроловања паралаксе, инспирисан Спотифи вебсајтом.

    Зависности: јКуери | Величина: 6.63кб | Лиценца: МИТ

    Енллак

    Енллак је супер лагана библиотека за примену ефекта паралаксе на било који елемент померања. Можете подесити елементе позадине или предњег плана да имају ефекат етике. Ради и за вертикално и хоризонтално померање.

    Зависности: јКуери | Величина: 1.53кб | Лиценца: МИТ

    Блур на свитку

    Ова библиотека вам помаже да додате ефекат замућења на слику, која ће се покренути померањем странице. Што се дубље помичете по страници, слика постаје мутнија.

    Зависности: ниједан | Величина: 1.1кб | Лиценца: Н / А

    бокЛоадер

    бокЛоадер је једноставан додатак за учитавање елемената приликом помицања странице. Параметар који треба да поставите је правац (к или и), позиција на процентима, ефекат и трајање.

    Зависности: јКуери | Величина: 3.42кб | Лиценца: Н / А

    Тилтед Паге Сцролл

    Како се корисник креће кроз страницу, овај додатак ће открити страшан 3Д нагињање ефекта елементу који сте поставили.

    Зависности: јКуери | Величина: 1.5кб | Лиценца: ГНУ ГПЛ

    АхРелак

    АхРелак пружа начин за брзо креирање анимација заснованих на скролу. Тежак је и има одличне перформансе. Више о томе можете прочитати овдје.

    Зависности: јКуери | Величина: 1.6кб | Лиценца: МИТ

    Фанци Сцролл

    Ако икада видите ефекат свитка за прелијевање на Андроиду или иОС-у, помоћу овог додатка сада га можете примијенити на вашу веб-локацију. Можете додати анимацију, или одбијену или сјајну, када корисник досегне врх / дно странице.

    Зависности: јКуери | Величина: 2.64кб | Лиценца: ГНУ ГПЛ

    Помицање слике паралаксе

    Овај додатак ће елементе плутати и померати се док се корисник помера надоле или надоле.

    Зависности: јКуери | Величина: 8.69кб | Лиценца: МИТ

    Рлсмоотх

    Ово је мали додатак који ствара ефекат протока када корисник скролира страницу према горе или горе. Доступна су три ефекта: слајд, фаде и схов.

    Зависности: јКуери | Величина: 1.95кб | Лиценца: МИТ

    Сцроллме

    Додаје једноставне ефекте померању странице, као што су скалирање, ротирање, превођење и промена непрозирности елемената. Лако је подесити: само увезите јКуери, овај додатак, и подесите параметре анимације на ознаци елемента.

    Зависности: јКуери | Величина: 5.45кб | Лиценца: Н / А

    Параллак ИмагеСцролл

    Овај додатак вам омогућава да дате ефекат паралаксе било којој слици на вашој страници. Користи ЦСС3 Трансформ да би учинио ефект. Овај плугин има подршку за јКуери и АМД.

    Зависности: јКуери | Величина: 8.01кб | Лиценца: МИТ