Come animare con la libreria mo.js

MO.JS è una libreria JavaScript Motion Graphics unica che non solo facilita i caricatori di animazione della pagina a schermo intero, ma anche micro-interazioni da click-to-animare e tonnellate di manipolazioni di forma.

Se hai seguito la scena del web design per un po 'ora, è probabile che tu abbia incontrato - o forse interagito con - una vasta gamma di tecniche e biblioteche di animazione. Le tecnologie principali come CSS, HTML5 e JavaScript stanno diventando ancora più potenti e il supporto del browser sta migliorando con il tempo. L'implicazione è che le animazioni web più sofisticate possono essere supportate su dispositivi. Ricorda, se stai costruendo un sito complesso, il tuo web hosting Il servizio deve essere in grado di supportare il tuo progetto.

Hai bisogno di qualche ispirazione di animazione? Ecco alcuni fantastici esempi di cima Animazione CSS. ricreare. Vuoi costruire un sito senza codifica? Prova questi costruttori di siti Web .

Come può aiutare Mo.JS?

L'animazione Web, come appare, è qui per rimanere. Tuttavia, una mancanza con le tecniche di animazione più popolari è che sono gravitati per animare elementi UI / UX convenzionali come presentazioni, pulsanti a schede e menu a discesa. Di conseguenza, usandoli, può eventualmente rendere il tuo sito troppo familiare e non eccitante.

Mo.JS può aiutare con questo. L'utilizzo della libreria aiuta a animare gli elementi del sito non così ordinari utilizzando i suoi componenti integrati come HTML, forma, turbinio, scoppio e barcolla. La biblioteca è molto facile da usare, veloce, retina pronta, modulare e open source. In questo tutorial, vengono introdotte le basi di lavoro con Mo.JS e due tecniche dimostrate; esplosioni e bolle.

01. Inizia

Inizia creando una cartella, Mo.JS, sul desktop per archiviare i file tutorial. Creare tre cartelle aggiuntive al suo interno: CSS per memorizzare i file styling, IMG per immagini e JS per i file JavaScript. I file HTML verranno memorizzati nella cartella principale. (Potresti voler considerare il backup con deposito cloud. ).

02. Creare la struttura della pagina

Apri il tuo editor di codice e crea un documento INDEX.HTML per contenere il segno per la pagina Web principale. Inizia creando la struttura di base e fornire un titolo adatto alla pagina.

 & lt;! DOCTYPE HTML & GT;
& lt; html lang = "en" & gt;
    & lt; head & gt;
        & lt; meta chater = "utf-8" & gt;
        & lt; Titolo & GT; BLAST Technique & Lt;
Titolo & GT;
 & lt; / head & gt;
& lt; corpo e GT; & lt; / corpo e GT;
& lt; / html & gt; 

03. Struttura la pagina

Il tutorial è diviso in due parti; Il primo dimostra la tecnica di esplosione, mentre il secondo illustra il concetto di bolle. Di conseguenza, prepariamo due file HTML, uno per ogni tecnica. Per iniziare la tecnica di esplosione, creare una sezione div per contenere il titolo della pagina. Rendi la pagina nel tuo browser dove dovresti osservare il testo non-styled nell'angolo in alto a sinistra.

 & lt; Body & GT;
      & lt; div class = "testo" e gt;
& lt; P & GT; Mo.js animazione & lt; / P & GT;
     & lt; / div & gt;
& lt; / corpo e GT;

04. Collega il CSS

Apri il tuo editor di codice e crea file stili.css all'interno della cartella CSS. Creare un link a questo file nel documento HTML aggiungendo questo codice nella sezione della testa, & lt; link rel = "stylesheet" href = "css / stili.css" & gt; . Dal momento che non sono stati aggiunti stili, la pagina viene eseguita come illustrato al punto 3. In alternativa, poiché lo stile è minimo, è possibile scegliere di utilizzare lo styling in linea combinando l'HTML e il CSS.

05. Stile lo sfondo

