Περιεχόμενο
- 01. Εφέ κειμένου ανατροπής
- 02. Δημιουργία CSS
- 03. Τοποθετήστε τη λέξη
- 04. Πάνω και ξανά
- 05. Αιωρείται προς τα κάτω
- 06. Αυτόματο για τους ανθρώπους
- 07. Προσθέστε εναλλασσόμενες τάξεις
Οι ανατροπές είναι ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή ενός χρήστη, ειδικά εάν κάνουν κάτι ασυνήθιστο ή πρωτότυπο. Το Middle Child έχει ένα μεγάλο αποτέλεσμα, που σπάνια φαίνεται αλλού, που συλλαμβάνει κάθε γράμμα και τα χωρίζει με κινούμενα σχέδια, το οποίο ξεκινά όταν ο επισκέπτης αιωρείται πάνω από τη λέξη. Το κινούμενο σχέδιο βοηθά στη μεταφορά του παιχνιδιάρικου χαρακτήρα της μάρκας σάντουιτς.
Σε αυτό το άρθρο, σας παρουσιάζουμε πώς να αναδημιουργήσετε το αποτέλεσμα στον ιστότοπό σας. Για περισσότερη έμπνευση, ρίξτε μια ματιά στον οδηγό μας για τα καλύτερα παραδείγματα κινουμένων σχεδίων CSS (με οδηγίες για τον τρόπο κωδικοποίησής τους). Για κάτι λίγο διαφορετικό, δοκιμάστε έναν κορυφαίο δημιουργό ιστότοπων ή επιλέξτε την καλύτερη αποθήκευση cloud. Και αν κάνετε τον ιστότοπό σας πιο περίπλοκο, βεβαιωθείτε ότι η φιλοξενία ιστού σας είναι σωστή.
01. Εφέ κειμένου ανατροπής
Ένα από τα εξαιρετικά εφέ κειμένου στον ιστότοπο του Middle Child είναι τα εφέ ανατροπής στο μενού, όπου τα γράμματα χωρίζονται στο κείμενο και περιστρέφονται ελαφρώς. Ξεκινήστε με μερικές απλές ετικέτες HTML.
div> div> Πρωινό / div> / div>
02. Δημιουργία CSS
Χρησιμοποιήστε ένα ξεχωριστό αρχείο CSS ή ετικέτες στυλ για να προσθέσετε τους ακόλουθους κανόνες CSS και να κάνετε τη σελίδα να γεμίσει το πλήρες μέγεθος του προγράμματος περιήγησης διασφαλίζοντας ότι το σώμα και το περιτύλιγμα έχουν το πλήρες διαθέσιμο ύψος.
σώμα {πλάτος: 100%; ύψος: 100%; περιθώριο: 0; επένδυση: 0; }. Wrapper {display: grid; ύψος: 100%; }
03. Τοποθετήστε τη λέξη
ο λέξη η τάξη κεντράρει τη λέξη στο πλέγμα. Οποιοδήποτε κείμενο έχει το λέξη τάξη μπορεί να το εφαρμόσει. ο πάνω η τάξη πρόκειται να εφαρμοστεί σε κάθε άλλο γράμμα και αυτά θα κινηθούν προς τα πάνω.
.word {font-size: 3em; περιθώριο: auto auto; } .word .up {display: inline-block; μετασχηματισμός: translate3d (0px, 0px, 0px) rotate (0deg); μετάβαση: όλα τα 0,5s ευκολία στην έξοδο }
04. Πάνω και ξανά
Τώρα το κάτω το class μοιράζεται πολύ παρόμοιες ρυθμίσεις με το πάνω αλλά το hover δείχνει την κίνηση προς τα πάνω για το πάνω ανατροπή. Επίσης προς τα πάνω περιστρέφεται ελαφρώς για να βελτιώσει την εμφάνιση.
.word .down {display: inline-block; μετασχηματισμός: translate3d (0px, 0px, 0px) rotate (0deg); μετάβαση: όλα τα 0,5s ευκολία στην έξοδο } .word: hover .up {transform: translate3d (0px, -8px, 0px) rotate (12deg); χρώμα: # 058b05}
05. Αιωρείται προς τα κάτω
Όταν ο χρήστης αιωρείται πάνω από το κείμενο, η κάτω τάξη μετακινεί το κείμενο προς τα κάτω. Αργότερα σε JavaScript το κείμενο θα χωριστεί σε ξεχωριστά ανοίγματα με τις τάξεις να προστίθενται αυτόματα σε εναλλακτικά ανοίγματα.
.word: hover .down {transform: translate3d (0px, 8px, 0px) rotate (-12deg); χρώμα: # 058b05; }
06. Αυτόματο για τους ανθρώπους
Είναι λίγο ενοχλητικό να πρέπει να βάζουμε κάθε γράμμα σε εναλλασσόμενα χρονικά διαστήματα με διαφορετικά μαθήματα, οπότε θα αυτοματοποιήσουμε τη διαδικασία παίρνοντας JavaScript για να ρωτήσουμε τον επιλογέα και να πάρουμε κάθε γράμμα. Εδώ οδός μεταβλητή αρπάζει το τρέχον γράμμα καθώς περνάει μέσα από το κείμενο.
script> var element = document.querySelectorAll («.word»); για (var i = 0, l = element.length; i l; i ++) {var str = στοιχεία [i] .textContent; στοιχεία [i] .innerHTML = ’’;
07. Προσθέστε εναλλασσόμενες τάξεις
Τώρα ένας άλλος βρόχος τοποθετεί κάθε γράμμα στο δικό του στοιχείο span και προσθέτει είτε το πάνω ή κάτω τάξη στα ανοίγματα. Εάν το δείτε αυτό στο πρόγραμμα περιήγησης, θα δείτε το κείμενο να χωρίζεται με κάθε γράμμα πάνω και κάτω, ενώ περιστρέφεται ελαφρώς.
Μπορείτε να δείτε το αποτέλεσμα στη δράση στον ιστότοπο του Middle Child.
για (var j = 0, ll = str.length; j ll; j ++) {var spn = document.createElement («span»); στοιχεία [i] .appendChild (spn); spn.textContent = str [j]; ας θέσουμε = (j% 2); 'πάνω κάτω'; spn.classList.add (θέση); }} / σενάριο>
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο δημιουργικό περιοδικό web design Σχεδιαστής ιστοσελίδων.Αγορά τεύχος 286 ή Εγγραφείτε.
