5 κινούμενα σχέδια SVG για να ζωντανέψετε το σχεδιασμό του ιστοτόπου σας

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

Εργασία με κλιμακούμενα διανυσματικά γραφικά

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

Εκτός από το ότι είναι εξαιρετικό για αλλαγή μεγέθους, μπορείτε επίσης να χρησιμοποιήσετε κώδικα SVG σε HTML και θα λειτουργεί όπως κάθε άλλο στοιχείο. Αυτό σημαίνει ότι μπορείτε να χρησιμοποιήσετε Κανόνες CSS, Κώδικας JavaScriptκαι, το πιο σημαντικό, κινούμενα σχέδια με τα SVG του ιστότοπού σας.

Μπορείτε να δημιουργήσετε SVG χρησιμοποιώντας λογισμικό όπως το Adobe Illustrator και ιστότοπους όπως το SVGator, αλλά μπορείτε επίσης να τα δημιουργήσετε με το χέρι. Η μορφή SVG είναι μια γλώσσα XML απλού κειμένου και μοιάζει λίγο με HTML.

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

Ένας συνδυασμός JS και CSS παράγει αυτά τα αποτελέσματα και όλα ξεκινούν με έναν βρόχο που προσθέτει ακροατές συμβάντων σε κάθε κουμπί.

Για (var i = 0; i < menuItems.length; i++) {
 menuItems[i].addEventListener('Κάντε κλικ', κουμπίΚάντε κλικ);
}

Μόλις κάνετε κλικ σε ένα κουμπί, μια συνάρτηση που ονομάζεται buttonClick() εκτελεί πολλές ενέργειες. Ξεκινά αλλάζοντας το χρώμα φόντου της σελίδας:

έγγραφο.body.style.backgroundColor = `#${Αυτό.getAttribute('data-background')}`;

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

menuItemActive.classList.remove('menu__item--ενεργό');
this.classList.add('menu__item--ενεργό');
menuItemActive.classList.add('menu__item--ζωοποιώ');
this.classList.add('menu__item--ζωοποιώ');
menuItemActive = Αυτό;

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

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

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

.μονοπάτι-1 {
 stroke-dasharray: 1850 2000;
 stroke-dashoffset: 1851;
 μετάβαση: 5s γραμμική;
}

Μια συνάρτηση JS προσθέτει μια μοναδική κλάση CSS σε κάθε τμήμα του κειμένου χρησιμοποιώντας μια κλάση CSS μεμονωμένων γονέων για να μειώσει περαιτέρω την πυκνότητα του κώδικα.

$(λειτουργία() {
λειτουργίαanimationStart() {
 $('#δοχείο').addClass('πτερύγιο');
 }
setTimeout (animationStart, 250);
});

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

Τα βασικά καρέ CSS δημιουργούν δύο καταστάσεις για το κουμπί. Η πρώτη κατάσταση έχει πιο παχιά διαδρομή και καλύπτει μόνο το κάτω μέρος του κουμπιού σχήματος SVG, ξεκινώντας από το 0%. Η άλλη κατάσταση είναι το πλήρες κουμπί στο 100% με πιο λεπτή διαδρομή.

@keyframes σχεδιάζω {
 0% {
 stroke-dasharray: 140 540;
 stroke-dashoffset: -474;
 πλάτος διαδρομής: 8 px;
 }
100% {
 stroke-dasharray: 760;
 stroke-dashoffset: 0;
 πλάτος διαδρομής: 2 px;
 }
}

Αυτά τα βασικά καρέ εφαρμόζονται μόνο στο περίγραμμα του κουμπιού σχήματος SVG όταν ο χρήστης μετακινεί τον κέρσορα πάνω από το κουμπί. Χρησιμοποιεί το :hover Ψευτοκλάση CSS για να επιτευχθεί αυτό, ενεργοποιώντας έναν κανόνα που προσθέτει τα βασικά καρέ κίνησης στο κουμπί.

.svg-wrapper:φτερουγίζω.σχήμα {
-webkit-animation: 0.5sσχεδιάζωγραμμικόςεμπρός;
κινουμένων σχεδίων: 0.5sσχεδιάζωγραμμικόςεμπρός;
}

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

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

Για να ξεκινήσει, χρησιμοποιεί τη συνάρτηση Date() για να συλλέξει την τρέχουσα ημερομηνία και ώρα. Χρησιμοποιώντας αυτήν την τιμή, οι συναρτήσεις getHours(), getMinutes() και getSeconds() χωρίζουν τα δεδομένα στα σχετικά μέρη τους. Στη συνέχεια, ο κωδικός υπολογίζει τη θέση κάθε δείκτη στο ρολόι.

var ημερομηνία = νέοςΗμερομηνία();
var ώρεςΓωνία = 360 * date.getHours() / 12 + date.getMinutes() / 2;
var λεπτόΓωνία = 360 * date.getMinutes() / 60;
var secAngle = 360 * date.getSeconds() / 60;

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

hands[0].setAttribute('από', shifter (secAngle));
hands[0].setAttribute('προς την', shifter (secAngle + 360));
hands[1].setAttribute('από', shifter (minuteAngle));
hands[1].setAttribute('προς την', shifter (minuteAngle + 360));
hands[2].setAttribute('από', shifter (hoursAngle));
hands[2].setAttribute('προς την', shifter (hoursAngle + 360));

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

Αυτή η κινούμενη εικόνα SVG που βασίζεται σε CSS παρέχει έναν προσεγμένο τρόπο για να κάνετε οποιαδήποτε φόρμα να φαίνεται απίστευτη.

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

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

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

$app-padding: 6vh;
$app-width: 50vh;
$app-height: 90vh;
#εφαρμογή {
 πλάτος: $app-width;
 ύψος: $app-height;
 padding: $app-padding;
 φόντο: λευκό;
 κουτί-σκιά: 002rem rgba(μαύρος, 0.1);
}

Θα μπορούσατε να χρησιμοποιήσετε αυτό το παράδειγμα σε σχεδόν οποιαδήποτε φόρμα ιστού και να προσελκύσετε τους χρήστες σας όπως ποτέ πριν.

Δημιουργία των δικών σας κινούμενων εικόνων SVG με HTML, JS και CSS

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

9 Προηγμένα κόλπα CSS ερωτημάτων πολυμέσων που πρέπει να γνωρίζετε

Διαβάστε Επόμενο

Σχετικά με τον Συγγραφέα