Animieren mit der MO.JS-Bibliothek

MO.JS ist eine eindeutige Motion Graphics JavaScript-Bibliothek, die nicht nur Bildanimationslader von Vollbildvorrichtungen erleichtert, sondern auch Click-to-Animate-Micro-Interaktionen sowie Tonnen von Formmanipulationen.

Wenn Sie die Webdesign-Szene jetzt seit einiger Zeit verfolgt haben, sind die Chancen, dass Sie auf- oder vielleicht mit einer Vielzahl von Animationstechniken und Bibliotheken interagiert haben. Kerntechnologien wie CSS, HTML5 und JavaScript werden noch leistungsfähiger, und der Browser-Support verbessert sich mit der Zeit. Die Implikation ist, dass anspruchsvollere Webanimationen über Geräte unterstützt werden können. Denken Sie daran, wenn Sie eine komplexe Website bauen, Ihre Web-Hosting Der Service muss in der Lage sein, Ihr Projekt zu unterstützen.

Benötigen Sie etwas Animationsinspiration? Hier sind einige fantastische Beispiele von oben CSS-Animation. neu erstellen Möchten Sie eine Website ohne Codierung erstellen? Probiere diese Website-Builders. .

Wie kann Mo.Js helfen?

Webanimation, wie es erscheint, ist hier zu bleiben. Ein Manko mit den beliebtesten Animationstechniken besteht jedoch darin, dass sie in Bezug auf das Animieren von herkömmlichen UI / UX-Elementen wie Diashows, Tabbbed-Tasten und Dropdown-Menüs aufbewahren. Infolgedessen können Sie dabei Ihre Website zu vertraut und nicht aufregend machen.

Mo.js kann dabei helfen. Die Verwendung der Bibliothek hilft, die nicht so gewöhnlichen Standortelemente zu animieren, indem sie ihre integrierten Komponenten wie HTML, Form, Wirbel, Burst und Staffel verwenden. Die Bibliothek ist sehr einfach zu bedienen, schnell, retina fertig, modularer und offener Quelle. In diesem Tutorial werden die Grundlagen der Arbeit mit Mo.js eingeführt und zwei Techniken demonstriert; Blast und Blase.

01. Erste Schritte

Beginnen Sie mit der Erstellung eines Ordners, MO.JS, auf Ihrem Desktop, um die Tutorial-Dateien zu speichern. Erstellen Sie drei zusätzliche Ordner darin: CSS, um die Styling-Dateien, IMG für Bilder und JS für die JavaScript-Dateien zu speichern. HTML-Dateien werden im Stammordner gespeichert. (Sie möchten möglicherweise in Betracht ziehen Cloud-Speicherung. ).

02. Seitenstruktur erstellen

Öffnen Sie Ihren Code-Editor und erstellen Sie ein Index.html-Dokument, um Marke Up für die Haupt-Webseite enthalten. Beginnen Sie mit der Erstellung der Grundstruktur und geben Sie der Seite einen geeigneten Titel an.

 & lt ;! Doctype html & gt;
& lt; html lang = "de" & gt;
    & lt; head & gt;
        & lt; Meta Charset = "UTF-8" & GT;
        & lt; Titel & GT; BLAST TECHNIQUE & LT;
title & gt;
 & lt; / head & gt;
& lt; body & gt; & lt; / body & gt;
& lt; / html & gt; 

03. Struktur der Seite strukturieren

Das Tutorial ist in zwei Teile unterteilt; Der erste demonstriert die Blasttechnik, während der zweite das Blasenkonzept darstellt. Infolgedessen erstellen wir zwei HTML-Dateien, eine für jede Technik. Um die BLAST-Technik zu starten, erstellen Sie einen Div-Bereich, um den Seitentitel enthalten. Rendern Sie die Seite in Ihrem Browser, in der Sie den Text in der oberen linken Ecke unbekannt beobachten sollten.

 & lt; body & gt;
      & lt; div class = "text" & gt;
& lt; p & gt; Mo.js Animation & lt; / p & gt;
     & lt; / div & gt;
& lt; / body & gt;

04. Verbinde die CSS

Öffnen Sie Ihren Code-Editor und erstellen Sie in dem CSS-Ordner die Datei styles.css. Erstellen Sie einen Link zu dieser Datei in Ihrem HTML-Dokument, indem Sie diesen Code im Kopfteil hinzufügen, & lt; link rel = "stylesheet" href = "css / styles.css" & gt; . Da keine Stile hinzugefügt wurden, wird die Seite, wie in Schritt 3 dargestellt ist, alternativ, da das Styling minimal ist, Sie können sich entscheiden, Inline-Styling durch Kombination der HTML- und CSS zu verwenden.

