Hvordan animere med Mo.Js-biblioteket

Mo.Js er et unikt bevegelsesgrafikk javascript-bibliotek som ikke bare letter fullskjermsiden animasjonslastere i fullskjerm, men også klikk-til-animere mikro-interaksjoner, og tonnevis av form manipulasjoner.

Hvis du har fulgt webdesignscenen for en stund nå, er sjansen at du vil ha kommet over - eller kanskje samhandlet med - et bredt utvalg av animasjonsteknikker og biblioteker. Kjerne teknologier som CSS, HTML5 og JavaScript blir enda kraftigere, og nettleserstøtten forbedrer med tiden. Implikasjonen er at mer sofistikerte webanimasjoner kan støttes på tvers av enheter. Husk at hvis du bygger et komplekst nettsted, din Web Hosting. Tjenesten må være i stand til å støtte prosjektet ditt.

Trenger du noen animasjonsinspirasjon? Her er noen fantastiske eksempler på toppen CSS animasjon å gjenskape. Vil du bygge et nettsted uten koding? Prøv disse Nettstedbyggere .

Hvordan kan Mo.Js hjelpe?

Web animasjon, som det ser ut, er her for å bli. Imidlertid er en mangel med mest populære animasjonsteknikker at de er gravitated mot animerende konvensjonelle UI / UX-elementer som lysbildefremvisninger, tabbed-knapper og rullegardinmenyer. Som et resultat kan det til slutt gjøre nettstedet ditt for kjent og ikke spennende.

Mo.js kan hjelpe med dette. Bruk av biblioteket bidrar til å animere de ikke-så-vanlige stedelementene ved å benytte sine innebygde komponenter som HTML, form, virvel, burst og stagger. Biblioteket er veldig enkelt å bruke, rask, retina klar, modulær og åpen kildekode. I denne opplæringen blir det grunnleggende om å jobbe med Mo.js introdusert, og to teknikker som er demonstrert; blast og boble.

01. Kom i gang

Begynn med å lage en mappe, Mo.Js, på skrivebordet ditt for å lagre opplæringsfilene. Opprett tre ekstra mapper i det: CSS for å lagre stylingfilene, IMG for bilder og JS for JavaScript-filene. HTML-filer lagres i rotmappen. (Du vil kanskje vurdere å sikkerhetskopiere med skylagring ).

02. Opprett sidestruktur

Åpne kodeditoren din og opprett et index.html-dokument for å inneholde merke for den viktigste nettsiden. Begynn med å lage den grunnleggende strukturen og gi en passende tittel på siden.

 & lt;! DOCTYPE HTML & GT;
& lt; html lang = "en" & gt;
    & lt; head & gt;
        & lt; meta charset = "UTF-8" & gt;
        & lt; title & gt; blast teknikk & lt;
Tittel & GT;
 & lt; / head & gt;
& lt; body & gt; & lt; / body & gt;
& lt; / html & gt; 

03. Struktur på siden

Opplæringen er delt inn i to deler; Den første demonstrerer Blast-teknikken, mens den andre illustrerer boblekonseptet. Som et resultat, forbereder vi to HTML-filer, en for hver teknikk. For å starte Blast-teknikken, opprett en DIV-seksjon for å inneholde sidetittelen. Gjør siden i nettleseren din der du skal observere un-stylet tekst øverst til venstre.

 & lt; body & gt;
      & lt; div class = "tekst" & gt;
& lt; p & gt; Mo.js animasjon & lt; / p & gt;
     & lt; / div & gt;
& lt; / body & gt;

04. Link CSS

Åpne kodeditoren og opprett styles.css-filen i CSS-mappen. Opprett en lenke til denne filen i HTML-dokumentet ditt ved å legge til denne koden i hodet, & lt; link rel = "Stylesheet" href = "css / styles.css" & gt; . Siden ingen stiler er lagt til, gjør siden som illustrert i trinn 3. Alternativt, siden stylingen er minimal, kan du velge å bruke inline styling ved å kombinere HTML og CSS.

05. Stil bakgrunnen

Deretter stiler vi bakgrunnen ved å legge til et bakgrunnsbilde. Vi har brukt gratis naturskjønne landskapsbakgrunn av Nikolai Ultang fra Pexels. Du kan Last ned den her . Lagre dette (eller ditt eget bilde) inne i IMG-mappen. Gjør siden for å vise endringer i bakgrunnen.

 Kropp, HTML {
  Bakgrunnsbilde: URL (bg.jpg);
  Bakgrunnsstørrelse: Deksel;
  polstring: 0;
  margin: 0;
  Bredde: 100%;
  Høyde: 100%;
  Overflow: Skjult;
}

06. Stil teksten

Teksten blir deretter stylet for å gjengi midt på siden, da den for øyeblikket vises øverst til venstre. Merk at for å sentralisere teksten, velger vi en absolutt posisjon og angir den nøyaktige plasseringen med topp, venstre og høyre marginer. Teksten blir også forvandlet ved hjelp av tekst-transformasjonsegenskapen. Tekstjusteringseiendommen er også satt til senteret.

 Tekst {
  Font-Family: Century Gothic, Sans-serif;
  farge: #fff;
  tekst-transform: store bokstaver;
  Font-størrelse: 50px;
  font-vekt: dristigere;
  posisjon: absolutt;
  Topp: 50px;
 Venstre: 25%;
 Høyre: 30%;
  Tekstjustering: Senter;
     }

