Lange Bildlaufseiten sind zu einem sehr verbreiteten Trend im Webdesign geworden. Einer der coolsten Untertypen davon sind die Parallax-Scrolling-Sites, auf denen Bilder verschoben werden, um einen Parallax-Effekt zu erzeugen. Wenn der Benutzer auf der Seite nach unten blättert, werden die Animationen ausgelöst, und bei einer korrekten Implementierung erhält jede Website ein frisches Erscheinungsbild.
Eine Parallax-Scrolling-Site zu erstellen, ist oft langwierig, da sie gründliche Kenntnisse in CSS, Javascript und gutem Webdesign voraussetzt. Hier finden Sie eine Liste der besten Parallax-Scrolling-Plugins, die Ihnen nicht nur die Erstellung von Parallax-Scrolling-Sites erleichtern, sondern auch über eine gut ausgestattete Parallax-Effekt-Bibliothek verfügen, mit der es einfacher und schneller wird, eine gut aussehende Webseite zu erstellen .
HAFTUNGSAUSSCHLUSS : Bevor Sie beginnen, müssen Sie einige Kenntnisse der Web-Technologien (HTML / CSS / Javascript) haben, um diese Plugins verwenden zu können. Die meisten der aufgeführten Plugins verwenden Jquery, daher sind möglicherweise auch Kenntnisse in Jquery erforderlich.
Parallax Scrolling Plugins
1. ScrollMagic
ScrollMagic ist eines der beliebtesten und umfangreichsten Jquery-Plugins. Mit dieser JavaScript-Bibliothek können Sie scheinbar magische Scroll-Effekte erzeugen. Mit ScrollMagic können Sie anhand Ihrer Bildlaufposition animieren. Dies bedeutet, dass Sie HTML-Elemente während des Bildlaufs beliebig lange korrigieren, verschieben oder animieren können. Außerdem können Sie Ihrer Website problemlos Parallax-Effekte hinzufügen. Es ist in hohem Maße anpassbar und auch leicht (6kb, wenn gekippt). Scroll Magic bietet neben anderen Parallax-Scroll-Plugins die beste Dokumentation und externe Ressourcen. Es ist auch perfekt mit dem Handy kompatibel.
In ScrollMagic sind viele Beispiele aufgeführt. Hier finden Sie Anregungen und Anleitungen zur Verwendung dieser Bibliothek.
Über:
Homepage: //janpaepke.github.io/ScrollMagic/
Erstellt von: Jan Paepke
Installation:
1. CDN:
2. Herunterladen von Github
2. skrollr
skrollr ist eine reine reinen Javascript- und CSS-Bibliothek, an der keine jQuery beteiligt ist. Es ist im Grunde die "Scroll Magic für CSS vereinfacht". Um skrollr verwenden zu können, benötigen Sie kein Javascript oder keine jQuery. Nur HTML und CSS reicht aus. skrollr verwendet Datenattribute, um beliebige HTML-Elemente zu animieren. Ein Hauptnachteil von skrollr ist, dass Animationen nur funktionieren, wenn die Seite gescrollt wird. Ansonsten werden alle Effekte gehalten. Mit skrollr können Sie alle CSS-Eigenschaften Ihrer HTML-Elemente animieren.
Über:
Homepage: //prinzhorn.github.io/skrollr/
Erstellt von: Prinzhorn
Installation: Download von Github
3. pagePiling.js 
Page Piling ist ein jQuery-Plugin, mit dem Sie Ihre Website in verschiedenen Abschnitten erstellen können, die sich übereinander stapeln. Beim Scrollen oder beim Zugriff auf die URL wird jeder Abschnitt in einer ordentlich gleitenden Animation angezeigt. pagePiling.js ist mit allen Plattformen - Desktop, Tablet und Mobile - kompatibel und funktioniert mit den meisten Browsern. Bei älteren Browsern, die ihre Animationen nicht unterstützen (z. B. IE 7), wird der Wert ordnungsgemäß verringert. Um das Plugin verwenden zu können, müssen Sie eine CSS- und eine Javascript-Datei in Ihren HTML-Code einfügen. pagePiling.js wird mit der Funktion (document) .ready initialisiert:
$( document ).ready( function () {
$( ' #pagepiling ' ).pagepiling();
});
Für weitergehende Initialisierungen lesen Sie die Datei README.md.
Über:
Homepage: //alvarotrigo.com/pagePiling/
Erstellt von: alvarotrigo
Installation: Download von Github
4. Alton
Alton ist ein jQuery-Plug-in zum Blättern. Scroll-Jacking bedeutet, dass der native Scroll Ihres Browsers für ein gezieltes Scrollen deaktiviert ist. Wenn Sie (über Ihr Mausrad oder Ihr Touchpad) initiiert werden, gelangen Sie zum nächsten vertikalen Punkt auf dem Bildschirm oder zum oberen Rand des nächsten Containers.
Alton bietet drei verschiedene Artenfunktionen, die als "Hero", "Bookend" und "Standard" bezeichnet werden. Mit Standard können Sie den gesamten Seiten-Bildlauf verwenden, wobei jeder Abschnitt eine Höhe von 100% hat. Eine Schriftrolle bringt den nächsten Abschnitt oder den vorherigen Abschnitt hervor. Mit der Buchstütze können Sie eine Art Buchstütze erstellen, während Sie mit Hero nur den Bereich "Hero" scrollen können, während der Rest der Seite einen nativen Bildlauf (wieder aktiviert) hat.
Über:
Homepage: //paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Erstellt von: Papierblatt
Installation: Download von Github
5. Stellar.js
Stellar ist ein jQuery-Plugin, durch das Sie problemlos Parallax-Scrolling-Effekte hinzufügen können. Zum Ausführen müssen Sie zuerst die Funktion $ .stellar () ausführen. Animationseinstellungen für einzelne Elemente können mithilfe von Datenattributen für dieses Element konfiguriert werden.
Stellar bietet sogar Parallax-Hintergründe, dh Hintergründe, die beim Scrollen neu positioniert werden. Eine der nützlichsten Funktionen von Stellar.js sind Offsets.
Alle Elemente kehren zu ihrer ursprünglichen Position zurück, wenn ihr übergeordneter Versatz auf den Bildschirmrand trifft - plus oder minus Ihren eigenen optionalen Versatz. Dadurch können Sie sehr leicht komplizierte Parallax-Muster erstellen. (Stellare Dokumentation)
Über:
Homepage: //markdalgleish.com/projects/stellar.js/
Erstellt von: Mark Dalgeish
Installation: Download von Github
6. multiScroll.js
Dieses Plugin wurde vom selben Entwickler (alvarotrigo) erstellt, der auch das Plugin pagePiling.js erstellt hat. Grundsätzlich können Sie mit Multi-Scroll einen Effekt erzeugen, bei dem jeder Seitenbereich in zwei getrennte Teile geladen wird, die beim Laden der Seite in Position geraten. Schauen Sie sich die Homepage an, um zu sehen, wie dies in Ihrem Browser aussieht. Mit multiScroll.js können Sie die Scrollgeschwindigkeit, die Beschleunigung, die Option zum Scrollen der Tastatur und viele weitere Eigenschaften einstellen, sodass Sie den Effekt ganz nach Ihren Wünschen anpassen können.
Über:
Homepage: //alvarotrigo.com/multiScroll/
Erstellt von: alvarotrigo
Installation: Download von Github
7. ScrollMe
ScrollMe ist ein Plugin zum Hinzufügen einfacher Parallax-Scroll-Effekte zu Ihrer Seite. Es kann skaliert, gedreht, verschoben und die Deckkraft von Elementen auf der Seite geändert werden, wenn Sie nach unten scrollen. ScrollMe benötigt kein Javascript und nur CSS-Kenntnisse reichen aus. Durch Hinzufügen der Klasse "animateme" und eines der erforderlichen Datenattribute können Sie jedes HTML-Element animieren. ScrollMe wird am besten zum Hinzufügen von CSS-Effekten verwendet. Es ist leicht und alle Animationen sind flüssig, solange Sie sie in Maßen verwenden.
Über:
Homepage: //scrollme.nckprsn.com/
Erstellt von: Nick Pearson
Installation: Download von Github
8. Parallax Scroll
Parallax Scroll ist ein einfach zu verwendendes jQuery-Plugin, mit dem Sie den Parallax Image-Scroll-Effekt erstellen können, der auf Websites wie Spotify zu finden ist. Es ist sehr einfach zu verwenden - geben Sie einfach die erforderlichen CSS-Klassen für die Bildinhaber an. Anstatt zu benutzen Tags, um dieses Plugin verwenden zu können, müssen Sie Elemente verwenden, für die ein Hintergrundbild festgelegt wurde (mithilfe der CSS-Eigenschaft `background-image '.) Sie können die Elemente mit CSS @media-Abfragen ansprechen.
Über:
Homepage: //parallax-scroll.aenism.com/
Erstellt von: Aen
Installation: Download von Github
9. Jarallax
Jarallax ist eine CSS- und Javascript-Bibliothek, die auf Parallax-Scrolling-Effekte spezialisiert ist. Jarallax wird mit Javascript konfiguriert (keine jQuery, nur reine Vanille JS). Es unterstützt geglättete Bildlauffunktionen, Beschleunigung und Parallaxenanimation. Jarallax wird von den meisten Browsern plattformübergreifend unterstützt. Die Jarallax-Website bietet eine hervorragende Dokumentation, wie Sie Jarallax an Ihre Bedürfnisse anpassen können. Jarallax bietet auch Video-Tutorials, die zeigen, wie Sie Jarallax für Ihre Website einrichten und wie Sie damit beginnen.
Über:
Homepage: //www.jarallax.com/
Erstellt von: Jarallax
Installation: Download von der Jarallax-Website
10. Superscrollorama
Superscrollorama ist ein auf jQuery basierendes Plugin, das Scroll-Animationen unterstützt. Es wird von TweenMax und der Greensock Tweening Engine unterstützt, was die Animationsleistung und die Laufruhe erhöht. Superscrollorama-Animationen werden über jQuery aufgerufen, und Sie können auch die meisten TweenMax.js-Funktionen verwenden. Leider werden diese Animationen von mobilen Geräten nicht vollständig unterstützt (da Touchscreen-Geräte das Scrollen auf andere Weise verarbeiten). Mit der Methode setScrollContainerOffset können Sie jedoch auf mobile Superscrollorama-Effekte zugreifen.
Hier ist der Code dafür:
.setScrollContainerOffset(x, y)
(x: der x-Versatz des Scrollcontainers, y: der x-Versatz des Scrollcontainers)
Über:
Homepage: //johnpolacek.github.io/superscrollorama/
Erstellt von: johnpolacek
Installation: Download von Github
SEHEN SIE AUCH: 10 Best Static Site Generators
