Πώς να ζωντανέψει με τη βιβλιοθήκη mo.js

Το Mo.JS είναι μια μοναδική βιβλιοθήκη JavaScript που δεν διευκολύνει μόνο τους φορτωτές κινουμένων σχεδίων πλήρους οθόνης, αλλά και με τις μικρο-αλληλεπιδράσεις και τους τόνους των χειρισμών σχήματος.

Εάν ακολουθήσετε τη σκηνή σχεδιασμού ιστοσελίδων για λίγο τώρα, οι πιθανότητες είναι ότι θα έχετε συναντήσει - ή ίσως να αλληλεπιδράσετε με - μια ευρεία σειρά τεχνικών κινούμενων σχεδίων και βιβλιοθηκών. Οι βασικές τεχνολογίες όπως το CSS, HTML5 και JavaScript γίνονται ακόμη πιο ισχυροί και η υποστήριξη του προγράμματος περιήγησης βελτιώνεται με το χρόνο. Η συνέπεια είναι ότι πιο εξελιγμένα κινούμενα σχέδια ιστού μπορούν να υποστηριχθούν σε όλες τις συσκευές. Θυμηθείτε, αν δημιουργείτε μια πολύπλοκη τοποθεσία, το δικό σας web hosting Η υπηρεσία πρέπει να είναι σε θέση να υποστηρίξει το έργο σας.

Χρειάζονται κάποια έμπνευση κινούμενων σχεδίων; Εδώ είναι μερικά φοβερά παραδείγματα κορυφής CSS animation να αναδημιουργήσει. Θέλετε να δημιουργήσετε έναν ιστότοπο χωρίς κωδικοποίηση; Δοκιμάστε αυτά Οικοδόμοι ιστοτόπων .

Πώς μπορεί να βοηθήσει ο mo.js;

Web Animation, όπως φαίνεται, είναι εδώ για να μείνει. Ωστόσο, ένα μειονέκτημα με τις πιο δημοφιλείς τεχνικές κινούμενων εικόνων είναι ότι βαρύνουν την κίνηση των συμβατικών στοιχείων UI / UX όπως slideshows, τα κουμπιά με καρφιά και τα αναπτυσσόμενα μενού. Ως αποτέλεσμα, η χρήση τους μπορεί τελικά να κάνει τον ιστότοπό σας πολύ γνωστό και μη συναρπαστικό.

Το mo.js μπορεί να βοηθήσει με αυτό. Η χρήση της βιβλιοθήκης συμβάλλει στην εμφάνιση των μη-συνηθισμένων στοιχείων του τόπου χρησιμοποιώντας τα ενσωματωμένα συστατικά του, όπως HTML, σχήμα, στροβιλισμού, έκρηξη και κλιμακωτή. Η βιβλιοθήκη είναι πολύ εύκολη στη χρήση, γρήγορη, αμφιβληστροειδή έτοιμη, αρθρωτή και ανοιχτή πηγή. Σε αυτό το σεμινάριο, τα βασικά της εργασίας με το mo.js εισάγονται και δείχνουν δύο τεχνικές. έκρηξη και φούσκα.

01. Ξεκινήστε

Ξεκινήστε δημιουργώντας ένα φάκελο, mo.js, στην επιφάνεια εργασίας σας για να αποθηκεύσετε τα αρχεία φροντιστηρίων. Δημιουργήστε τρεις επιπλέον φακέλους μέσα σε αυτό: CSS για να αποθηκεύσετε τα αρχεία styling, το IMG για εικόνες και JS για τα αρχεία JavaScript. Τα αρχεία HTML θα αποθηκευτούν στον ριζικό φάκελο. (Μπορεί να θέλετε να εξετάσετε τη δημιουργία αντιγράφων ασφαλείας αποθήκευση σύννεφων ).

02. Δημιουργία δομής σελίδας