07. Installer mo.js.

Som med andre biblioteker, er Mo.Js installert gjennom flere alternativer. Den enkleste tilnærmingen, som vi ansetter, får tilgang til den direkte fra en CDN-server. Legg til følgende kode i kroppsdelen.

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

I tilfelle du utvikler O FF-linje, kan biblioteket være lastet ned direkte fra Github og installert ved å bruke Bower eller NPM-pakkene ved å bruke de aktuelle kommandoene.

 Bower installere mo-js
NPM Installer Mo-JS

Når den er lastet ned, kan den refereres direkte.

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

Til slutt, opprett en ny script.js-fil og lagre den i JS-mappen. Vi legger til JavaScript-funksjonalitet til denne filen. Koble den i kroppsseksjonen som følger. Plasser den under teksttittelen som vist nedenfor.

 & lt; body & gt;
& lt; div class = "tekst" & gt;
& lt; p & gt; mo.js animasjon & lt; / p & gt;
& lt; / div & gt;
   & lt; script src = 'https: //cdn.jsdelivr
Netto / mojs / 0.265.6 / mo.min.js '& gt; & lt; / script & gt;
  & lt; script src = "js / script.js" & gt;
Script & GT;
& lt; / body & gt;

08. Lag den første blasten

Før du fortsetter å utvikle koden, er det lurt å markere hva vi skaper. Å sprenge noe betyr bare å bryte det fra hverandre i mindre biter på en eksplosiv måte. Vi vil opprette et enkelt objekt (sirkel) og sette det opp på det når en bruker klikker den, bryter den fra hverandre på en eksplosiv måte.

09. Opprett sirkelobjektet

For det første er objektet som er blasted opprettet (sirkel). Men Mo.Js støtter andre former, inkludert rektangel (praktisk), kryss, like, zigzag og polygon. Hvor du ikke klarer å spesifisere formtypen, vil den være standard til en sirkel. For å lage en enkel sirkel, erklære det å bruke varen eller const og tilordne sine attributter ved å ringe formen funksjonen.

 // Opprette et enkelt objekt
Const circ = new mojs.Shape ({
  isshowstart: sant,
             RADIUS: 100,
});

Koden oppretter standard sirkelobjekt med den oppgitte radius. IsShowstart-variabelen er tildelt en boolsk verdi for å angi om du trenger å vise objektet eller ikke. Gjør koden for å vise en liten magenta-farget sirkel i midten av siden.

10. Animere sirkelen

Kodeutklippet angir at skalaen og opasiteten vil endres fra 1 til 0, noe som indikerer at objektet forsvinner. Aduration og forsinkelse av animasjonen er også satt. Vær oppmerksom på at animasjonen ikke spiller siden vi ennå ikke er i stand til å initialisere den. For å gjøre det, legg til funksjonen nedenfor.

 Document.AddeventListener ('Klikk', Funksjon
(e) {
Sirk.
 replay ();
}); 

11. Gjør eksploderende polygoner

Nå som sirkelen er animert, skaper vi en blast animasjon som gjør samtidig. Den første sprengningen bruker polygonformene for å trekke ut eksplosjonen. For å lage en blast, bruk Mo.Js-funksjonen som er vist i kodestykket nedenfor.

 const burst1 = new mojs.burst ({
  Venstre: 0, Topp: 0,
  Telle: 7,
  RADIUS: {50: 250},
  Barn: {
    Fyll: "Hvit",
    Form: 'Polygon',
    Stroke: {'White': '# A50710'},
    Strokewidth: 4,
    RADIUS: 'RAND (30, 60)',
    Radiusy: 0,
    skala: {1: 0},
    PATHSCALE: 'RAND (.5, 1)',
    grad: 360,
    isforce3d: sant}});

Koden tilordner syv polygonformer til eksplosjonen og spesifiserer to radii. Den første refererer til den samlede animasjonen, mens den andre fokuserer på de spesifikke polygonobjektene i animasjonen. Sørg for å legge til sprengningen i hendelseslytterfunksjonen slik at den reagerer på museklikk. Merk at to nye parametere er lagt til; melodien og genererer. Tune gjør blasten til å gjøre hvor som helst på siden, mens genererer initierer burst animasjonen. Gjøre siden. Følg de eksploderende elementene som vises samtidig med sirkelen.

 Document.AddeventListener ('Klikk', Funksjon
(e) {
             burst1.
  tune ({x: e.pagex, y: e.pagey}).
  generere ().
 replay ();
Sirk.
 replay ();
});

12. Lag den andre blast

