Gadgetshowto
Lange Bildlaufseiten sind zu einem weit verbreiteten Webdesign-Trend geworden. Einer der coolsten Untertypen davon sind die Parallaxen-Bildlaufseiten, auf denen sich Bilder bewegen, um einen Parallaxeneffekt zu erzielen. Wenn der Benutzer die Seite nach unten scrollt, werden die Animationen ausgelöst und geben jeder Website bei korrekter Implementierung ein frisches Erscheinungsbild.
Das Erstellen einer Parallax-Scrolling-Site ist oft mühsam, da für die Erstellung gründliche Kenntnisse in CSS, Javascript und gutem Webdesign erforderlich sind. Hier ist eine Liste der Beste Parallax Scrolling Plugins Dies erleichtert Ihnen nicht nur das Erstellen von Parallaxen-Bildlaufseiten, sondern verfügt auch über eine gut ausgestattete Bibliothek mit Parallaxeneffekten, sodass Sie einfacher und schneller eine gut aussehende Webseite erstellen können.
HAFTUNGSAUSSCHLUSS:: Beachten Sie vor dem Start, dass für die Verwendung dieser Plugins einige Kenntnisse der Webtechnologien (HTML / CSS / Javascript) erforderlich sind. Die meisten der aufgelisteten Plugins verwenden jquery, daher sind möglicherweise auch Kenntnisse über Jquery erforderlich.
Parallax Scrolling Plugins
1. ScrollMagic
ScrollMagic ist eines der beliebtesten und funktionsreichsten JQuery-Plugins. Mit dieser Javascript-Bibliothek können Sie scheinbar magische Bildlaufeffekte erstellen. Mit ScrollMagic können Sie basierend auf Ihrer Bildlaufposition animieren. Dies bedeutet, dass Sie HTML-Elemente während des Bildlaufs für eine beliebige Dauer korrigieren, verschieben oder animieren und Ihrer Website problemlos Parallaxeeffekte hinzufügen können. Es ist sehr anpassbar und auch leicht (6 KB, wenn es gezippt wird). Neben anderen Parallax-Scroll-Plugins verfügt Scroll Magic über die beste Dokumentation und externe Ressourcen. Es ist auch perfekt mit Mobilgeräten kompatibel.
In ScrollMagic sind viele Beispiele aufgeführt. Schauen Sie sich diese an, um Inspiration und Anleitung zur Verwendung dieser Bibliothek zu erhalten.
Über:
Homepage: http://janpaepke.github.io/ScrollMagic/
Erstellt von: Jan Paepke
Installation:
1. CDN:
2. Download von Github
2. skrollr
skrollr ist eine leichte reine Javascript- und CSS-Bibliothek ohne jQuery. Es ist im Grunde die "Scroll Magic vereinfacht für CSS". Um skrollr verwenden zu können, müssen Sie weder Javascript noch jQuery kennen. Nur HTML und CSS reichen aus. skrollr verwendet Datenattribute, um jedes gewünschte HTML-Element zu animieren. Einer der Hauptnachteile von skrollr ist, dass Animationen nur funktionieren, während die Seite gescrollt wird. Andernfalls werden alle Effekte angehalten. Mit skrollr können Sie alle CSS-Eigenschaften Ihrer HTML-Elemente animieren.
Über:
Homepage: http://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 durch Zugreifen auf die URL wird jeder Abschnitt in einer übersichtlichen gleitenden Animation angezeigt. pagePiling.js ist mit allen Plattformen kompatibel - Desktop, Tablet und Mobile - und funktioniert mit den meisten Browsern. Es wird in älteren Browsern, die seine Animationen nicht unterstützen (wie IE 7), ordnungsgemäß beeinträchtigt. Um das Plugin verwenden zu können, müssen Sie ein CSS und eine Javascript-Datei in Ihren HTML-Code aufnehmen. pagePiling.js wird durch die Funktion (document) .ready initialisiert:
$ (Dokument) .ready (Funktion ()
$ ('# pagepiling'). pagepiling ();
);
Weitere Informationen zu erweiterten Initialisierungen finden Sie in der Datei README.md.
Über:
Homepage: http://alvarotrigo.com/pagePiling/
Erstellt von: alvarotrigo
Installation: Download von Github
4. Alton
Alton ist ein jQuery-Plugin für "Scroll-Jacking to Us". Scroll-Jacking bedeutet, dass der native Bildlauf Ihres Browsers zugunsten eines gezielten Bildlaufs deaktiviert ist, der Sie beim Starten (mit Ihrem Mausrad oder Touchpad) zum nächsten vertikalen Punkt auf dem Bildschirm oder zum oberen Rand des nächsten Containers führt.
Alton erlaubt drei verschiedene Arten von Funktionen: "Hero", "Bookend" und "Standard". Mit Standard können Sie das Scrollen ganzer Seiten mit jedem Abschnitt mit einer Höhe von 100% verwenden. Eine Schriftrolle bringt den nächsten Abschnitt oder den vorherigen Abschnitt hervor. Mit Bookend können Sie eine Art Buchstütze erstellen, während Hero Ihnen erlaubt, nur den Abschnitt 'Hero' zu scrollen, während der Rest der Seite natives Scrollen (wieder aktiviert) hat.
Über:
Homepage: http://paper-leaf.com/alton-jquery-scroll-jacking-plugin/
Erstellt von: Papierblatt
Installation: Download von Github
5. Stellar.js
Stellar ist ein jQuery-Plugin, mit dem Sie ganz einfach Parallaxen-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.
Mit Stellar können Sie sogar Parallaxenhintergründe erstellen, 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 übergeordnetes Versatz den Rand des Bildschirms plus oder minus Ihres eigenen optionalen Versatzes erreicht. Auf diese Weise können Sie sehr einfach komplizierte Parallaxenmuster erstellen. (Stellare Dokumentation)
Über:
Homepage: http://markdalgleish.com/projects/stellar.js/
Erstellt von: Mark Dalgeish
Installation: Download von Github
6. multiScroll.js
Dieses Plugin wurde von demselben Entwickler (alvarotrigo) erstellt, der das Plugin pagePiling.js erstellt hat. Im Grunde genommen können Sie mit einem Bildlauf einen Effekt erstellen, bei dem jeder Seitenabschnitt in zwei unterteilte Teile geladen wird, die beim Laden der Seite an ihren Platz verschoben werden. Schauen Sie auf der Homepage nach, wie dies in Ihrem Browser aussieht. Mit multiScroll.js können Sie die Bildlaufgeschwindigkeit, die Beschleunigung, die Option zum Scrollen der Tastatur und viele weitere Eigenschaften festlegen, sodass Sie den Effekt genau so anpassen können, wie Sie ihn benötigen.
Über:
Homepage: http://alvarotrigo.com/multiScroll/
Erstellt von: alvarotrigo
Installation: Download von Github
7. ScrollMe
ScrollMe ist ein Plugin zum Hinzufügen einfacher Parallaxen-Scroll-Effekte zu Ihrer Seite. Es kann die Deckkraft von Elementen auf der Seite skalieren, drehen, übersetzen und ändern, wenn Sie nach unten scrollen. ScrollMe erfordert kein Javascript und nur CSS-Kenntnisse sind ausreichend. Durch Hinzufügen der Klasse "animateme" und der erforderlichen Datenattribute können Sie jedes HTML-Element animieren. ScrollMe eignet sich am besten zum Hinzufügen von CSS-Effekten. Es ist leicht und alle Animationen sind flüssig, solange Sie sie in Maßen verwenden.
Über:
Homepage: http://scrollme.nckprsn.com/
Erstellt von: Nick Pearson
Installation: Download von Github
8. Parallaxenrolle
Parallax Scroll ist ein einfach zu verwendendes jQuery-Plugin, mit dem Sie den Parallax-Bild-Scroll-Effekt erstellen können, der auf Websites wie Spotify zu finden ist. Es ist ganz einfach zu bedienen - geben Sie einfach die erforderlichen CSS-Klassen für die Bildhalter an. Anstatt zu benutzen Tags, um dieses Plugin zu verwenden, müssen Sie Elemente verwenden, für die ein Hintergrundbild angegeben wurde (mithilfe der CSS-Eigenschaft 'Hintergrundbild'). Sie können die Elemente mithilfe von CSS @ media-Abfragen reaktionsfähig machen.
Über:
Homepage: http://parallax-scroll.aenism.com/
Erstellt von: Aen
Installation: Download von Github
9. Jarallax
Jarallax ist eine CSS- und Javascript-Bibliothek, die sich auf Parallax-Scrolling-Effekte spezialisiert hat. Jarallax wird mit Javascript konfiguriert (kein jQuery, nur reines Vanille-JS). Es unterstützt geglättete Bildlauffunktionen, Erleichterungen und Parallaxenanimationen. Jarallax wird von den meisten Browsern plattformübergreifend unterstützt. Auf der Jarallax-Website finden Sie 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 beginnen.
Über:
Homepage: http://www.jarallax.com/
Erstellt von: Jarallax
Installation: Download von der Jarallax-Website
10. Superscrollorama
Superscrollorama ist ein jQuery-basiertes Plugin, das Bildlaufanimationen unterstützt. Es wird von TweenMax und der Greensock Tweening Engine unterstützt, wodurch die Animationsleistung und die Laufruhe gesteigert werden. Superscrollorama-Animationen werden über jQuery aufgerufen, und Sie können auch die meisten Funktionen von TweenMax.js verwenden. Leider werden diese Animationen von Mobilgeräten nicht vollständig unterstützt (da Touchscreen-Geräte das Scrollen auf andere Weise handhaben). Mit der setScrollContainerOffset-Methode kann jedoch auf Superscrollorama-Effekte auf Mobilgeräten zugegriffen werden.
Hier ist der Code dafür:
.setScrollContainerOffset (x, y)
(x: der x-Versatz des Bildlaufcontainers, y: der x-Versatz des Bildlaufcontainers)
Über:
Homepage: http://johnpolacek.github.io/superscrollorama/
Erstellt von: johnpolacek
Installation: Download von Github
SIEHE AUCH: 10 besten statischen Site-Generatoren
