Scrollmagic: lustiges Webdesign

Im Webdesign ist ein Trend wie der Stil, der für die Realisierung der Websites übernommen wurde und von den Benutzern in der Regel in vorübergehenden Zeiträumen stark akzeptiert wird. Ein Teil der bisherigen Trends im Jahr 2016, die offenbar auch 2017 den Ton angeben werden, sind die Animationen und langen Abschnitte mit viel Bildlauf.

Es ist kein Geheimnis, dass dieser Stil für den Benutzer sehr attraktiv ist und Spaß macht. Mit den Animationen können wir das Navigieren auf der Website intuitiv und unterhaltsam gestalten, solange sie gut verwendet werden. Aus diesem Grund haben wir mit dem jQuery ScrollMagic- Plugin ein Tutorial erstellt, um animierte Schriftrollen in Ihre Website aufzunehmen.

ScrollMagic: Unterhaltsames Webdesign

ScrollMagic ist eine Bibliothek in Javascript, um Interaktionen beim Verschieben von Websites zu erzielen. Es ist eine vollständige Überarbeitung des Vorgängers Superscrollorama und seine Architektur basiert auf Plugins, die eine einfache Anpassung und Erweiterbarkeit bieten.

Es ist ideal, wenn wir einige der folgenden Dinge implementieren möchten:

• Animation basierend auf der Position oder Verschiebung der Site. Lösen Sie die Animation aus oder synchronisieren Sie sie mit der Bewegung der Schriftrolle. Fügen Sie ohne großen Aufwand einen Parallaxeeffekt hinzu. Erstellen Sie eine Seite mit unendlichem Bildlauf und behandeln Sie das Laden von Inhalten mit Ajax.

ScrollMagic-Funktionen

• Optimierte Leistung, leicht, flexibel und erweiterbar. Event-Management und objektorientierte Programmierung. Es unterstützt adaptives Webdesign. Es unterstützt Bewegungen in beide Richtungen (horizontal und vertikal). Es unterstützt Bewegungen innerhalb von Containern (div). Es funktioniert perfekt für Browser: Firefox 26+, Chrome 30+, Safari 5.1+, Opera 10+, IE 9+. Das GitHub- Repository enthält eine detaillierte Dokumentation und viele Anwendungsbeispiele.

Holen Sie sich ScrollMagic

Es ist auf verschiedene Arten erhältlich.

1: GitHub

Git-Klon Git: //github.com/janpaepke/ScrollMagic.git

2: Laube

Laube installiere scrollmagic

3: Knotenpaket-Manager

npm install scrollmagic

4: CDN

cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.5/ScrollMagic.min.js

Sie können auch lesen, wie Sie das Design einer E-Mail in Outlook anpassen

Installation und Verwendung

Die Installation ist recht einfach. Wir fügen nur die Kerneldatei in die HTML-Dateien ein, in denen wir sie verwenden möchten.

;;

Zur Verwendung bietet das Plugin ein Controller-orientiertes Entwurfsmuster, zu dem eine oder mehrere Szenen hinzugefügt werden. Diese Szenen werden verwendet, um zu definieren, was in den Containern passiert, wenn sie sich zu einem bestimmten Punkt bewegen.

Dies wäre ein grundlegendes Beispiel:

// init controller var controller = new ScrollMagic.Controller (); // erstelle eine Szene neu ScrollMagic.Scene ({Dauer: 100, // die Szene sollte eine Bildlaufentfernung von 100px Offset haben: 50 // starte diese Szene nach dem Scrollen für 50px}).setPin ("# my-sticky- element ") // fixiert das Element für die Dauer der Szene.addTo (controller); // ordne die Szene dem Controller zu

Ein fortgeschritteneres Beispiel wäre, mehrere Offsets zu erzielen. Der Quellcode wäre:

$ (function () {// auf Dokument bereit warten // init controller var controller = new ScrollMagic.Controller (); // Tween erstellen var tween = TweenMax.to ("# animate", 0.5, {scale: 3, easy: Linear.easeNone}); // Szene erstellen var scene = new ScrollMagic.Scene ({triggerElement: "#multiDirect", Dauer: 400, Offset: 250}).setTween (tween).setPin ("# animate"). addIndicators ({name: "resize"}) // Indikatoren hinzufügen (Plugin erforderlich).addTo (Controller); // Controller horizontal initialisieren var controller_h = new ScrollMagic.Controller ({vertikal: false}); // Tween horizontal var erstellen tween_h = TweenMax.to ("# animate", 0.5, {Drehung: 360, Leichtigkeit: Linear.easeNone}); // Szene erstellen var scene_h = new ScrollMagic.Scene ({Dauer: 700}).setTween (tween_h). setPin ("# animate").addIndicators ({name: "rotate"}) // Indikatoren hinzufügen (Plugin erforderlich).addTo (controller_h);});

Weitere Beispiele mit ihrem Quellcode finden Sie in der Plugin-Dokumentation.

Wir empfehlen Ihnen, wie Sie eine Neuinstallation von Windows 10 mit einem USB-Stick durchführen