Knihovny JavaScriptu pro efekty efektivního rolování

Web design ožívá s dobře provedenou animací. Pokud hledáte pro správné knihovny přidat efekty do projektu, zde jsem udělal seznam některých knihoven, které můžete použít pro efekty založené na události scroll.

Když uživatel posouvá vaši webovou stránku dolů, akce mohou být navrženy tak, aby spouštěly různé možnosti animace jako jsou efekty vyblednutí, rozmazání, 3D, paralaxa a další. Existuje 25 JS knihoven, které vám mohou pomoci dosáhnout tohoto druhu reakce ve vašem designu stránek.

Scroll Reveal

Knihovna, která usnadňuje přidání navigační animace pro web i mobilní zařízení. K prvku, který chcete animovat, můžete nastavit vlastní uvolnění, 3D rotace, trvání a mnoho dalších parametrů.

Závislosti: žádný | Velikost: 2,9kb Licence: MIT

Aniview

Zásuvný modul, který spolupracuje s programem Animate.CSS, aby umožnil animaci pouze tehdy, když váš prvek vstoupí do výřezu.

Závislosti: jQuery | Velikost: 1kb | Licence: N / A

Fade Into View

Zásuvný modul, který přidává efekt fade in / out na elementy, když vstupují nebo vystupují z předem určených výřezů.

Závislosti: jQuery | Velikost: 3,81kb Licence: N / A

WOW

WOW odhalí animace Animate.css po události scroll. Můžete nastavit délku animace, zpoždění, posuny a iterace přímo od značek HTML, pak stačí zavolat třídu elementu z JS.

Závislosti: Animate.css | Velikost: 8.23kb Licence: MIT

ScrollMagic

Tento plugin zobrazí „magický“ efekt, když uživatel posouvá stránku. Je ideální pro animaci, připínání prvku nebo přepínání třídy CSS, vše na základě pozice posouvání. ScrollMagic může spolupracovat s GSAP a VelocityJS při vytváření animační scény. Podívejte se na kompletní dema zde.

Závislosti: jQuery, GSAP, Velocity.js | Velikost: 16,9kb | Licence: MIT

jScrollability

Funkce jScrollability umožňuje vytvářet jednotlivé webové stránky s komplexními animacemi založenými na rolování. Při použití uživatele bude prvek animován na základě pozic posouvání. Animace běží na základě hloubky posouvání a samozřejmě můžete nastavit začátek a konec animace.

Závislosti: jQuery | Velikost: 1.86kb | Licence: MIT

pushIn.js

Jednoduchá knihovna, která přidává efekt dolly-in nebo push-in k libovolnému prvku, který funguje, když uživatel posouvá stránku. Snadná implementace: stačí přidat parametry start, stop a speed data-params HTML elementu.

Závislosti: žádný | Velikost: 4,94 kb | Licence: N / A

Scrollissimo

Jedná se o knihovnu JS, která přidává plynulé animace řízené rolováním. Využívá Greensockovy doplnění a časové osy pro generování hladších animací.

Závislosti: GreenShock TweenLite / TweenMax | Velikost: 2,94kb | Licence: N / A

jQuery Animace Scroll Plugin

Jedná se o plugin jQuery, který umožňuje přidat animaci spouštěnou výřezem pomocí aplikace Greensock. To usnadňuje animaci prvků s uvolněním, transformací, měřítkem, rotací a 3D animacemi.

Závislosti: jQuery, GreenShock | Velikost: 14kb | Licence: GNU GPL

Circlr

Circlr vám umožňuje vytvořit animaci rotace na element, spouštěnou rolováním, událostmi myši nebo událostmi dotyku. Je ideální vytvořit prezentaci produktu, který lze prohlížet ze všech 360 stupňů a aktivovat pomocí uživatelského rolování.

Závislosti: žádný | Velikost: 6,05 kb | Licence: MIT

Scrollimator

Scrollimator vám ukáže průběh pozice a rolování a návratové hodnoty, které můžete použít ke změně animací doplnění při chování uživatele při rolování. Podporuje vertikální a horizontální rolování.

Závislosti: žádný | Velikost: 37,7kb | Licence: N / A

