Parallax Scrollen leicht gemacht mit StickyStack.js

Parallaxeffekte schnell Aufmerksamkeit erregen. Diese Effekte bestimmte Hintergründe im Blick behalten während Sie die Seite nach unten scrollen. Auf vielen Websites und WordPress-Motiven finden Sie Parallax-Scrollen. Sie sind ein großer Teil des modernen Webdesigns.

Sie können auch eine einzigartiger Parallax-Stil Verwendung der StickyStack.js Plugin. Es ist auf jQuery gebaut und hält jeden Hauptseitenabschnitt an der Oberseite fest, wenn Sie nach unten scrollen.

Das schafft die Illusion einer geschichteten Website wo jede Seite “Stapel” übereinander. Es ist wirklich cool und ziemlich einfach, es alleine zu installieren.

Es ist zwar ziemlich einfach einzurichten, erfordert jedoch ein gewisses Verständnis der Frontend-Entwicklung.

Sie müssen zuerst Erstellen Sie individuelle Seitenbereiche im Hauptbehälter. Auf diese Weise wirst du haben alles im HTML eingeschlossen, Sie können also mit der jQuery-Funktion von StickyStack alles anvisieren.

Es gibt auch einige Optionen, mit denen Sie das anpassen können übergeordneter Container, das Elemente, die gestapelt werden sollen, und möglich Box Schatten wenn dir dieser Effekt gefällt.

Hier ist ein Beispielbit Code von der GitHub-Seite:

 $ ('. main-content-wrapper'). stickyStack (containerElement: '.main-content-wrapper', stackingElement: 'section', boxShadow: '0 -3px 20px rgba (0, 0, 0, 0.25)' ); 

Obwohl dies seit etwa zwei Jahren nicht mehr aktualisiert wurde, ist es immer noch ein sehr zuverlässiges Plugin. Es funktionierte in allen von mir getesteten Browsern (Chrome, Safari & Firefox) mit Unterstützung für alle Versionen von jQuery.

Plus ist die minimierte Datei nur 2 KB Das ist eine anständige Größe für ein Plugin.

Um mehr zu erfahren, besuchen Sie das Haupt-Repo und sehen Sie, was StickyStack bieten kann. Ich denke es funktioniert am besten einseitige Websites oder Landing-Pages mit großen Hintergrundbildern.

Sie können auch einen auschecken Live-Demo auf CodePen Wenn Sie sehen möchten, wie dies auf einer Live-Site aussieht.