05. Stil der Hintergrund

Als nächstes stilpfen wir den Hintergrund, indem wir ein Hintergrundbild hinzufügen. Wir haben den freien landschaftlichen Landschaftshintergrund von Nikolai Ultang von Pexels verwendet. Sie können hier herunterladen . Speichern Sie dieses (oder Ihr eigenes Bild) im IMG-Ordner. Rendern Sie die Seite, um Änderungen an dem Hintergrund anzuzeigen.

 Körper, HTML {
  Hintergrund-Bild: URL (BG.JPG);
  Hintergrundgröße: Abdeckung;
  Polsterung: 0;
  Marge: 0;
  Breite: 100%;
  Höhe: 100%;
  Überlauf versteckt;
}

06. Stil der Text

Der Text wird dann installiert, um in der Mitte der Seite zu rendern, da sie derzeit in der oberen linken Ecke erscheint. Beachten Sie, dass wir, um den Text zu zentralisieren, eine absolute Position auszuwählen und ihre genaue Positionierung mit den oberen, linken und rechten Margen einstellen. Der Text wird auch mit der Text-Transformation-Eigenschaft umgewandelt. Die Text-ALIGN-Eigenschaft ist ebenfalls in der Mitte eingestellt.

 Text {
  Font-Familie: Jahrhundert Gothic, Sans-Serif;
  Farbe: #FFF;
  Text-Transformation: Großbuchstaben;
  Schriftgröße: 50px;
  Schriftart: Bolder;
  Position: absolut;
  oben: 50px;
 links: 25%;
 Rechts: 30%;
  Text-ALIGN: CENTER;
     }

07. Installation mo.js.

Wie bei anderen Bibliotheken wird MO.JS über mehrere Optionen installiert. Der einfachste Ansatz, den wir beschäftigen, erfolgt direkt von einem CDN-Server. Fügen Sie den folgenden Code im Body-Bereich hinzu.

 & lt; Skript src = '//cdn.jsdelivr.net
Moj / 0.265.6 / mo.min.js '& gt; & lt; / script & gt; 

Wenn Sie eine FF-Linie entwickeln, kann die Bibliothek sein direkt von GitHub heruntergeladen und installiert werden, indem Sie die Packungen des BOWER- oder NPM-Pakets verwenden, indem Sie die entsprechenden Befehle verwenden.

 BOWER INSTALLIERT MO-JS
npm install mo-js installieren

Nach dem Herunterladen kann es direkt referenziert werden.

 & lt; Skript src = "mo.js" type = "Text
JavaScript "& gt; & lt; / script & gt;

Erstellen Sie schließlich eine neue script.js-Datei und speichern Sie sie im JS-Ordner. Wir fügen dieser Datei JavaScript hinzu. Verbinde es im Body-Abschnitt wie folgt. Legen Sie es unter dem Texttitel, wie unten gezeigt.

 & lt; body & gt;
& lt; div class = "text" & gt;
& lt; p & gt; mo.js Animation & lt; / p & gt;
& lt; / div & gt;
   & lt; Skript src = 'https: //cdn.jsdelivr
net / mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt;
  & lt; Skript src = "js / script.js" & gt; & lt;
script & gt;
& lt; / body & gt;

08. Erstellen Sie den ersten Blast

Bevor er den Code entwickelt, ist es klug, das zu markieren, was wir erstellen. Um etwas zu sprengen, bedeutet einfach, es in explosiver Weise in kleinere Bits auseinander zu bringen. Wir erstellen ein einfaches Objekt (Kreis) und setzen Sie ihn ein, dass er, wenn ein Benutzer auf ihn klickt, auf explosionsgefährdete Weise auseinander bricht.

09. Erstellen Sie das Kreisobjekt

Zunächst wird das zu brennende Objekt erstellt (Kreis). Mo.js unterstützt jedoch andere Formen, einschließlich Rechteck (rect), Kreuz, Gleich, Zickzack und Polygon. Wenn Sie den Shape-Typ nicht angeben, ist es standardmäßig an einem Kreis. Um einen einfachen Kreis zu erstellen, deklarieren Sie es mit dem VAR oder Const, und weisen Sie die Attribute aus, indem Sie die Formfunktion aufrufen.

 // Erstellen eines einfachen Objekts
Const circ = new mojs.shape ({
  isshowstart: wahr,
             Radius: 100,
});

Der Code erstellt das Standardkreisobjekt mit dem angegebenen Radius. Die IsShowstart-Variable ist ein boolescher Wert zugewiesen, um anzugeben, ob Sie das Objekt anzeigen müssen oder nicht. Rendern Sie den Code, um einen kleinen magentarigen Kreis in der Mitte der Seite anzuzeigen.

