Rellax.js - Kostenlose Parallax-Funktionen mit Vanilla JavaScript

Parallax Scrollen sieht unglaublich aus, wenn es richtig gemacht wird. Es ist nicht eine Funktion, die Sie auf jeder Website benötigen, sondern für kreative Websites und Zielseiten, Parallax-Elemente schnell Aufmerksamkeit erregen.

Es gibt jede Menge kostenlose JavaScript-Bibliotheken für animierte Scrolleffekte aber manche sind aufgebläht oder für manche Menschen einfach zu komplex.

Deshalb empfehle ich Rellax.js für deine parallaxe braucht. Es ist ein kostenloses Open-Source-Plugin, das auf Vanilla-JavaScript basiert hat keine Abhängigkeiten.

Standardmäßig ist es erfordert nur einen einfachen Funktionsaufruf um die Parallax-Klasse Seitenelementen zuzuweisen. Beim Scrollen dann diese Elemente bleib fest und bewegen Sie sich mit dem Standpunkt des Benutzers.

Sie können diese Elemente so anpassen, dass sie näher, weiter weg oder hinter den Seitenelementen erscheinen. Das schafft die Illusion der Tiefe auf der Seite und alles funktioniert durch eine einfache JavaScript-Bibliothek.

Der gesamte Rellax-Quellcode ist kostenlos auf GitHub verfügbar, wenn Sie eine Kopie herunterladen möchten.

Das gesamte Setup verwendet eine einzige JS-Funktion Targeting der .Rellax Klasse wie folgt:

 var rellax = neuer Rellax ('. rellax'); 

Beachten Sie, dass Sie ziemlich viel verwenden können jede Klasse, die Sie wollen, aber das Beispiel Demo verwendet .Rellax der Einfachheit halber.

Von hier aus nur du wickeln Sie Ihre Parallax-Elemente ein in einem div mit der .Rellax Klasse und setze das Geschwindigkeitsattribut. Das funktioniert durch die Daten-Rellax-Geschwindigkeit benutzerdefiniertes Attribut, das Werte von -10 bis +10 akzeptiert.

Hier ist ein Beispielausschnitt aus dem HTML-Code auf der Demo-Seite:

 
 Ich bin besonders langsam und glatt 
 

Du kannst auch zentrale Elemente auf der Seite und Passen Sie die Elementpositionen an über CSS.

Rellax sagt Ihnen nicht, wie Sie die Seite strukturieren oder wie Sie CSS-Elemente auf Ihrer Seite definieren. Alles was es tut ist Erstellen Sie einen natürlichen Parallax-Scrolling-Effekt mit reinem JavaScript. Wie Sie das verwenden, liegt ganz bei Ihnen.

Ein sehen Live-Demo, Werfen Sie einen Blick auf die Hauptseite oder stöbern Sie durch das GitHub-Repo. Dies beinhaltet einige Dokumentationen sowie Links zu Live-Websites, die Rellax.js verwenden.

Und das Beste ist, das Team ist ständig bereit, Pull-Anfragen anzunehmen. Wenn Sie also Probleme feststellen oder Vorschläge für Funktionen haben, senden Sie einfach eine kurze Nachricht an das Team.