Tutorial Micro-Interactions για αρχάριους προγραμματιστές: Πώς να δημιουργήσετε ένα διαδραστικό κουμπί “Like” με CSS και JavaScript

Tutorial Micro-Interactions για αρχάριους προγραμματιστές: Πώς να δημιουργήσετε ένα διαδραστικό κουμπί “Like” με CSS και JavaScript

Tutorial Micro-Interactions για αρχάριους προγραμματιστές: Πώς να δημιουργήσετε ένα διαδραστικό κουμπί “Like” με CSS και JavaScript
СОДЕРЖАНИЕ
02 июня 2020

Εκμάθηση μικρο-αλληλεπιδράσεων για αρχάριους


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

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

Πολύ συναρπαστικό για ένα μπράβο, έτσι δεν είναι; Ας φτάσουμε σε αυτό!

Αλλά πρώτα:

Γιατί να ασχοληθείτε με τις μικρο-αλληλεπιδράσεις?

Δεν πρόκειται να προσπαθήσω να σας πείσω πάρα πολύ εδώ, αλλά ας δούμε μερικά πράγματα.

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

Ένας από τους πιο αξιοσημείωτους ερευνητικούς οίκους, ο Όμιλος Nielsen Norman, εξέτασε περισσότερο τις μικρο-αλληλεπιδράσεις στενά το 2018. Σύμφωνα με τα συμπεράσματά τους, οι μικρο-αλληλεπιδράσεις έχουν αποδείξει, μεταξύ άλλων, τη βελτίωση της εμπειρίας των χρηστών ενθαρρύνοντας την αφοσίωση και επικοινωνώντας την επωνυμία.

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

Εκμάθηση μικρο-αλληλεπιδράσεων: Η σήμανση και το βασικό CSS του κουμπιού μας αντίχειρα

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

Πρώτα απ ‘όλα, χρειαζόμαστε κάποια παλιά μαγική HTML και CSS για να το κάνουμε να λειτουργήσει. Η δομή είναι αρκετά απλή.

Θα χρησιμοποιήσουμε μια ετικέτα SVG για το ίδιο το ίδιο εικονίδιο – από Γραμματοσειρά φοβερό; μπορείτε να βρείτε τα περισσότερα εικονίδια εδώ. Για να προσαρμόσουμε τα χαρακτηριστικά πλάτους και ύψους της ετικέτας SVG, θα χρησιμοποιήσουμε τον παρακάτω HTML:

Τώρα για το CSS, θα πάμε πραγματικά βασικά. Αυτό που θέλουμε να συμβεί εδώ είναι να δώσουμε μια ωραία εμφάνιση στο κουμπί “like” και να επικεντρώσουμε τα πάντα στην οθόνη. Γνωρίζουμε ήδη ότι πρόκειται να αλλάξουμε μια τάξη με το κλικ (η ενεργή τάξη), οπότε πρέπει να το λάβουμε υπόψη. Θα γεμίσουμε το εικονίδιο με μπλε χρώμα όταν είναι ενεργό και σκούρο γκρι όταν όχι:

σώμα {
οθόνη: flex;
Στοιχεία ευθυγράμμισης: κέντρο;
justify-content: κέντρο;
ύψος: 100vh;
}

.κουμπί like {
οθόνη: flex;
Στοιχεία ευθυγράμμισης: κέντρο;
justify-content: κέντρο;
}

.like-button.active {
-webkit-animation: pop 0.9s και τα δύο;
animation: pop 0,9s και τα δύο;
}

.κουμπί-like svg {
αδιαφάνεια: 1;
}

.διαδρομή svg like-button {
συμπληρώστε: # 333;
μετάβαση: συμπληρώστε .4s ευκολία
}

.like-button.active svg διαδρομή {
συμπληρώστε: # 2196f3;
}

Ένα άλλο πράγμα που θέλουμε εδώ είναι το pop animation που χρησιμοποιείται όταν το κουμπί γίνει ενεργό, οπότε θα το προσθέσουμε στο αρχείο CSS:

