Διαμορφώστε τον ιστότοπό σας χρησιμοποιώντας αυτές τις συμβουλές και κόλπα για κινούμενα σχέδια.
Τα κινούμενα σχέδια και οι μεταβάσεις αποτελούν σημαντικό μέρος του σχεδιασμού ιστοσελίδων. Η προσθήκη λεπτών κινούμενων εικόνων στην ιστοσελίδα σας θα την κάνει πιο ελκυστική. Απλές κινούμενες εικόνες, όπως κινούμενα εικονίδια, κινητική τυπογραφία και κινούμενα λογότυπα μπορούν να βοηθήσουν στη βελτίωση της εμπειρίας χρήστη. Μάθετε πέντε φοβερά κόλπα κινούμενων σχεδίων που μπορούν να σας βοηθήσουν να ζωντανέψετε τον ιστότοπό σας.
1. Μεταμόρφωση ενός στοιχείου στο Hover
Μια κοινή πρακτική σχεδιασμού είναι να υπάρχει ένα στοιχείο που κλιμακώνεται όταν αλληλεπιδρά. Για παράδειγμα, μπορεί να θέλετε να μεταφράσετε τα κουμπιά λίγο προς τα πάνω όταν κάποιος τοποθετεί το ποντίκι του πάνω τους. Μπορείτε να το πετύχετε χρησιμοποιώντας το CSS μεταμορφώνω ιδιοκτησία.
Υποθέτοντας ότι έχετε ένα κουμπί:
<κουμπί>
Κάντε κλικ με
κουμπί>
Δώσατε στυλ στο σώμα του εγγράφου καθώς και στο κουμπί:
/* Ευθυγραμμίζει το κουμπί στο κέντρο της σελίδας */
σώμα {
απεικόνιση: καλώδιο;
ύψος: 100vh;
στοίχιση-στοιχεία: κέντρο;
δικαιολογώ-περιεχόμενο: κέντρο;
χρώμα του φόντου: μαύρος;
}/* Δίνει στυλ στο κουμπί */
κουμπί {
υλικό παραγεμίσματος: 1em 2em;
Ιστορικό: μπλε;
σύνορο: 0;
χρώμα: άσπρο;
σύνορα-ακτίνα: 0.25εκ;
δρομέας: δείκτης;
μέγεθος γραμματοσειράς: 2rem;
μετάβαση: μεταμορφώνω 500Κυρία;
}
/* Καταστάσεις Hover */
κουμπί:φτερουγίζω,
κουμπί:Συγκεντρώνω {
μεταμορφώνω: μεταφράστεΥ(0.75 εκ) 500Κυρία;
}
Με το τελευταίο μπλοκ, ορίζετε τις καταστάσεις αιώρησης και εστίασης στο κουμπί. Και στις δύο καταστάσεις, μεταφράζετε το κουμπί κατά μήκος του άξονα Y κατά 0,75rem. Το κουμπί θα μοιάζει με αυτό:
Όταν τοποθετείτε το ποντίκι σας στο κουμπί, αυτό κινείται προς τα πάνω. Η μετάβαση διαρκεί μισό δευτερόλεπτο (500 ms) για να ολοκληρωθεί. Αυτό είναι ένα μοτίβο που μπορείτε να εφαρμόσετε όχι μόνο στα κουμπιά σας, αλλά και σε άλλα στοιχεία (π.χ. εικόνες).
2. Δήλωση πολλαπλών βασικών καρέ με μία δήλωση
Ένα άλλο κοινό μοτίβο στα κινούμενα σχέδια CSS είναι η επανάληψη πάνω από την ίδια τιμή πολλές φορές. Αυτό μπορεί να είναι ένα συγκεκριμένο χρώμα, μέγεθος ή προσανατολισμός. Μπορείτε να το πετύχετε αυτό χρησιμοποιώντας Κινούμενα σχέδια βασικών καρέ CSS δηλώνοντας πολλαπλά βασικά καρέ με μία δήλωση.
Εξετάστε το κουμπί που δημιουργήσατε στην προηγούμενη ενότητα. Ίσως θέλετε να επαναλάβετε πολλά χρώματα φόντου όταν κάνετε κλικ στο κουμπί. Αλλά θέλετε επίσης να περάσετε το ίδιο χρώμα σε διαφορετικά στάδια του κινούμενου σχεδίου. Ας δούμε πώς να το πετύχουμε αυτό στον κώδικα.
Αρχικά, θέλετε να κάνετε κίνηση στο κουμπί μόνο όταν κάνετε κλικ. Έτσι θα δημιουργήσετε ένα script.js αρχείο, μέσα στο οποίο έχετε πρόσβαση στο κουμπί και εναλλάσσετε μια τάξη στο κουμπί όταν κάνετε κλικ:
συνθ κουμπί = έγγραφο.querySelector("κουμπί")
button.addEventListener("Κάντε κλικ", (ε) => {
button.classList.toggle('ώρα για πάρτυ')
})
Χρησιμοποιήσαμε το querySelector για πρόσβαση στο κουμπί από την ιστοσελίδα. Για να μάθετε περισσότερα σχετικά με τη διέλευση DOM, διαβάστε την ανάρτησή μας στο πώς να διασχίσετε το DOM χρησιμοποιώντας JavaScript.
ο ώρα για πάρτυ Η τάξη ενεργοποιεί ένα κινούμενο σχέδιο με τίτλο κόμμα:
.ώρα για πάρτυ {
κινουμένων σχεδίων: κόμμα 2000Κυρίαάπειρος;
}
Για το κινούμενο σχέδιο, θέλετε να ξεκινήσετε με κόκκινο και μετάβαση στο κίτρινο στο 25%. Τότε θα επιστρέψατε στο κόκκινο στο 50% πριν επιστρέψετε στο κίτρινο στο 75%. Τέλος, στο 100%, θα αρκεστείτε σε ένα σκούρο μπλε χρώμα:
@keyframes κόμμα {
0%, 50% {
χρώμα του φόντου: το κόκκινο;
}
25%, 75% {
χρώμα του φόντου: κίτρινος;
}
100% {
χρώμα του φόντου: hsl(200, 72%, 35%);
}
}
Αυτή η προσέγγιση είναι αρκετά χρήσιμη για εναλλαγή μεταξύ χρωμάτων σε φόντο με βάση το χρώμα. Επειδή μπορείτε να επαναλάβετε πολλά βασικά καρέ σε μία μεταβλητή, γίνεται εξαιρετικά εύκολο να χρησιμοποιήσετε την ίδια ιδιότητα σε διαφορετικά στάδια της κινούμενης εικόνας σας.
3. Χρήση @property για κίνηση προσαρμοσμένων ιδιοτήτων
Όπως ίσως γνωρίζετε ήδη, δεν είναι όλες οι ιδιότητες στο CSS με δυνατότητα κίνησης. Το επίσημο Τεκμηρίωση Mozilla διατηρεί ένα ενημερωμένο αρχείο με όλες τις κινούμενες ιδιότητες CSS. Αν ψάχνετε να δημιουργήσετε κίνηση σε μια ιδιότητα που δεν είναι ζωντανή, τότε η καλύτερη λύση θα ήταν να χρησιμοποιήσετε το @ιδιοκτησία διευθυντικός.
Ξεκινήστε αλλάζοντας το χρώμα φόντου του κουμπιού σας σε γραμμική κλίση:
κουμπί {
// άλλαCSS
Ιστορικό: γραμμική κλίση(90deg, μπλε, πράσινος);
// άλλαCSS
}
Εδώ είναι η έξοδος:
Συχνά θέλετε να κάνετε κίνηση της διαβάθμισης χρώματος στο κουμπί. Αν και υπάρχουν κόλπα που μπορείτε να χρησιμοποιήσετε για να μετακινήσετε το ντεγκραντέ σας, δεν μπορείτε πραγματικά να το ζωντανέψετε. Αυτό είναι επειδή Ιστορικό (καθώς εικόνα φόντου) δεν είναι ζωντανή ιδιότητα. Εδώ είναι που @ιδιοκτησία Έρχεται σε.
ο @ιδιοκτησία Η οδηγία σάς επιτρέπει να καταχωρείτε προσαρμοσμένες ιδιότητες. Όταν χρησιμοποιείτε @ιδιοκτησία, πρέπει να του δώσετε τρεις τιμές, δηλαδή σύνταξη, κληρονομεί, και αρχική τιμή:
@ιδιοκτησία --χρώμα-1 {
σύνταξη: "<χρώμα>";
κληρονομεί: αληθής;
αρχική τιμή: το κόκκινο;
}
@ιδιοκτησία --χρώμα-2 {
σύνταξη: "<χρώμα>";
κληρονομεί: αληθής;
αρχική τιμή: μπλε;
}
Η πρώτη είναι η ιδιότητα έναρξης ενώ η δεύτερη είναι η ιδιότητα προορισμού. Τώρα, αντί να κάνετε μετάβαση σε μια εικόνα φόντου (από την οποία δεν μπορείτε να κάνετε μετάβαση), θα πραγματοποιούσατε μετάβαση από --χρώμα-1 προς την --χρώμα-2 (τις προσαρμοσμένες ιδιότητές σας) σε ένα δευτερόλεπτο:
κουμπί {
μετάβαση: --χρώμα-1 1000Κυρία, --χρώμα-2 1000Κυρία;
}
Αυτή η τεχνική είναι χρήσιμη επειδή μπορείτε επίσης να προσθέσετε άλλες προσαρμογές. Για παράδειγμα, προσθέτετε μια καθυστέρηση για να του δώσετε μια πιο ομαλή εμπειρία. Οι πιθανότητες είναι ατελείωτες.
4. Χρήση αρνητικών καθυστερήσεων κινούμενης εικόνας
Οι καθυστερήσεις κινούμενων εικόνων είναι ζωτικής σημασίας για τη δημιουργία ομαλών κινούμενων εικόνων. Ας δούμε ένα παράδειγμα αυτού στην πράξη. Σε αυτό το μέρος, προσθέστε α div στοιχείο με 15 κουκκίδες στην κορυφή του κουμπιού:
<divτάξη="αποσιωπητικά">
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
<divτάξη="τελεία">div>
div>
Εδώ είναι μερικά βασικά στυλ για να μεταμορφώσετε κάθε παιδί div σε μια τελεία:
.αποσιωπητικά {
απεικόνιση: καλώδιο;
χάσμα: .5 εκμ;
περιθώριο-κάτω: 20px;
}
.τελεία {
πλάτος: 10px;
αναλογία απεικόνισης: 1;
χρώμα του φόντου: το κόκκινο;
σύνορα-ακτίνα: 50%;
}
Εδώ χρησιμοποιούμε το Flexbox για να τοποθετήσουμε τις τελείες σε οριζόντια γραμμή. Για να βουτήξετε βαθιά στο Flexbox, μπορείτε να ελέγξετε το δικό μας Εκμάθηση CSS Flexbox.
Μέσα script.js, προσθέστε τον κώδικα που ενεργοποιεί την κίνηση των κουκκίδων. Εναλλάσσεις το χορός τάξη στις τελείες:
button.addEventListener("Κάντε κλικ", (ε) => {
button.classList.toggle('ώρα για πάρτυ')
// Νέος κώδικας
dots.forEach((τελεία) => {
dot.classList.toggle('χορός')
})
})
Το μάθημα χορού ενεργοποιεί ένα κινούμενο σχέδιο με τίτλο αύξηση:
.τελεία.χορός {
κινουμένων σχεδίων: αύξηση 2000Κυρίαάπειροςεναλλακτικό;
}Όσον αφορά την κινούμενη εικόνα, απλώς μεταφράστε τις τελείες -100 px κατά μήκος του άξονα Υ:
@keyframes άνοδος {
100% {
μεταμορφώνω: μεταφράστεΥ(-100 px)
}
}Τώρα ήρθε η ώρα να κάνετε κάτι ενδιαφέρον. Αντί οι κουκκίδες να ανεβαίνουν ταυτόχρονα, θέλετε να ζωντανέψετε τις κουκκίδες ώστε να ρέουν σαν κύμα. Για να το πετύχετε αυτό, πρέπει να προσθέσετε animation-καθυστέρηση στις τελείες και αυξήστε κάθε κουκκίδα κατά 100 ms:
.τελεία:nth-child (1) {
animation-καθυστέρηση: 100Κυρία;
}
.τελεία:nth-child (2) {
animation-καθυστέρηση: 200Κυρία;
}
.τελεία:nth-child (3) {
animation-καθυστέρηση: 300Κυρία;
}
.τελεία:nth-child (4) {
animation-καθυστέρηση: 400Κυρία;
}
/* Συνεχίστε να κάνετε μέχρι να φτάσετε στη 15η τελεία */
Αυτό δημιουργεί ένα κομψό κινούμενο σχέδιο όπου οι κουκκίδες κινούνται πάνω και κάτω σε κυματιστή μορφή. Η παρακάτω εικόνα καταγράφει τις κουκκίδες στη μέση του κινούμενου σχεδίου:
Λάβετε υπόψη ότι αυτό μπορεί να είναι προβληματικό, γεγονός που μας φέρνει στην πέμπτη συμβουλή.
5. Χρησιμοποιήστε prefers-reduced-motion για να ενεργοποιήσετε τις προτιμήσεις
Να έχετε πάντα υπόψη σας ότι σε πολλούς ανθρώπους δεν αρέσουν τα κινούμενα σχέδια. Στην πραγματικότητα, οι περισσότεροι χρήστες έχουν προτιμήσεις στο πρόγραμμα περιήγησης που μπορούν να απενεργοποιήσουν την κίνηση. Η κίνηση μπορεί να αποσπάσει την προσοχή των αισθήσεων και σε σοβαρές περιπτώσεις να οδηγήσει σε ναυτία.
Ευτυχώς, μπορείτε εύκολα να το φροντίσετε τυλίγοντας το animation σας μέσα σε ένα καμία προτίμηση ερώτημα μέσων όπως:
@μεσο ΜΑΖΙΚΗΣ ΕΝΗΜΕΡΩΣΗΣ(prefers-reduced-motion: no-preference) {
.τελεία.χορός {
κινουμένων σχεδίων: αύξηση 2000Κυρίαάπειροςεναλλακτικό;
}
}Τώρα αν ενεργοποιούσες προτιμά-μειωμένη-κίνηση στο πρόγραμμα περιήγησής σας, τότε η κίνηση δεν θα εκτελείται.
Μάθετε περισσότερα CSS Συμβουλές και κόλπα
Το CSS είναι γεμάτο από φοβερά hacks που ξεπερνούν τα κινούμενα σχέδια και τις μεταβάσεις. Για παράδειγμα, υπάρχουν συμβουλές και κόλπα για να κάνετε ολόκληρη τη διάταξή σας κομψή και με απόκριση. Οι πρακτικές μπορούν να σας βοηθήσουν να κάνετε τον ιστότοπό σας πιο ελκυστικό, προσβάσιμο και ευχάριστο στην περιήγησή σας. Εάν θέλετε να είστε ένας κορυφαίος προγραμματιστής CSS, τότε το να κάνετε μερικά κόλπα στο μανίκι σας βοηθάει πολύ.