Ανοίξτε τον επεξεργαστή κωδικών σας και δημιουργήστε ένα έγγραφο Index.html για να περιέχει σήμανση για την κύρια ιστοσελίδα. Ξεκινήστε δημιουργώντας τη βασική δομή και δώστε έναν κατάλληλο τίτλο στη σελίδα.

 & lt;! DOCTYPE HTML & GT;
& lt; html lang = "en" & gt;
    & lt; κεφάλι & gt;
        & lt; meta charset = "utf-8" & gt;
        & lt; Τίτλος & GT; Blast Technique & LT;
Τίτλος & GT;
 & lt; / head & gt;
& lt; body & gt; & lt; / Body & GT;
& lt; / html & gt; 

03. Δομή της σελίδας

Το σεμινάριο χωρίζεται σε δύο μέρη. Το πρώτο καταδεικνύει την τεχνική έκρηξης, ενώ το δεύτερο απεικονίζει την έννοια της φούσκας. Ως αποτέλεσμα, ετοιμάζουμε δύο αρχεία HTML, ένα για κάθε τεχνική. Για να ξεκινήσετε την τεχνική έκρηξης, δημιουργήστε ένα τμήμα DIV για να περιέχει τον τίτλο σελίδας. Ρυθμίστε τη σελίδα στο πρόγραμμα περιήγησής σας όπου θα πρέπει να παρατηρήσετε κείμενο που δεν είναι στιλ από την επάνω αριστερή γωνία.

 & lt; Body & GT;
      & lt; div class = "κείμενο" & gt;
& lt; p & gt; Mo.js animation & lt; / p & gt;
     & lt; / div & gt;
& lt; / Body & GT;

04. Συνδέστε το CSS

Ανοίξτε τον επεξεργαστή κωδικού σας και δημιουργήστε το αρχείο Styles.css μέσα στο φάκελο CSS. Δημιουργήστε έναν σύνδεσμο σε αυτό το αρχείο στο έγγραφο HTML προσθέτοντας αυτόν τον κώδικα στο τμήμα κεφαλής, & lt; link rel = "stylesheet" href = "css / styles.css" & gt; . Δεδομένου ότι δεν έχουν προστεθεί στυλ, η σελίδα καθιστά απεικονίσεις όπως απεικονίζεται στο βήμα 3. Εναλλακτικά, δεδομένου ότι το στυλ είναι ελάχιστο, μπορείτε να επιλέξετε να χρησιμοποιήσετε inline styling συνδυάζοντας το HTML και CSS.

05. Στυλ το φόντο

Στη συνέχεια, στιλ μας το φόντο προσθέτοντας μια εικόνα φόντου. Χρησιμοποιήσαμε το ελεύθερο γραφικό τοπίο του Nikolai Ultang από τα pexels. Μπορείς Κατεβάστε το εδώ . Αποθηκεύστε αυτό (ή τη δική σας εικόνα) μέσα στο φάκελο IMG. Κάντε τη σελίδα για να εμφανίσετε αλλαγές στο παρασκήνιο.

 Σώμα, HTML {
  Ιστορικό - Εικόνα: URL (BG.jpg);
  Ιστορικό μέγεθος: κάλυψη;
  Padding: 0;
  Περιθώριο: 0;
  Πλάτος: 100%.
  Ύψος: 100%.
  Overflow: Κρυμμένο?
}

06. Στυλ το κείμενο

Το κείμενο στη συνέχεια στιβάζεται για να κάνει στο κέντρο της σελίδας, καθώς εμφανίζεται αυτή τη στιγμή στην επάνω αριστερή γωνία. Σημειώστε ότι για να συγκεντρώσετε το κείμενο, επιλέγουμε μια απόλυτη θέση και ρυθμίζουμε την ακριβή τοποθέτησή του χρησιμοποιώντας τα επάνω, αριστερά και δεξιά περιθώρια. Το κείμενο μετατρέπεται επίσης χρησιμοποιώντας την ιδιότητα μετασχηματισμού κειμένου. Το ακίνητο ευθυγράμμισης κειμένου έχει οριστεί επίσης στο Κέντρο.

 Κείμενο {
  ΓΤΟΛΙΚΗ ΟΙΚΟΝΟΜΙΚΗ ΟΙΚΟΓΕΝΕΙΑ: Αέριο Γοτθικό, Sans-Serif.
  Χρώμα: #FFF;
  Κείμενο-μετασχηματισμό: κεφαλαία;
  Μέγεθος γραμματοσειράς: 50px;
  Γραμματοσειρά γραμματοσειράς:
  Θέση: Απόλυτη.
  Κορυφή: 50px;
 Αριστερά: 25%.
 Δεξιά: 30%.
  Κείμενο-Ευθυγράμμιση: Κέντρο;
     }