@ -webkit-keyframes pop {
0% {
-webkit-transform: scale3d (1, 1, 1);
μετασχηματισμός: scale3d (1, 1, 1);
}
30% {
-webkit-transform: scale3d (1,25, 0,75, 1);
μετασχηματισμός: scale3d (1,25, 0,75, 1);
}
40% {
-webkit-transform: scale3d (0,75, 1,25, 1);
μετασχηματισμός: scale3d (0,75, 1,25, 1);
}
50% {
-webkit-transform: scale3d (1.15, 0.85, 1);
μετασχηματισμός: scale3d (1,15, 0,85, 1);
}
65% {
-webkit-transform: scale3d (0,95, 1,05, 1);
μετασχηματισμός: scale3d (0,95, 1,05, 1);
}
75% {
-webkit-transform: scale3d (1.05, 0.95, 1);
μετασχηματισμός: scale3d (1,05, 0,95, 1);
}
100% {
-webkit-transform: scale3d (1, 1, 1);
μετασχηματισμός: scale3d (1, 1, 1);
}
}

@keyframes ποπ {
0% {
-webkit-transform: scale3d (1, 1, 1);
μετασχηματισμός: scale3d (1, 1, 1);
}
30% {
-webkit-transform: scale3d (1,25, 0,75, 1);
μετασχηματισμός: scale3d (1,25, 0,75, 1);
}
40% {
-webkit-transform: scale3d (0,75, 1,25, 1);
μετασχηματισμός: scale3d (0,75, 1,25, 1);
}
50% {
-webkit-transform: scale3d (1.15, 0.85, 1);
μετασχηματισμός: scale3d (1,15, 0,85, 1);
}
65% {
-webkit-transform: scale3d (0,95, 1,05, 1);
μετασχηματισμός: scale3d (0,95, 1,05, 1);
}
75% {
-webkit-transform: scale3d (1.05, 0.95, 1);
μετασχηματισμός: scale3d (1,05, 0,95, 1);
}
100% {
-webkit-transform: scale3d (1, 1, 1);
μετασχηματισμός: scale3d (1, 1, 1);
}
}

ο "ΑΛΛΗΛΕΠΙΔΡΑΣΗ" μέρος αυτού του σεμιναρίου μικρο-αλληλεπιδράσεων

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

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

λειτουργία randomInt (min, max) {
επιστροφή Math.floor (Math.random () * (max – min + 1) + min);
}

Στη συνέχεια, θα χρειαζόμαστε μια άλλη συνάρτηση που επιστρέφει τυχαία +1 ή -1, ώστε να έχουμε τυχαίες αρνητικές ή θετικές τιμές:

λειτουργία plusOrMinus () {
επιστροφή Math.random () < 0,5; -1: 1;
}

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

  • Πρώτον, θα αποθηκεύσουμε το κουμπί μας σε μια μεταβλητή και θα προσθέσουμε ένα πρόγραμμα ακρόασης συμβάντων κλικ.
  • Όταν κάνετε κλικ στο κουμπί, θα προσθέσουμε μια λειτουργία preventDefault (), ώστε να είμαστε σίγουροι ότι δεν θα συμβεί τίποτα ανεπιθύμητο.
  • Μετά από αυτό, θα προσθέσουμε την ενεργή τάξη μας στο κουμπί, το οποίο στο παρελθόν είχαμε στυλ με μπλε χρώμα μέσω CSS.
  • Τότε θα εκτελέσουμε τη λειτουργία createClones () (που δεν έχει καθοριστεί ακόμη), περνώντας το κουμπί μας ως παράμετρο μέσω αυτού.

κουμπί let = document.querySelector (".κουμπί like")

button.addEventListener ("Κάντε κλικ", συνάρτηση (ε) {
e.preventDefault ();
this.classList.toggle ("ενεργός")
createClones (αυτό);
});

