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 Ihrem Projekt Effekte hinzuzufügen, habe ich hier eine Liste einiger Bibliotheken erstellt, mit denen Sie Effekte basierend auf dem Scroll-Ereignis erstellen können.

Wenn ein Benutzer auf Ihrer Webseite nach unten scrollt, kann die Aktion so gestaltet werden, dass sie eine Vielzahl von Animationsoptionen auslöst, z. B. Überblendungseffekte, Unschärfe, 3D, Parallaxe und mehr. Hier gibt es 25 JS-Bibliotheken, mit denen Sie diese Art von Antwort in Ihrem Site-Design erzielen können.

Lesen Sie mehr: 15 Beispiele für das richtige Scrollen im Website-Design

Scroll Reveal

Eine Bibliothek, die es einfach macht, Scroll-Animationen für Web und Mobile hinzuzufügen. Sie können benutzerdefinierte Lockerungen, 3D-Rotationen, Dauer und viele weitere Parameter für das Element festlegen, das Sie animieren möchten.

Abhängigkeiten: keine / Größe: 2.9kb | Lizenz: MIT

Aniview

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

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

Fade Into View

Ein Plugin, das den Fade In / Out-Effekt zu Elementen hinzufügt, wenn sie vorbestimmte Ansichtsfenster betreten oder verlassen.

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

WOW

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

Abhängigkeiten: Animieren.css / Größe: 8.23kb / Lizenz: MIT

ScrollMagic

Dieses Plugin zeigt einen ‚magischen‘ Effekt, wenn ein Benutzer die Seite scrollt. Es ist perfekt zum Animieren, Anheften eines Elements oder zum Umschalten der CSS-Klasse, alles basierend auf der Bildlaufposition. ScrollMagic kann bei der Erstellung einer Animationsszene mit GSAP und VelocityJS zusammenarbeiten. Die vollständigen Demos finden Sie hier.

Abhängigkeiten: jQuery, GSAP, Geschwindigkeit.js / Größe: 16.9kb / Lizenz: MIT

jScrollability

Mit jScrollability können Sie einzelne Webseiten mit komplexen Scroll-basierten Animationen erstellen. Beim Sroll des Benutzers wird das Element basierend auf den Bildlaufpositionen animiert. Animationen werden basierend auf der Bildlauftiefe ausgeführt, und natürlich können Sie den Anfang und das Ende der Animation festlegen.

Abhängigkeiten: jQuery / Größe: 1.86kb / Lizenz: MIT

pushIn.js

Eine einfache Bibliothek zum Hinzufügen des Dolly-In- oder Push-In-Effekts zu jedem Element, das funktioniert, wenn ein Benutzer durch die Seite scrollt. Es ist einfach zu implementieren: Fügen Sie einfach die Start-, Stopp- und Geschwindigkeitsparameter zu data-params zu Ihrem HTML-Element hinzu.

Abhängigkeiten: keine / Größe: 4.94kb / Lizenz: N/A

Scrollissimo

Dies ist eine JS-Bibliothek, um glatte Scroll-gesteuerte Animationen hinzuzufügen. Es nutzt die Tweens und Timelines des Greensocks, um flüssigere Animationen zu erzeugen.

Abhängigkeiten: GreenShock TweenLite/TweenMax / Größe: 2.94kb / Lizenz: N/A

jQuery Animation Scroll Plugin

Dies ist ein jQuery-Plugin zum Hinzufügen von durch Ansichtsfenster ausgelösten Animationen mit Greensock. Es macht es einfach, Elemente mit Lockerung, Transformation, Skalierung, Rotation und 3D-Animationen zu animieren.

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

Circlr

Mit Circlr können Sie die Rotationsanimation für ein Element erstellen, die durch Scrollen, Mausereignisse oder Berührungsereignisse ausgelöst wird. Es ist perfekt, um ein Schaufenster eines Produkts zu erstellen, das von allen 360-Graden aus betrachtet werden kann und durch Scrollen des Benutzers aktiviert wird.

Abhängigkeiten: keine / Größe: 6.05kb / Lizenz: MIT

Scrollimator

Scrollimator zeigt Ihnen die Position und den Bildlauffortschritt an und gibt Werte zurück, mit denen Sie Tween-Animationen ändern können, die an das Bildlaufverhalten des Benutzers angehängt sind. Es unterstützt vertikales und horizontales Scrollen.