10. Animieren Sie den Kreis

Der Code-Snippet gibt an, dass sich die Skala und die Deckkraft von 1 bis 0 ändern, was darauf hinweist, dass das Objekt verschwindet. Die Anbindung und Verzögerung der Animation werden ebenfalls eingestellt. Beachten Sie, dass die Animation nicht spielt, da wir es noch nicht initialisieren. Fügen Sie dazu die unten fügen Sie die Funktion hinzu.

 document.addeventListener ('Klicken Sie auf', Funktion
(e) {{
Zirk.
 Wiederholung ( );
}); 

11. Machen Sie explodierende Polygone

Nun, da der Kreis animiert, erstellen wir eine Blast-Animation, die gleichzeitig zurechtkommt. Der erste BLAST verwendet die Polygonformen, um die Explosion herauszuziehen. Verwenden Sie zum Erstellen eines BLAST die MO.JS-Funktion, wie in dem untenstehenden Code-Snippet gezeigt.

 const burst1 = new mojs.burst ({
  links: 0, oben: 0,
  Anzahl: 7,
  Radius: {50: 250},
  Kinder: {
    füllen: 'weiß',
    Form: 'Polygon',
    Schlaganfall: {'weiß': '# A50710',
    Strichbreite: 4,
    Radius: 'Rand (30, 60)',
    radiusy: 0,
    Maßstab: {1: 0},
    pathscale: 'rand (.5, 1)',
    Grad: 360,
    isforce3d: true}});

Der Code weist der Explosion sieben Polygonformen zu und gibt zwei Radien an. Der erste bezieht sich auf die Gesamtanimation, während der zweite auf die spezifischen Polygonobjekte in der Animation konzentriert. Stellen Sie sicher, dass Sie der Ereignis-Listener-Funktion den Burst hinzufügen, damit er auf Mausklicks antwortet. Beachten Sie, dass zwei neue Parameter hinzugefügt wurden. die Melodie und generieren. Melodie macht den BLAST, um irgendwo auf der Seite zu rendern, während Generieren die Burst-Animation initialisiert. Rendern Sie die Seite. Beachten Sie die explodierenden Elemente, die gleichzeitig mit dem Kreis erscheinen.

 document.addeventListener ('Klicken Sie auf', Funktion
(e) {{
             Burst1.
  Tune ({x: e.pagex, y: e.nagey}).
  generieren ().
 Wiederholung ();
Zirk.
 Wiederholung ( );
});

12. Erstellen Sie den zweiten Blast

Als Nächstes erstellen wir den zweiten Blast mit unterschiedlichen Formoptionen. Der Code folgt der Struktur der vorherigen Explosion und ändert nur einige Parameter.

 const Burst2 = new mojs.burst ({
  oben: 0, links: 0,
  Anzahl: 4,
  Radius: {0: 250},
Kinder: {
    Form: ['circle', 'rect'],
    Punkte: 5,
    füllen: ['weiß'],
    Radius: 'Rand (30, 60)',
    Verzögerung: 'Staffel (50)',
    Lockerung: ['cubic.out', 'cubic.out',
'Cubic.out'],
    Maßstab: {1: 0},
    pathscale: 'rand (.5, 1)',
    isforce3d: true}});

Fügen Sie der Ereignis-Listener-Funktion den Burst hinzu.

 document.addeventListener ('Klicken Sie auf', Funktion
(e) {{
             Burst1.
  Tune ({x: e.pagex, y: e.nagey}).
  generieren ().
 Wiederholung ();
             Burst2.
             Tune ({x: e.pagex, y: e.nagey
}).
             generieren().
             Wiederholung();
Zirk.
 Wiederholung ( );
});

13. Fügen Sie Kreis-Explosionen hinzu

Um die Animation weiter zu verbessern, fügen wir kreisförmige Explosionen hinzu. Untersuchung des Codes in den Schritten 11 und 12 zeigt viele Ähnlichkeiten, die zwischen den beiden Burst-Typen bestehen. Beim Erstellen der dritten Explosion vermeiden wir es vermeiden, zu viel Code umzuschreiben, indem wir den Spread-Betreiber verwenden, der als drei Punkte (...) geschrieben wird. Erstens erklären wir jedoch eine Variable, die die ähnlichen Funktionen enthält, die wir wiederverwenden möchten. Danach können die beiden anderen Kreise durch einfacher Verwendung des Verbreitungsbedieners erstellt werden.

 // Erstellen der Variablen mit ähnlich
Parameter
    const circle_opts = {
  links: 0, oben: 0,
   füllen: 'weiß',
  Maßstab: {.2: 1},
  Deckkraft: {1: 0},
  isforce3d: wahr,
  isshowend: false.
};

Der Code gibt den Fülltyp, Skala, Deckkraft an und ob sie am Ende der Animation anzeigen soll. Die beiden Kreisanimationen werden wie folgt erstellt.

 const circle1 = new mojs.shape ({
  ... circle_opts,
  Radius: 200});
const circle2 = new mojs.shape ({
  ... circle_opts,
  Radius: 240,
  Lockerung: 'cubic.out',
  Verzögerung: 300});

Fügen Sie die kreisförmigen Formen hinzu.

 document.addeventListener ('Klicken Sie auf', Funktion
(e) {{
             Burst1.
  Tune ({x: e.pagex, y: e.nagey}).
  generieren ().
 Wiederholung ();
             Burst2.
             Tune ({x: e.pagex, y: e.nagey
}).
             generieren().
             Wiederholung();
Zirk.
 Wiederholung ( );
});

14. Rendern Sie eine grundlegende Blase

Im Gegensatz zu der Strahlanimation, die das Objekt in kleinere Stücke bricht, übersetzt die Bubble-Animation andererseits das angeklickte Objekt in einen größeren Raum. Das Konzept übernimmt die Analogie, um einen Ballon zu blasen, in dem das Objekt ständig ausdehnt. Dazu erstellen wir einfach eine neue Variable OpenBackground und weisen Attribute zu, die den gesamten Hintergrund eine ähnliche Farbe zum Objekt erreichen. Infolgedessen erzeugt dies die Nuance der Sprudeln.

 const openbackground = new mojs.shape ({
  Füllen: '# FC2D79',
  links: 0, oben: 0,
  Maßstab: {0: 4.5},
  isshowstart: wahr,
  Radius: 15,
  isforce3d: wahr,
  istimellos: wahr,
Verzögerung: 150,
  Radius: 200,
  Lockerung: 'cubic.out',
  Rückwärts-, 'ExpO.in',});

Stellen Sie sicher, dass Sie die Hintergrundvariable an die Ereignis-Listener-Funktion hinzufügen.

 OpenBackground.
  Tune ({x: e.pagex, y: e.nagey}).
  Replay (); 

15. Fügen Sie mehrere Formen hinzu

Nach dem Konzept in Schritt 14 bewegen wir uns nun vor, um mehrere farbige kreisförmige Objekte enthalten, die beim Klicken auf ähnliche Weise klicken und einen Text anzeigen. Bearbeiten Sie die vorhandene HTML-Datei und kopieren Sie den Code in den Körper. Es erstellt die grundlegende Struktur der Seite.

16. Helferbibliotheken hinzufügen

Als nächstes werden einige zusätzliche Bibliotheken im Body-Bereich hinzugefügt, um das Scrollen zu erleichtern und Sounds zu erstellen, wenn die Objekte geklickt werden.

& lt; Skript src = 'https: //cdnjs.cloudflare.com
ajax / libs / howler / 1.1.26 / howler.min.js '& gt; & lt;
script & gt;
& lt; Skript src = 'https: //cdn.jsdelivr.net
Mojs / 0.119.0 / mo.min.js '& gt; & lt; / script & gt;
& lt; Skript src = 'https: //cdn.jsdelivr.net
Hammerjs / 2.0.4 / hammer.min.js '& gt; & lt; / script & gt;
& lt; Skript src = 'https: //cdnjs.cloudflare.com
AJAX / LIBS / ISCROLL / 5.1.1 / ISCROLL-SONDE.MIN
js '& gt;
& lt; / script & gt;

17. Die Animation vorantreiben

Als Nächstes fügen wir Styles für die einzelnen Klassen hinzu, die in den HTML-Dateien hervorgehoben wurden. Die MO.JS-Funktionalität wird dann hinzugefügt. Der Vollcode (CSS und JS) wird mit den Tutorial-Dateien zur Überprüfung freigegeben.

18. Erfahren Sie mehr über Mo.js

Während das Tutorial die Blase- und Blast-Techniken demonstriert, sind weitere Ressourcen online verfügbar, mit der Sie Ihren Lernprozess schnell verfolgen können. Einige davon umfassen mo.js Tutorials auf Github und Demos auch auf Github .

Dieser Artikel wurde ursprünglich in Ausgabe 291 des kreativen Webdesign-Magazins veröffentlicht Webdesigner . Ausgabe 291 kaufen .

Weiterlesen:

• CSS-Kunst wird von alten Browsern brillant ruiniert
• Beste Stücke der Benutzerprüfungssoftware
• Tolle UI-Designs.