Τώρα ας καθορίσουμε τη λειτουργία createClones () και ακολουθήστε τα παρακάτω βήματα μαζί της:

  1. Αρχικά, ας αποφασίσουμε για έναν τυχαίο αριθμό κλώνων. Θα δημιουργήσουμε instantiate μεταξύ δύο και τεσσάρων κλώνων για το εικονίδιο. Θα χρησιμοποιήσουμε τη συνάρτηση randomInt () που ορίστηκε προηγουμένως.
  2. Στη συνέχεια, για κάθε κλώνο, θα χρησιμοποιήσουμε την ετικέτα SVG μέσα στο κουμπί μας ως "μοντέλο" και χρησιμοποιήστε τη συνάρτηση JavaScript cloneNode (true) για να την κλωνοποιήσετε σε μια νέα μεταβλητή. Θα ορίσουμε επίσης ένα μέγεθος μεταξύ 5 και 16 για τον κλώνο μας χρησιμοποιώντας τη λειτουργία τυχαίας ακέραιας γεννήτριας.
  3. Στη συνέχεια, θα προσθέσουμε τους κλώνους μας στο κουμπί, θα ορίσουμε το πλάτος και το ύψος τους με τον αριθμό που δημιουργήθηκε προηγουμένως και θα κάνουμε τη θέση τους απόλυτη, ώστε να μπορούμε να τα μετακινήσουμε ανεξάρτητα από το κουμπί.
  4. Ένα άλλο πράγμα που χρειαζόμαστε είναι μια μετάβαση για τους κλώνους μας, οπότε δεν εμφανίζονται μόνο στο νέο τους μέρος όταν κάνουν κλικ.
  5. Τώρα, για την προσθήκη των πραγματικών μετασχηματισμών που θα μετακινήσουν το εικονίδιο μας, θα τρελαθούμε λίγο. Θέλουμε οι κλώνοι μας να κινούνται τυχαία από το κέντρο του κουμπιού μας προς τα έξω. Χρησιμοποιώντας έναν συνδυασμό των συναρτήσεων randomInt () και plusOrMinus (), θα μετακινήσουμε τους κλώνους μας στον άξονα XY με την ιδιότητα translate3d CSS. Θα χρησιμοποιήσουμε επίσης ένα "κομματιάζω", καθώς η μετάβασή μας δεν θα ισχύει διαφορετικά. Έτσι, η προσθήκη μιας απλής λειτουργίας setTimeout () θα μας βοηθήσει να το επιτύχουμε. Ταυτόχρονα, θα μετακινήσουμε την αδιαφάνεια στο 0, κάνοντας τους κλώνους να εξαφανιστούν.
  6. Διαγραφή των κλώνων μας. Πρέπει να εκκαθαρίσουμε το DOM αφού τελειώσουμε με όλη την τζαζ. Επομένως, χρειαζόμαστε μια άλλη συνάρτηση setTimeout () που θα αφαιρέσει τους κλώνους μας από το DOM μετά από ένα δευτερόλεπτο.

createClones (κουμπί) {
// 1. Δημιουργήστε κλώνους και επαναλάβετε τον αριθμό που ορίσατε
αφήστε τους κλώνους = randomInt (2, 4);
για (αφήστε το = 1; αυτό <= κλώνοι; αυτό ++) {
// 2. Αποκτήστε τον κλώνο ετικέτας SVG σε μια μεταβλητή και δημιουργήστε ένα τυχαίο μέγεθος
let clone = button.querySelector ("svg") .cloneNode (true),
μέγεθος = randomInt (5, 16);
// 3. Προσθέστε τον κλώνο μας στο κουμπί και αλλάξτε το πλάτος / ύψος / θέση του
button.appendChild (κλώνος);
clone.setAttribute ("πλάτος", Μέγεθος);
clone.setAttribute ("ύψος", Μέγεθος);
clone.style.position = "απόλυτος";
// 4. Προσθέστε μερικές φανταστικές μεταβάσεις
clone.style.transition =
"μετασχηματίστε 0,5 δευτ. κυβικό-bezier (0,12, 0,74, 0,58, 0,99) 0,3 δευτ., αδιαφάνεια 1 δευτ.";
// 5. Ζώστε το εικονίδιο μας προς τα έξω με τη λειτουργία setTimeout έτσι ώστε να συμμορφώνεται το CSS.
let animTimeout = setTimeout (συνάρτηση () {
clone.style.transform =
"μετάφραση3d (" +
plusOrMinus () * randomInt (10, 25) +
"px," +
plusOrMinus () * randomInt (10, 25) +
"px, 0)";
clone.style.opacity = 0;
clearTimeout (animTimeout);
}, 1);
// 6. Αφαίρεση των κλώνων μετά από 0,9 δευτερόλεπτα
let removeNodeTimeout = setTimeout (συνάρτηση () {
clone.parentNode.removeChild (κλώνος);
clearTimeout (removeNodeTimeout);
}, 900);
}
}