Successivamente, in stile lo sfondo aggiungendo un'immagine di sfondo. Abbiamo usato lo sfondo di paesaggio scenico gratuito di Nikolai Ultang da PEXELS. Puoi Scaricalo qui . Salva questo (o la tua immagine) all'interno della cartella IMG. Rendi la pagina per mostrare le modifiche allo sfondo.

 Corpo, HTML {
  sfondo - Immagine: URL (BG.jpg);
  Dimensioni di sfondo: copertina;
  Imbottitura: 0;
  Margine: 0;
  Larghezza: 100%;
  Altezza: 100%;
  Overflow: nascosto;
}

06. Stile il testo

Il testo viene quindi stilato per rendere al centro della pagina, poiché attualmente appare all'angolo in alto a sinistra. Si noti che per centralizzare il testo, selezioniamo una posizione assoluta e imposta il suo posizionamento esatto utilizzando i margini in alto, sinistra e destra. Il testo viene anche trasformato utilizzando la proprietà Transform. La proprietà di allineamento del testo è anche impostata sul centro.

 Testo {
  Fammon-family: Gotico secolo, sans-serif;
  Colore: #FFFF;
  Trasformazione del testo: maiuscolo;
  Dimensioni del carattere: 50 px;
  Peso dei fonti: audace;
  Posizione: assoluto;
  Top: 50 px;
 a sinistra: 25%;
 Desto: 30%;
  Text-Align: Center;
     }

07. Installa mo.js.

Come con altre librerie, Mo.JS è installato attraverso più opzioni. L'approccio più semplice, che impieghiamo, sta accedendolo direttamente da un server CDN. Aggiungi il seguente codice nella sezione del corpo.

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

Nel caso in cui si stia sviluppando la linea O FF, la biblioteca può essere scaricato direttamente da GitHub e installato utilizzando i pacchetti BOWER o NPM utilizzando i comandi appropriati.

 BOWER Installa Mo-JS
NPM Installa Mo-JS

Una volta scaricato, può essere referenziato direttamente.

 & lt; script src = "mo.js" type = "testo
JavaScript "& GT; & Lt; / Script & GT;

Infine, crea un nuovo file Script.js e salvalo nella cartella JS. Aggiungeremo funzionalità JavaScript a questo file. Collegarlo nella sezione del corpo come segue. Mettilo sotto il titolo del testo come mostrato di seguito.

 & lt; Body & GT;
& lt; div class = "testo" e gt;
& lt; P & GT; mo.js animazione & lt; / P & GT;
& lt; / div & gt;
   & lt; script src = 'https: //cdn.jsdelivr
rete / mojs / 0,265.6 / mo.min.js '& gt; & lt; / script & gt;
  & lt; script src = "js / script.js" & gt; & lt;
Script & GT;
& lt; / corpo e GT;

08. Crea il primo esplosione

Prima di procedere a sviluppare il codice, è saggio evidenziare ciò che stiamo creando. Per esplodere qualcosa significa semplicemente romperlo a pezzi più piccoli in modo esplosivo. Creeremo un semplice oggetto (cerchia) e la configuraremo alla ricerca che quando un utente fa clic su di essa, si rompe in modo esplosivo.

09. Creare l'oggetto Circle

Innanzitutto, viene creato l'oggetto da sfollare (cerchio). Tuttavia, Mo.JS supporta altre forme, incluso il rettangolo (rettante), croce, uguale, zigzag e poligono. Se non si riesce a specificare il tipo di forma, è predefinito a un cerchio. Per creare un cerchio semplice, dichiararlo usando il var o const e assegnargli i suoi attributi chiamando la funzione di forma.

 // Creazione di un oggetto semplice
Const Circ = New Mojs.Shape ({
  ishowstart: vero,
             Raggio: 100,
}););

Il codice crea l'oggetto cerchio predefinito con il raggio specificato. La variabile ISShowStart è assegnata un valore booleano per specificare se è necessario mostrare l'oggetto o meno. Rendi il codice per visualizzare un piccolo cerchio color magenta al centro della pagina.

10. Animare il cerchio