Abhängigkeiten: keine / Größe: 37.7kb / Lizenz: N/A

Crossfade

Crossfade ist ein Plugin, um den Crossfade-Effekt zu einem Bild hinzuzufügen. Der unscharfe Effekt wird fortgesetzt, wenn ein Benutzer weiter nach unten scrollt.

Abhängigkeiten: jQuery / Größe: 3.19kb / Lizenz: MIT

Page Scroll Effect

Dies ist eine Bibliothek für experimentelle Page Scroll-Effekte, die von CodyHouse erstellt wurde. Es nutzt velocitey.js Animationen.

Abhängigkeiten: jQuery, Geschwindigkeit.js / Größe: 17.6kb / Lizenz: N/A

jquery.parallax-scroll

Mit dieser Bibliothek können Sie dem vertikalen Scrollen von Seiten einen glatten Parallaxeneffekt hinzufügen. Importieren Sie einfach jQuery und jquery.Lockerung.1.3.fügen Sie dann das Attribut 'data-parallax' und optionale Parameter zu Ihrem Element hinzu, um den Effekt anzupassen.

Abhängigkeiten: jQuery, jQuery.download / Größe: 8.72kb / Lizenz: GNU GPL

parallaxe.js

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

Abhängigkeiten: jQuery / Größe: 6.63kb / Lizenz: MIT

Enllax

Enllax ist eine superleichte Bibliothek zum Anwenden des Parallaxeeffekts auf jedes Bildlaufelement. Sie können Hintergrund- oder Vordergrundelemente festlegen, um diesen Effekt zu erzielen. Es funktioniert sowohl für vertikales als auch für horizontales Scrollen.

Abhängigkeiten: jQuery / Größe: 1.53kb | Lizenz: MIT

Blur on scroll

Mit dieser Bibliothek können Sie einem Bild den Blur-Effekt hinzufügen, der durch Scrollen der Seite ausgelöst wird. Je tiefer Sie die Seite nach unten scrollen, desto verschwommener wird das Bild.

Abhängigkeiten: keine / Größe: 1.1kb / Lizenz: N/A

boxLoader

boxLoader ist ein einfaches Plugin zum Laden von Elementen beim Scrollen der Seite. Die Parameter, die Sie einstellen sollten, sind die Richtungen (x oder y), Position auf Prozent, Effekt und auch Dauer.

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

Tilted Page Scroll

Wenn ein Benutzer durch eine Seite scrollt, zeigt dieses Plugin dem von Ihnen eingerichteten Element einen fantastischen 3D-Tilted-Effekt.

Abhängigkeiten: jQuery / Größe: 1.5kb / Lizenz: GNU GPL

AhRelax

AhRelax bietet eine Möglichkeit, schnelle Scroll-basierte Animationen zu erstellen. Es ist lighweight und hat auch große Leistung. Sie können hier mehr darüber lesen.

Abhängigkeiten: jQuery / Größe: 1.6kb / Lizenz: MIT

Fancy Scroll

Wenn Sie jemals den Überlauf-Scroll-Effekt auf Android oder iOS sehen, können Sie dies mit diesem Plugin jetzt auf Ihre Site anwenden. Sie können eine Animation hinzufügen, entweder einen Sprung oder Glühen, wenn ein Benutzer oben / unten auf der Seite erreicht.

Abhängigkeiten: jQuery / Größe: 2.64kb / Lizenz: GNU GPL

Parallax image scroll

Dieses Plugin lässt Elemente schweben und bewegen, wenn ein Benutzer die Seite nach unten oder oben scrollt.

Abhängigkeiten: jQuery / Größe: 8.69kb / Lizenz: MIT

Rlsmooth

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

Abhängigkeiten: jQuery / Größe: 1.95kb / Lizenz: MIT

Scrollme

Fügt dem Scrollen von Seiten einfache Effekte hinzu, z. B. Skalieren, Drehen, Übersetzen und Ändern der Deckkraft von Elementen. Es ist einfach einzurichten: Importieren Sie einfach die jQuery, dieses Plugin, und legen Sie die Animationsparameter für das Markup des Elements fest.

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

Parallax ImageScroll

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

Abhängigkeiten: jQuery / Größe: 8.01kb / Lizenz: MIT