Αυτό είναι! Το έχουμε καταφέρει μέχρι το τέλος! Παρακάτω θα βρείτε το παράδειγμα CodePen:

Δείτε το στυλό
Όπως το κουμπί
από τον Andrei Băicuș (@abaicus)
επί CodePen.

Σας ευχαριστούμε που το περάσατε!

Άλλες επιλογές για την προσθήκη μικρο-αλληλεπιδράσεων στο WordPress

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

Πρώτα, μπορείτε να χρησιμοποιήσετε το Ζώστε το! plugin για να κινούμε σχεδόν οποιοδήποτε στοιχείο στις σελίδες σας χρησιμοποιώντας CSS3.

Για παράδειγμα, μπορείτε να προσθέσετε ένα κουμπί ή ένα κομμάτι κειμένου και, στη συνέχεια, να το ρυθμίσετε να κινείται με συγκεκριμένο τρόπο στο κλικ.

Ακολουθεί ένα παράδειγμα του τι μπορεί να κάνει η προσθήκη – βίντεο ��.


Ζώστε το!

Συγγραφέας: eLEOPARD Design Studios


100% βαθμολογίες


40.000 + Εγκαταστάσεις


4.7.0 Απαιτεί

Περισσότερες πληροφορίες

animate-it.2.3.7.zip

Τρέχουσα έκδοση: 2.3.7

Τελευταία ενημέρωση: 20 Μαρτίου 2020


100% βαθμολογίες


40.000 + Εγκαταστάσεις


4.7.0 Απαιτεί

Σελίδα προσθηκών WordPress.org


Ζώστε το!

Ένα άλλο πρόσθετο, και ένα από τα αγαπημένα του συντάκτη μας, είναι Shortcodes Ultimate.

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

Ακολουθεί ένα παράδειγμα κουμπιού με κινούμενα σχέδια (σημείωση. Το κινούμενο σχέδιο λειτουργεί μόνο την πρώτη φορά που μετακινηθεί στη θύρα προβολής. Εάν δεν το βλέπετε, ανανεώστε τη σελίδα):

Κάντε κλικ με


WordPress Shortcodes Plugin – Shortcodes Ultimate

Συγγραφέας: Βλαντιμίρ Ανόχιν


98% βαθμολογίες


800.000 + Εγκαταστάσεις


Απαιτείται WP 4.6 +

Περισσότερες πληροφορίες

shortcodes-ultimate.5.9.0.zip

Τρέχουσα έκδοση: 5.9.0

Τελευταία ενημέρωση: 24 Μαΐου 2020


98% βαθμολογίες


800.000 + Εγκαταστάσεις


Απαιτείται WP 4.6 +

Σελίδα προσθηκών WordPress.org


WordPress Shortcodes Plugin – Shortcodes Ultimate

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

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

Μην ξεχάσετε να συμμετάσχετε στο μάθημα συντριβής για την επιτάχυνση του ιστότοπού σας στο WordPress. Με μερικές απλές επιδιορθώσεις, μπορείτε να μειώσετε το χρόνο φόρτωσής σας ακόμη και κατά 50-80%:

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Это интересно
    Adblock
    detector