Lo snippet del codice specifica che la scala e l'opacità cambieranno da 1 a 0, indicando che l'oggetto scompare. Sono anche impostati l'addazione e il ritardo dell'animazione. Si noti che l'animazione non gioca dal momento che non abbiamo ancora inizializzarlo. Per fare ciò, aggiungi la funzione qui sotto.

 Document.AdDeventListener ('click', funzione
(e) {
Circzione.
 replay ();
}); 

11. Fai esplodere poligoni

Ora che il cerchio è animato, creiamo un'animazione di esplosione che si rende allo stesso tempo. Il primo BLAST utilizza le forme di poligono per estrarre l'esplosione. Per creare un'esplosione, utilizzare la funzione Mo.JS Burst come mostrato nello snippet di codice qui sotto.

 Cost Burst1 = New Mojs.burst ({
  A sinistra: 0, Top: 0,
  Conta: 7,
  RADIUS: {50: 250},
  bambini: {
    Riempi: "Bianco",
    Forma: 'Poligono',
    Stroke: {'Bianco': '# A50710'},
    Strokewidth: 4,
    Raggio: 'Rand (30, 60)',
    Radiusy: 0,
    Scala: {1: 0},
    PathScale: 'Rand (.5, 1)',
    Laurea: 360,
    isforce3d: true}});

Il codice assegna sette forme di poligono all'esplosione e specifica due radii. Il primo si riferisce all'animazione generale, mentre il secondo si concentra sugli specifici oggetti Polygon all'interno dell'animazione. Assicurarsi di aggiungere la funzione Burst alla funzione listener di eventi in modo che risponda ai clic del mouse. Si noti che sono stati aggiunti due nuovi parametri; la melodia e generare. Tune rende l'esplosione per il rendering ovunque nella pagina, mentre generano inizializza l'animazione Burst. Rendere la pagina. Osservare gli elementi esplosivi che appaiono contemporaneamente del cerchio.

 Document.AdDeventListener ('click', funzione
(e) {
             Burst1.
  TUNE ({X: E.PAGEX, Y: E.PAGEY}).
  creare ().
 Replay ();
Circzione.
 replay ();
}););

12. Crea il secondo scoppio

Successivamente, creiamo la seconda esplosione utilizzando diverse opzioni di forma. Il codice segue la struttura dell'esplosione precedente e cambia solo alcuni parametri.

 Cost Burst2 = New Mojs.burst ({
  Top: 0, a sinistra: 0,
  Conta: 4,
  RADIUS: {0: 250},
bambini: {
    Forma: ['cerchio', 'retta'],
    Punti: 5,
    Riempi: ['bianco'],
    Raggio: 'Rand (30, 60)',
    Ritardo: 'barcollare (50)',
    Allestimento: ['cubic.out', 'cubic.out',
'Cubic.out'],
    Scala: {1: 0},
    PathScale: 'Rand (.5, 1)',
    isforce3d: true}});

Aggiungi la raffica alla funzione listener degli eventi.

 Document.AdDeventListener ('click', funzione
(e) {
             Burst1.
  TUNE ({X: E.PAGEX, Y: E.PAGEY}).
  creare ().
 Replay ();
             Burst2.
             TUNE ({X: E.PAGEX, Y: E.PAGEY
}).
             creare().
             replay();
Circzione.
 replay ();
}););

13. Aggiungi esplosioni del cerchio

Per migliorare ulteriormente l'animazione, aggiungiamo esplosioni circolari. Esaminare il codice nei passaggi 11 e 12 rivela molte somiglianze esistenti tra i due tipi di raffiche. Nella creazione del terzo esplosione, evitiamo di riscrivere troppi codice utilizzando l'operatore diffuso che è scritto come tre punti (...). Tuttavia, in primo luogo, dichiareriamo una variabile che contiene le caratteristiche simili che vogliamo riutilizzare. Successivamente, gli altri due cerchi possono essere creati semplicemente usando l'operatore diffuso.

 // Creazione della variabile con simile
parametri
    Const Circle_OPTS = {
  A sinistra: 0, Top: 0,
   Riempi: "Bianco",
  Scala: {.2: 1},
  Opacità: {1: 0},
  isforce3d: vero,
  isshowend: falso.
};;