Deretter lager vi den andre blasten ved å bruke forskjellige formalternativer. Koden følger strukturen til forrige blast og endrer bare noen få parametere.

 Const Burst2 = New Mojs.Burst ({
  Topp: 0, Venstre: 0,
  Telle: 4,
  Radius: {0: 250},
Barn: {
    Form: ['Circle', 'Rett'],
    Poeng: 5,
    Fyll: ['Hvit'],
    RADIUS: 'RAND (30, 60)',
    Forsinkelse: 'Stagger (50)',
    lettelse: ['cubic.out', 'cubic.out',
'Cubic.out'],
    skala: {1: 0},
    PATHSCALE: 'RAND (.5, 1)',
    isforce3d: sant}});

Legg til Burst til Event Listener-funksjonen.

 Document.AddeventListener ('Klikk', Funksjon
(e) {
             burst1.
  tune ({x: e.pagex, y: e.pagey}).
  generere ().
 replay ();
             burst2.
             tune ({x: e.pagex, y: e.pagey
}).
             generere().
             replay ();
Sirk.
 replay ();
});

13. Legg til sirkeleksplosjoner

For å forbedre animasjonen videre, legger vi til sirkulære eksplosjoner. Undersøkelse av koden i trinn 11 og 12 viser mange likheter som eksisterer mellom de to typen brister. Når vi skaper den tredje blast, unngår vi å omskrive for mye kode ved å bruke spredningsoperatøren som er skrevet som tre prikker (...). Imidlertid erklærer vi først en variabel som inneholder de tilsvarende funksjonene som vi ønsker å gjenbruke. Deretter kan de andre to sirkler opprettes ved å bare bruke spredningsoperatøren.

 // Opprette variabelen med lignende
parametere
    const circle_opts = {
  Venstre: 0, Topp: 0,
   Fyll: "Hvit",
  skala: {.2: 1},
  Opacity: {1: 0},
  isforce3d: sant,
  IsShowend: False
};

Koden angir fylltype, skala, opasitet og om du skal vise dem på slutten av animasjonen. De to sirkelanimasjonene er opprettet som følger.

 const sirkel1 = new mojs.Shape ({
  ... Circle_opts,
  radius: 200});
concirkelen2 = new mojs.Shape ({
  ... Circle_opts,
  RADIUS: 240,
  lettelse: 'cubic.out',
  forsinkelse: 300});

Legg til sirkulære former.

 Document.AddeventListener ('Klikk', Funksjon
(e) {
             burst1.
  tune ({x: e.pagex, y: e.pagey}).
  generere ().
 replay ();
             burst2.
             tune ({x: e.pagex, y: e.pagey
}).
             generere().
             replay ();
Sirk.
 replay ();
});

14. Gi en grunnleggende boble

I motsetning til blast animasjonen, som bryter objektet i mindre stykker, oversetter bobleanimasjonen, derimot, det klikkede objektet i en større plass. Konseptet vedtar analogien om å blåse opp en ballong hvor objektet kontinuerlig utvider i størrelse. For å gjøre dette, oppretter vi bare en ny variabel OpenBackground og tilordner attributter som vil få hele bakgrunnen til å oppnå en lignende farge til objektet. Som et resultat skaper dette nuance av boblende.

 const OpenBackground = new mojs.Shape ({
  Fyll: '# FC2D79',
  Venstre: 0, Topp: 0,
  skala: {0: 4.5},
  isshowstart: sant,
  RADIUS: 15,
  isforce3d: sant,
  Istimeleløs: Sant,
Forsinkelse: 150,
  RADIUS: 200,
  lettelse: 'cubic.out',
  Backwardasing: 'expo.in',});

Sørg for å legge til bakgrunnsvariabelen i hendelsestøtten.

 OpenBackground.
  tune ({x: e.pagex, y: e.pagey}).
  replay (); 

15. Legg til flere former

Etter konseptet i trinn 14 fremmer vi nå eksemplet for å inkludere flere fargede sirkulære objekter, som ved å klikke på Utvid på en lignende måte og vise litt tekst. Rediger den eksisterende HTML-filen og kopier koden i kroppen. Det skaper den grunnleggende strukturen på siden.

16. Legg til hjelpebiblioteker

Deretter legges noen ekstra biblioteker i kroppsseksjonen for å lette å rulle og produsere lyder når objektene klikkes.

& lt; script src = 'https: //cdnjs.cloudflare.com
Ajax / libs / howler / 1.1.26 / howler.min.js '& gt;
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-probe.min
JS '& GT;
& lt; / script & gt;

17. Advance animasjonen

Deretter legger vi til stiler for de enkelte klassene som er uthevet i HTML-filene. Mo.js-funksjonaliteten blir så tilsatt. Fullkoden (CSS og JS) deles med opplæringsfilene for gjennomgang.

18. Lær mer om mo.js

Mens opplæringen demonstrerer boble- og blastteknikker, er det ytterligere ressurser tilgjengelig på nettet som kan hjelpe deg med å spore din læringsprosess. Noen av disse inkluderer Mo.js Tutorials på Github og Demoer også på GitHub .

Denne artikkelen ble opprinnelig publisert i utgave 291 av Creative Web Design Magazine Webdesigner . Kjøp utgave 291. .

Les mer:

• CSS-kunst blir briljant ødelagt av gamle nettlesere
• Beste deler av brukertesting programvare
• Great Ui Designs.