JavaScript-Bibliotheken für coole Bildlaufeffekte

Ein Website-Design wird mit gut ausgeführten Animationen zum Leben erweckt. Wenn Sie nach den richtigen Bibliotheken suchen, um Effekte zu Ihrem Projekt hinzuzufügen, habe ich hier eine Liste mit einigen der Bibliotheken erstellt Sie können verwenden, um Effekte basierend auf dem Scroll-Ereignis bereitzustellen.

Wenn ein Benutzer Ihre Webseite herunterblättert, wird die Aktion ausgeführt kann entworfen werden, um eine Vielzahl von Animationsoptionen auszulösen wie Überblendeffekte, Unschärfe, 3D, Parallaxe und mehr. Es gibt 25 JS-Bibliotheken, die Ihnen dabei helfen können, diese Art von Reaktion in Ihrem Site-Design zu erzielen.

Blättern Sie einblenden

Eine Bibliothek, die das Hinzufügen von Bildlaufanimationen für das Web und das Handy vereinfacht. Sie können dem Element, das Sie animieren möchten, benutzerdefinierte Beschleunigungen, 3D-Rotationen, Dauer und viele weitere Parameter einstellen.

Abhängigkeiten: Keine | Größe: 2,9 kb | Lizenz: MIT

Mehrfachansicht

Ein Plugin, das mit Animate.CSS zusammenarbeitet, um die Animationen nur zu aktivieren, wenn Ihr Element in den Ansichtsbereich kommt.

Abhängigkeiten: jQuery | Größe: 1kb | Lizenz: N / A

In Ansicht einblenden

Ein Plugin, das Elementen den Ein- / Ausblendeffekt hinzufügt, wenn diese in vorgegebene Ansichtsfenster ein- oder ausgehen.

Abhängigkeiten: jQuery | Größe: 3,81 kb | Lizenz: N / A

BEEINDRUCKEND

WOW zeigt Animate.css-Animationen beim Scroll-Ereignis an. Sie können die Animationsdauer, Verzögerungen, Offsets und Iterationen direkt vom HTML-Markup aus festlegen und dann die Klasse des Elements von JS aus aufrufen.

Abhängigkeiten: Animate.css | Größe: 8,23 kb | Lizenz: MIT

ScrollMagic

Dieses Plugin zeigt einen magischen Effekt, wenn ein Benutzer die Seite scrollt. Es eignet sich perfekt zum Animieren, Fixieren eines Elements oder zum Umschalten der CSS-Klasse, alle basierend auf der Bildlaufposition. ScrollMagic kann beim Erstellen einer Animationsszene mit GSAP und VelocityJS zusammenarbeiten. Die kompletten Demos finden Sie hier.

Abhängigkeiten: jQuery, GSAP, Velocity.js | Größe: 16,9 kb | Lizenz: MIT

jScrollability

Mit jScrollability können Sie einzelne Webseiten mit komplexen scrollbasierten Animationen erstellen. Beim Benutzer-Rollvorgang wird das Element basierend auf den Bildlaufpositionen animiert. Animationen werden basierend auf der Bildlauftiefe ausgeführt, und Sie können natürlich den Anfang und das Ende der Animation einstellen.

Abhängigkeiten: jQuery | Größe: 1,86 kb | Lizenz: MIT

pushIn.js

Eine einfache Bibliothek, um den Effekt "Dolly-In" oder "Push-In" zu jedem Element hinzuzufügen, das funktioniert, wenn ein Benutzer durch die Seite blättert. Es ist einfach zu implementieren: Fügen Sie einfach die Start-, Stopp- und Geschwindigkeitsparameter hinzu Datenparameter zu Ihrem HTML-Element.

Abhängigkeiten: keiner | Größe: 4,94 kb | Lizenz: N / A

Scrollissimo

Dies ist eine JS-Bibliothek zum Hinzufügen glatter, scrollgesteuerter Animationen. Es verwendet die Tweens und Zeitleisten des Greensock, um flüssigere Animationen zu erzeugen.

Abhängigkeiten: GreenShock TweenLite / TweenMax | Größe: 2,94 kb | Lizenz: N / A

jQuery Animation Scroll Plugin

Dies ist ein jQuery-Plugin zum Hinzufügen von durch Viewport ausgelösten Animationen mithilfe von Greensock. Es macht es einfach, Elemente mit Beschleunigungs-, Transformations-, Skalierungs-, Rotations- und 3D-Animationen zu animieren.

Abhängigkeiten: jQuery, GreenShock | Größe: 14kb | Lizenz: GNU GPL

Circlr

Mit Circlr können Sie die Rotationsanimation zu einem Element erstellen, das durch Scrollen, Maus- oder Berührungsereignisse ausgelöst wird. Es ist perfekt, um aus einem Produkt eine Vitrine zu machen, die von allen 360 Grad betrachtet werden kann, aktiviert durch Scrollen des Benutzers.

Abhängigkeiten: keiner | Größe: 6,05 kb | Lizenz: MIT

Scrollimator

Scrollimator zeigt Ihnen die Position und den Fortschritt des Scrollens an und gibt Werte zurück, die Sie zum Ändern von Tween-Animationen verwenden können, die an das Scrollverhalten des Benutzers angehängt sind. Es unterstützt vertikales und horizontales Scrollen.