Il codice specifica il tipo di riempimento, la scala, l'opacità e se visualizzarli alla fine dell'animazione. Le due animazioni del cerchio sono create come segue.

 Const Circle1 = New Mojs.Shape ({
  ... Circle_opts,
  RADIUS: 200});
Const Circle2 = New Mojs.Shape ({
  ... Circle_opts,
  Raggio: 240,
  Allestimento: "cubic.out",
  Ritardo: 300});

Aggiungi le forme circolari.

 Document.AdDeventListener ('click', funzione
(e) {
             Burst1.
  TUNE ({X: E.PAGEX, Y: E.PAGEY}).
  creare ().
 Replay ();
             Burst2.
             TUNE ({X: E.PAGEX, Y: E.PAGEY
}).
             creare().
             replay();
Circzione.
 replay ();
}););

14. Rendendo una bolla di base

A differenza dell'animazione di esplosione, che rompe l'oggetto in pezzi più piccoli, l'animazione a bolle, d'altra parte, traduce l'oggetto cliccato in uno spazio più grande. Il concetto adotta l'analogia di far esplodere un palloncino dove l'oggetto si estende continuamente di dimensioni. Per fare ciò, semplicemente creiamo un nuovo openbackground variabile e assegnano attributi che renderà l'intero background ottenere un colore simile all'oggetto. Di conseguenza, questo crea la sfumatura del gorgoglio.

 Const OpenBackground = Nuovo Mojs.Shape ({
  Riempi: '# FC2D79',
  A sinistra: 0, Top: 0,
  Scala: {0: 4.5},
  ishowstart: vero,
  Raggio: 15,
  isforce3d: vero,
  istimelinato: vero,
Ritardo: 150,
  Raggio: 200,
  Allestimento: "cubic.out",
  backwarding: 'Expo.in',});

Assicurarsi di aggiungere la variabile di fondo alla funzione listener eventi.

 openbackground.
  TUNE ({X: E.PAGEX, Y: E.PAGEY}).
  Replay (); 

15. Aggiungi più forme

Seguendo il concetto al punto 14, ora avanzano l'esempio per includere più oggetti circolari colorati multipli, che in caso di clicking si espande in modo simile e visualizzano un certo testo. Modifica il file HTML esistente e copia il codice all'interno del corpo. Crea la struttura di base della pagina.

16. Aggiungi librerie di helper

Successivamente, alcune librerie aggiuntive vengono aggiunte nella sezione del corpo per facilitare lo scorrimento e produrre suoni quando gli oggetti vengono cliccati.

& lt; script src = 'https: //cdnjs.cloudflare.com
Ajax / Libs / Howler / 1.1.26 / Howler.min.js '& gt; & lt;
Script & GT;
& lt; script src = 'https: //cdn.jsdelivr.net
mojs / 0.119.0 / mo.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https: //cdn.jsdelivr.net
hammerjs / 2.0.4 / hammer.min.js '& gt; & lt; / script & gt;
& lt; script src = 'https: //cdnjs.cloudflare.com
Ajax / libs / iscroll / 5.1.1 / iscroll-sond.min
JS '& GT;
& lt; / script & gt;

17. Avanza l'animazione

Successivamente, aggiungiamo stili per le singole classi evidenziate nei file HTML. La funzionalità Mo.JS viene quindi aggiunta. Il codice completo (CSS e JS) è condiviso con i file tutorial per la revisione.

18. Ulteriori informazioni su Mo.JS

Mentre il tutorial dimostra le tecniche di bolle e esplosioni, ci sono ulteriori risorse disponibili online che possono aiutarti a tracciare velocemente il processo di apprendimento. Alcuni di questi includono Mo.JS Tutorials su GitHub e Demo anche su GitHub .

Questo articolo è stato originariamente pubblicato in emissione 291 di Creative Web Design Magazine Web designer . Comprare il problema 291. .

Per saperne di più:

• CSS Art diventa brillantemente rovinato dai vecchi browser
• I migliori pezzi di software di test dell'utente
• Great Ui Designs.