Crossfade

Crossfade je plugin pro přidání efektu crossfade na obrázek. Rozmazaný efekt bude pokračovat tak, jak se uživatel posouvá dále dolů.

Závislosti: jQuery | Velikost: 3.19kb | Licence: MIT

Účinek posouvání stránky

Toto je knihovna pro experimentální efekty posouvání stránek vytvořené CodyHouse. Využívá to velocitey.js animace.

Závislosti: jQuery, Velocity.js | Velikost: 17,6kb Licence: N / A

jquery.parallax-scroll

Tato knihovna umožňuje přidat hladký efekt paralaxy na svislé posouvání stránky. Stačí importovat jQuery a jquery.easing.1.3.js, pak přidat „data-paralaxa“ atribut a volitelný patameters k vašemu elementu přizpůsobit efekt.

Závislosti: jQuery, jQuery.easing | Velikost: 8,72kb Licence: GNU GPL

parallax.js

Parallax.js je jednoduchý plugin, který přidává efekt paralaxového posouvání, inspirovaný webovou stránkou Spotify.

Závislosti: jQuery | Velikost: 6,63kb Licence: MIT

Enllax

Enllax je super lehká knihovna pro použití efektu paralaxy na jakýkoliv prvek rolování. Můžete nastavit prvky pozadí nebo popředí, aby se projevil etický efekt. Funguje pro vertikální i horizontální rolování.

Závislosti: jQuery | Velikost: 1,53kb | Licence: MIT

Rozostření na svitek

Tato knihovna vám pomůže přidat efekt rozostření na obrázek, který bude spuštěn rolováním stránky. Čím hlouběji se posouváte dolů po stránce, tím je obraz rozmazanější.

Závislosti: žádný | Velikost: 1.1kb | Licence: N / A

boxLoader

boxLoader je jednoduchý plugin pro načítání prvků při rolování stránky. Parametr, který byste měli nastavit, jsou směry (x nebo y), pozice na procentech, efekt a také trvání.

Závislosti: jQuery | Velikost: 3.42kb Licence: N / A

Naklonění stránky

Jak uživatel posouvá stránku, tento plugin odhalí úžasný 3D nakloněný efekt na prvek, který nastavíte.

Závislosti: jQuery | Velikost: 1,5kb | Licence: GNU GPL

AhRelax

AhRelax poskytuje způsob rychlých animací založených na rolování. Je to lehká váha a také skvělý výkon. Více se o tom dozvíte zde.

Závislosti: jQuery | Velikost: 1,6kb | Licence: MIT

Fancy Scroll

Pokud jste někdy viděli efekt přetočení na Android nebo iOS, můžete nyní tento plugin aplikovat na vaše stránky. Když uživatel dosáhne horní nebo dolní části stránky, můžete přidat animaci, buď odraz nebo záře.

Závislosti: jQuery | Velikost: 2,64kb Licence: GNU GPL

Posouvání obrázku Parallax

Tento plugin způsobí, že se prvky budou pohybovat a pohybovat se, jakmile uživatel posouvá stránku dolů nebo nahoru.

Závislosti: jQuery | Velikost: 8,69kb Licence: MIT

Rlsmooth

Jedná se o malý plugin, který umožňuje vytvořit plynulý efekt, když uživatel sklouzne dolů nebo nahoru na stránku. K dispozici jsou tři efekty: slide, fade a show.

Závislosti: jQuery | Velikost: 1,95kb | Licence: MIT

Scrollme

Přidává jednoduché efekty na rolování stránky, jako je měřítko, otočení, překlad a změna neprůhlednosti prvků. Snadno se nastavuje: stačí importovat jQuery, tento plugin a nastavit parametry animace na značce elementu.

Závislosti: jQuery | Velikost: 5.45kb Licence: N / A

Parallax ImageScroll

Tento plugin vám umožní dát paralaxový efekt libovolnému obrázku na vaší stránce. Využívá CSS3 Transform, aby efekt fungoval. Tento plugin má podporu pro jQuery a AMD.

Závislosti: jQuery | Velikost: 8.01kb | Licence: MIT