Abhängigkeiten: keiner | Größe: 37,7 kb | Lizenz: N / A

Überblendung

Crossfade ist ein Plugin, um einem Bild den Crossfade-Effekt hinzuzufügen. Der verschwommene Effekt wird fortgesetzt, wenn ein Benutzer weiter nach unten blättert.

Abhängigkeiten: jQuery | Größe: 3,19 kb | Lizenz: MIT

Seiten-Scroll-Effekt

Dies ist eine Bibliothek für experimentelle Seitenrolleffekte, die von CodyHouse erstellt wurden. Es nutzt velocitey.js Animationen.

Abhängigkeiten: jQuery, Velocity.js | Größe: 17,6 kb | Lizenz: N / A

jquery.parallax-scroll

Mit dieser Bibliothek können Sie dem vertikalen Seitenlauf einen glatten Parallax-Effekt hinzufügen. Importieren Sie einfach jQuery und jquery.easing.1.3.js und fügen Sie dann das hinzu 'Daten-Parallaxe' Attribut und optionale Parameter zu Ihrem Element, um den Effekt anzupassen.

Abhängigkeiten: jQuery, jQuery.easing | Größe: 8,72 kb | Lizenz: GNU GPL

parallax.js

Parallax.js ist ein einfaches Plugin, das den von der Spotify-Website inspirierten Parallax-Scrolling-Effekt hinzufügt.

Abhängigkeiten: jQuery | Größe: 6,63 kb | Lizenz: MIT

Enllax

Enllax ist eine extrem leichte Bibliothek, die zum Anwenden des Parallax-Effekts auf ein beliebiges Bildlaufelement verwendet werden kann. Sie können Hintergrund- oder Vordergrundelemente so einstellen, dass sie einen Ethis-Effekt haben. Es funktioniert für vertikales und horizontales Scrollen.

Abhängigkeiten: jQuery | Größe: 1,53 kb | Lizenz: MIT

Beim Blättern verwischen

Diese Bibliothek hilft Ihnen, den Unschärfeeffekt einem Bild hinzuzufügen, das durch das Blättern der Seite ausgelöst wird. Je tiefer Sie auf der Seite nach unten scrollen, desto unschärfer wird das Bild.

Abhängigkeiten: keiner | Größe: 1,1 kb | Lizenz: N / A

boxLoader

boxLoader ist ein einfaches Plugin zum Laden von Elementen beim Blättern. Der Parameter, den Sie einstellen sollten, ist die Richtung (x oder y), die Position in Prozent, die Wirkung und auch die Dauer.

Abhängigkeiten: jQuery | Größe: 3,42 kb | Lizenz: N / A

Schrägansicht der Seite

Wenn ein Benutzer durch eine Seite blättert, zeigt dieses Plugin dem von Ihnen eingerichteten Element einen beeindruckenden 3D-Neigungseffekt.

Abhängigkeiten: jQuery | Größe: 1,5 kb | Lizenz: GNU GPL

AhRelax

AhRelax bietet eine Möglichkeit, schnelle scrollbasierte Animationen zu erstellen. Es ist leicht und hat auch eine hervorragende Leistung. Mehr darüber erfahren Sie hier.

Abhängigkeiten: jQuery | Größe: 1,6 kb | Lizenz: MIT

Fancy Scroll

Wenn Sie den Überlauf-Bildlaufeffekt auf Android oder iOS sehen, können Sie diesen mit diesem Plugin jetzt auf Ihre Website anwenden. Sie können eine Animation hinzufügen, entweder einen Sprung oder ein Glühen, wenn ein Benutzer den oberen / unteren Rand der Seite erreicht.

Abhängigkeiten: jQuery | Größe: 2,64 kb | Lizenz: GNU GPL

Parallax-Bildlauf

Dieses Plugin bewirkt, dass Elemente schweben und sich bewegen, wenn ein Benutzer auf der Seite nach oben oder unten blättert.

Abhängigkeiten: jQuery | Größe: 8,69 kb | Lizenz: MIT

Rsmooth

Dies ist ein kleines Plugin, um den fließenden Effekt zu erzeugen, wenn ein Benutzer die Seite nach unten oder nach oben rollt. Es stehen drei Effekte zur Verfügung: Slide, Fade und Show.

Abhängigkeiten: jQuery | Größe: 1,95 kb | Lizenz: MIT

Scrollme

Fügt dem Seiten-Scrollen einfache Effekte hinzu, z. B. Skalieren, Drehen, Verschieben und Ändern der Deckkraft von Elementen. Es ist ganz einfach einzurichten: Importieren Sie einfach jQuery, dieses Plugin, und legen Sie die Animationsparameter in der Markierung des Elements fest.

Abhängigkeiten: jQuery | Größe: 5,45 kb | Lizenz: N / A

Parallax ImageScroll

Mit diesem Plugin können Sie jedem Bild auf Ihrer Seite einen Parallax-Effekt verleihen. Es verwendet CSS3-Transformation, damit der Effekt funktioniert. Dieses Plugin unterstützt jQuery und AMD.

Abhängigkeiten: jQuery | Größe: 8,01 kb | Lizenz: MIT