07. Εγκαταστήστε mo.js

Όπως και με άλλες βιβλιοθήκες, το mo.js είναι εγκατεστημένο μέσω πολλαπλών επιλογών. Η απλούστερη προσέγγιση, η οποία χρησιμοποιούμε, το έχει πρόσβαση απευθείας από έναν διακομιστή CDN. Προσθέστε τον ακόλουθο κώδικα στο τμήμα σώματος.

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

Σε περίπτωση που αναπτύσσετε τη γραμμή FF, η βιβλιοθήκη μπορεί να είναι κατεβάσει απευθείας από το github και εγκατασταθεί χρησιμοποιώντας τις συσκευασίες BOWer ή NPM χρησιμοποιώντας τις κατάλληλες εντολές.

 Τοποθετήστε το MO-JS
npm εγκαταστήστε το mo-js

Μόλις ληφθεί, μπορεί να αναφερθεί απευθείας.

 & lt; script src = "mo.js" type = "κείμενο
javascript "& gt; / script & gt;

Τέλος, δημιουργήστε ένα νέο αρχείο script.js και αποθηκεύστε το στο φάκελο JS. Θα προσθέσουμε λειτουργικότητα JavaScript σε αυτό το αρχείο. Συνδέστε το στο τμήμα του σώματος ως εξής. Τοποθετήστε το κάτω από τον τίτλο κειμένου όπως φαίνεται παρακάτω.

 & lt; Body & GT;
& lt; div class = "κείμενο" & gt;
& lt; p & gt; mo.js animation & lt; / p & gt;
& lt; / div & gt;
   & lt; script src = 'https: //cdn.jsdelivr
net / mojs / 0.265.6 / mo.min.js '& gt; / script & gt;
  & lt; script src = "js / script.js" & gt; & lt;
script & gt;
& lt; / Body & GT;

08. Δημιουργήστε την πρώτη έκρηξη

Πριν προχωρήσετε στην ανάπτυξη του κώδικα, σοφός να τονίσετε αυτό που δημιουργούμε. Για να εκτοξεύσει κάτι απλά σημαίνει να το σπάσετε σε μικρότερα κομμάτια με εκρηκτικό τρόπο. Θα δημιουργήσουμε ένα απλό αντικείμενο (κύκλος) και θα το αναζητήσουμε όταν ένας χρήστης κάνει κλικ, σπάει με εκρηκτικό τρόπο.

09. Δημιουργήστε το αντικείμενο κύκλου

Πρώτον, δημιουργείται το αντικείμενο που πρόκειται να εκτοξευθεί (κύκλος). Ωστόσο, το mo.js υποστηρίζει άλλα σχήματα, συμπεριλαμβανομένου του ορθογωνίου (rect), το σταυρό, ίσο, zigzag και πολύγωνο. Από πού αποτυγχάνετε να καθορίσετε τον τύπο σχήματος, θα προεπιλεγεί σε έναν κύκλο.Για να δημιουργήσετε έναν απλό κύκλο, να το δηλώσετε χρησιμοποιώντας το VAR ή Const και να αντιστοιχίσετε τα χαρακτηριστικά του καλώντας τη λειτουργία σχήματος.

 // Δημιουργία απλού αντικειμένου
Const circ = new mojs.Shape ({
  isshowstart: αλήθεια,
             Ακτίνα: 100,
});

Ο κώδικας δημιουργεί το προεπιλεγμένο αντικείμενο κύκλου με τη δεδομένη ακτίνα. Η μεταβλητή isshowstart έχει εκχωρηθεί μια τιμή Boolean για να καθορίσετε αν πρέπει να εμφανίσετε το αντικείμενο ή όχι. Καθιστούν τον κώδικα για να εμφανιστεί ένας μικρός ματζέντα χρωματισμένος κύκλος στο κέντρο της σελίδας.

10. Εισάγετε τον κύκλο

Το απόσπασμα κώδικα καθορίζει ότι η κλίμακα και η αδιαφάνεια θα αλλάξει από 1 έως 0, υποδεικνύοντας ότι το αντικείμενο εξαφανίζεται. Διεύθυνση και καθυστέρηση της κινούμενης εικόνας. Σημειώστε ότι το κινούμενο σχέδιο δεν παίζει, δεδομένου ότι είμαστε ακόμα να το αρχίσουμε. Για να το κάνετε αυτό, προσθέστε τη λειτουργία παρακάτω.

 Document.addeventListener ('Κάντε κλικ', λειτουργία
(ε) {
Γύρω.
 επανάληψη ( );
}) · 

11. Κάντε εκρηκτική πολυγώνων

Τώρα που ο κύκλος είναι ζωντανός, δημιουργούμε ένα animation έκρηξη που καθιστά την ίδια στιγμή. Η πρώτη έκρηξη χρησιμοποιεί τα σχήματα πολυγώνου για να τραβήξει την έκρηξη. Για να δημιουργήσετε μια έκρηξη, χρησιμοποιήστε τη λειτουργία της λειτουργίας mo.js όπως φαίνεται στο απόσπασμα κώδικα παρακάτω.

 const burst1 = new mojs.burst ({
  Αριστερά: 0, Κορυφή: 0,
  Count: 7,
  Ακτίνα: {50: 250},
  Παιδιά: {
    Συμπληρώστε: "Λευκό",
    Σχήμα: «Πολύγωνο»,
    εγκεφαλικό επεισόδιο: {«λευκό»: «# A50710»},
    Strokewidth: 4,
    Ακτίνα: 'Rand (30, 60)',
    RADIUSY: 0,
    Κλίμακα: {1: 0},
    Pathscale: 'Rand (.5, 1)',
    Πτυχίο: 360,
    ISFORCE3D: TRUE}});

Ο κώδικας εκχωρεί επτά μορφές πολυγώνου στην έκρηξη και καθορίζει δύο ακτίνες. Το πρώτο αναφέρεται στη συνολική κινούμενη εικόνα, ενώ το δεύτερο επικεντρώνεται στα συγκεκριμένα αντικείμενα πολυγώνου μέσα στο κινούμενο σχέδιο. Βεβαιωθείτε ότι προσθέστε την έκρηξη στη λειτουργία του ακροατή εκδήλωσης έτσι ώστε να ανταποκρίνεται στα κλικ του ποντικιού. Σημειώστε ότι έχουν προστεθεί δύο νέες παράμετροι. τη μελωδία και τη δημιουργία. Ο Tune κάνει την έκρηξη να καταστήσει οπουδήποτε στη σελίδα, ενώ παράγει αρχικοποιεί το animation της έκρηξης. Καθιστούν τη σελίδα. Παρατηρήστε τα στοιχεία έκρηξης που εμφανίζονται ταυτόχρονα με τον κύκλο.

 Document.addeventListener ('Κάντε κλικ', λειτουργία
(ε) {
             burst1.
  ({x: e.pagex, y: e.pagey}).
  δημιουργούν ().
 επανάληψη ();
Γύρω.
 επανάληψη ( );
});

12. Δημιουργήστε τη δεύτερη έκρηξη

Στη συνέχεια, δημιουργούμε τη δεύτερη έκρηξη χρησιμοποιώντας διαφορετικές επιλογές σχήματος. Ο κώδικας ακολουθεί τη δομή της προηγούμενης έκρηξης και αλλάζει μόνο μερικές παραμέτρους.

 const burst2 = new mojs.burst ({
  Κορυφή: 0, Αριστερά: 0,
  Count: 4,
  Ακτίνα: {0: 250},
Παιδιά: {
    Σχήμα: [«κύκλος», «ορθός»],
    Σημεία: 5,
    Συμπληρώστε: ['White'],
    Ακτίνα: 'Rand (30, 60)',
    καθυστέρηση: «Stagger (50)»,
    χαλάρωση: ['Cubic.out', 'Cubic.out',
'Cubic.out'],
    Κλίμακα: {1: 0},
    Pathscale: 'Rand (.5, 1)',
    ISFORCE3D: TRUE}});

Προσθέστε την έκρηξη στη λειτουργία του ακροατή εκδήλωσης.

 Document.addeventListener ('Κάντε κλικ', λειτουργία
(ε) {
             burst1.
  ({x: e.pagex, y: e.pagey}).
  δημιουργούν ().
 επανάληψη ();
             burst2.
             ({x: e.pagex, y: e.pagey
}.
             παράγω().
             επανάληψη();
Γύρω.
 επανάληψη ( );
});

13. Προσθέστε εκρήξεις κύκλων

Προκειμένου να ενισχυθεί περαιτέρω η κινούμενη εικόνα, προσθέτουμε κυκλικές εκρήξεις. Η εξέταση του κώδικα στα βήματα 11 και 12 αποκαλύπτει πολλές ομοιότητες που υπάρχουν μεταξύ των δύο τύπων εκρήξεων. Κατά τη δημιουργία της τρίτης έκρηξης, αποφεύγουμε να ξαναγράψουμε υπερβολικό κώδικα χρησιμοποιώντας τον διαχειριστή εξάπλωσης που είναι γραμμένο ως τρεις κουκκίδες (...). Ωστόσο, πρώτα, δηλώνουμε μια μεταβλητή που περιέχει τα παρόμοια χαρακτηριστικά που θέλουμε να επαναχρησιμοποιούμε. Στη συνέχεια, οι άλλοι δύο κύκλοι μπορούν να δημιουργηθούν απλά χρησιμοποιώντας τον διαχειριστή εξάπλωσης.

 // Δημιουργία της μεταβλητής με παρόμοια
Παράμετροι
    const circle_opts = {
  Αριστερά: 0, Κορυφή: 0,
   Συμπληρώστε: "Λευκό",
  Κλίμακα: {.2: 1},
  αδιαφάνεια: {1: 0},
  isforce3d: αλήθεια,
  isshowend: false
};

Ο κώδικας καθορίζει τον τύπο πλήρωσης, την κλίμακα, την αδιαφάνεια και το αν θα τα εμφανίσει στο τέλος της κινούμενης εικόνας. Τα κινούμενα σχέδια δύο κύκλων δημιουργούνται ως εξής.

 const circle1 = new mojs.Shape ({
  ... Circle_opts,
  Ακτίνα: 200});
const circle2 = new mojs.shape ({
  ... Circle_opts,
  Ακτίνα: 240,
  χαλάρωση: 'cubic.out',
  καθυστέρηση: 300});

Προσθέστε τα κυκλικά σχήματα.

 Document.addeventListener ('Κάντε κλικ', λειτουργία
(ε) {
             burst1.
  ({x: e.pagex, y: e.pagey}).
  δημιουργούν ().
 επανάληψη ();
             burst2.
             ({x: e.pagex, y: e.pagey
}.
             παράγω().
             επανάληψη();
Γύρω.
 επανάληψη ( );
});

14. καθιστούν μια βασική φούσκα

Σε αντίθεση με το animation έκρηξης, το οποίο σπάει το αντικείμενο σε μικρότερα κομμάτια, η κινούμενη εικόνα φυσαλίδων, από την άλλη πλευρά, μεταφράζει το αντικείμενο που έχει μετατραπεί σε μεγαλύτερο χώρο. Η έννοια υιοθετεί την αναλογία να φυσάει ένα μπαλόνι όπου το αντικείμενο επεκτείνεται συνεχώς σε μέγεθος. Για να το κάνετε αυτό, δημιουργούμε απλά μια νέα μεταβλητή ανοικτή χώρα και αναθέστε χαρακτηριστικά που θα κάνουν ολόκληρο το φόντο να επιτύχει ένα παρόμοιο χρώμα στο αντικείμενο. Ως αποτέλεσμα, αυτό δημιουργεί την απόχρωση της διοχέτευσης.

 Ανοίξτε το OpenBackground = New Mojs.Shape ({
  Συμπληρώστε: '# fc2d79',
  Αριστερά: 0, Κορυφή: 0,
  Κλίμακα: {0: 4.5},
  isshowstart: αλήθεια,
  Ακτίνα: 15,
  isforce3d: αλήθεια,
  Istimeleless: TRUE,
Καθυστέρηση: 150,
  Ακτίνα: 200,
  χαλάρωση: 'cubic.out',
  Αναμονή: 'expo.in',});

Βεβαιωθείτε ότι προσθέστε τη μεταβλητή του φόντου στη λειτουργία του ακροατή συμβάντος.

 Άνοιγμα.
  ({x: e.pagex, y: e.pagey}).
  Replay () 

15. Προσθέστε πολλαπλά σχήματα

Μετά την έννοια στο βήμα 14, προωθούμε τώρα το παράδειγμα για να συμπεριλάβουμε πολλαπλά χρώματα κυκλικά αντικείμενα, τα οποία μόλις κάνουν κλικ επεκτείνεται με παρόμοιο τρόπο και εμφανίζει κάποιο κείμενο. Επεξεργαστείτε το υπάρχον αρχείο HTML και αντιγράψτε τον κωδικό μέσα στο σώμα. Δημιουργεί τη βασική δομή της σελίδας.

16. Προσθέστε βοηθητικές βιβλιοθήκες

Στη συνέχεια, μερικές πρόσθετες βιβλιοθήκες προστίθενται στο τμήμα σώματος, προκειμένου να διευκολυνθούν η κύλιση και η παραγωγή ήχων όταν κάνουν κλικ στα αντικείμενα.

& 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; / script & gt;
& lt; script src = 'https: //cdn.jsdelivr.net
Hammerjs / 2.0.4 / hammer.min.js '& gt; / script & gt;
& lt; script src = 'https: //cdnjs.Cloudflare.com
AJAX / LIBS / ISCROLL / 5.1.1 / ISCROLL-PROBE.MIN
JS '& GT;
& lt; / script & gt;

17. Προωθήστε το κινούμενο σχέδιο

Στη συνέχεια, προσθέτουμε στυλ για τις μεμονωμένες τάξεις που επισημαίνονται στα αρχεία HTML. Στη συνέχεια προστίθεται η λειτουργικότητα mo.js. Ο πλήρης κωδικός (CSS και JS) μοιράζεται με τα αρχεία φροντιστηρίων για έλεγχο.

18. Μάθετε περισσότερα για το mo.js

Ενώ το σεμινάριο καταδεικνύει τις τεχνικές φούσκας και έκρηξης, υπάρχουν περαιτέρω διαθέσιμοι πόροι που μπορούν να σας βοηθήσουν να παρακολουθήσετε γρήγορα τη μάθησή σας. Μερικά από αυτά περιλαμβάνουν mo.js tutorials στο github και demos επίσης στο github .

Αυτό το άρθρο δημοσιεύθηκε αρχικά στην έκδοση 291 του δημιουργικού περιοδικού Web Design Magazine Σχεδιαστής ιστοσελίδων . Αγοράζουν τεύχος 291 .

Διαβάστε περισσότερα:

• Το CSS Art έχει εξαιρετικά καταστραφεί από παλιά προγράμματα περιήγησης
• Καλύτερα κομμάτια λογισμικού ελέγχου χρήστη
• Μεγάλα σχέδια UI