Περιεχόμενο
- 01. Ξεκινήστε το έγγραφο HTML
- 02. Ορατό περιεχόμενο HTML
- 03. Έναρξη CSS
- 04. Δοχείο κινουμένων σχεδίων
- 05. Έναρξη κίνησης
- 06. Ζώο σε προβολή
- 07. Οριστικοποίηση της κινούμενης εικόνας
Το Love Lost by Canada's Jam3 είναι ένα όμορφα σκοτεινό, διαδραστικό ποίημα έτοιμο για κινητά με πραγματική καρδιά για τα διαρκή συναισθήματα γύρω από την χαμένη αγάπη. Η διάταξη του ιστότοπου δημιουργήθηκε χρησιμοποιώντας HTML5 με τη βιβλιοθήκη GSAP να ενισχύει την κινούμενη εικόνα της, ένα από τα πιο εντυπωσιακά χαρακτηριστικά του είναι το κινούμενο τρισδιάστατο κείμενό του που πραγματικά ζωντανεύει την ποίηση του Love Lost.
- Κάντε διαδραστικά εφέ 3D τυπογραφίας
Φαίνεται εντυπωσιακό σαν κόλαση και δεν είναι δύσκολο να ενσωματώσετε στη δική σας δουλειά για να δημιουργήσετε μια ελκυστική εμπειρία χρήστη. πώς γίνεται.
Θέλετε να δημιουργήσετε τον δικό σας ελκυστικό ιστότοπο; Δοκιμάστε ένα εργαλείο δημιουργίας ιστότοπων και συνεχίστε την ομαλή λειτουργία επιλέγοντας τη σωστή υπηρεσία φιλοξενίας ιστοσελίδων.
01. Ξεκινήστε το έγγραφο HTML
Το πρώτο βήμα είναι να ορίσετε τη δομή του εγγράφου HTML. Αυτό περιλαμβάνει το κοντέινερ HTML που ξεκινά το έγγραφο, το οποίο περιέχει τις ενότητες κεφαλής και σώματος. Ενώ η ενότητα κεφαλής χρησιμοποιείται κυρίως για τη φόρτωση του εξωτερικού αρχείου CSS, η ενότητα σώματος θα αποθηκεύσει το περιεχόμενο της ορατής σελίδας που δημιουργήθηκε στο βήμα 2.
! DOCTYPE html> html> head> title> 3D Text Movement / title> link rel = "stylesheet" type = "text / css" href = "styles.css" /> / head> body> * * * ΒΗΜΑ 2 ΕΔΩ / σώμα> / html>
02. Ορατό περιεχόμενο HTML
Το ορατό περιεχόμενο HTML αποτελείται από ένα κοντέινερ άρθρου που περιέχει το ορατό κείμενο. Το σημαντικό μέρος του κοντέινερ άρθρου είναι το χαρακτηριστικό «data-animate», το οποίο θα αναφέρεται από το CSS για την εφαρμογή των οπτικών εφέ. Το κείμενο μέσα στο άρθρο είναι κατασκευασμένο από μια ετικέτα h1 για να υποδείξει ότι το περιεχόμενο είναι ο κύριος τίτλος της σελίδας.
άρθρο data-animate = "μετακίνηση σε"> h1> Γεια σας! / h1> / άρθρο>
03. Έναρξη CSS
Δημιουργήστε ένα νέο αρχείο με το όνομα "styles.css". Το πρώτο σύνολο οδηγιών ορίζει το κοντέινερ και το σώμα HTML της σελίδας να έχουν μαύρο φόντο, καθώς και χωρίς ορατό διάστιχο. Το λευκό έχει επίσης οριστεί ως το προεπιλεγμένο χρώμα κειμένου για να κληρονομήσουν όλα τα θυγατρικά στοιχεία της σελίδας. αποφεύγοντας το προεπιλεγμένο μαύρο χρώμα του περιεχομένου δημιουργίας κειμένου φαίνεται να είναι αόρατο.
html, body {φόντο: # 000; επένδυση: 0; περιθώριο: 0; χρώμα: #fff; }
04. Δοχείο κινουμένων σχεδίων
Το κοντέινερ περιεχομένου που αναφέρεται με το χαρακτηριστικό "data-animate" έχει συγκεκριμένα στυλ. Το μέγεθός του έχει ρυθμιστεί ώστε να ταιριάζει με το πλήρες μέγεθος της οθόνης χρησιμοποιώντας μονάδες μέτρησης vw και vh, καθώς και ελαφρά περιστροφή. Εφαρμόζεται μια κίνηση που ονομάζεται "moveIn", η οποία θα διαρκέσει για 20 δευτερόλεπτα και θα επαναληφθεί απεριόριστα.
[data-animate = "move in"] {θέση: σχετικός; πλάτος: 100vw; ύψος: 100vh; αδιαφάνεια: 1; animation: moveIn 20s απεριόριστο. text-align: center; μετασχηματισμός: περιστροφή (20deg); }
05. Έναρξη κίνησης
Το animation "moveIn" που αναφέρεται στο προηγούμενο βήμα απαιτεί έναν ορισμό χρησιμοποιώντας το @keyframes. Το πρώτο καρέ που ξεκινά από το 0% της κινούμενης εικόνας ορίζει το προεπιλεγμένο μέγεθος γραμματοσειράς, τη θέση του κειμένου και την ορατή σκιά. Επιπλέον, το στοιχείο ρυθμίζεται με μηδενική αδιαφάνεια έτσι ώστε να είναι αρχικά αόρατο - δηλαδή. εμφανίζεται εκτός προβολής.
@keyframes moveIn {0% {font-size: 1em; αριστερά: 0; αδιαφάνεια: 0; text-shadow: κανένα; } * * * ΒΗΜΑ 6 ΕΔΩ}
06. Ζώο σε προβολή
Το επόμενο πλαίσιο τοποθετείται στο 10% μέσω του animation. Αυτό το πλαίσιο θέτει την αδιαφάνεια να είναι πλήρως ορατή, με αποτέλεσμα το κείμενο να κινείται σταδιακά σε προβολή.Επιπλέον, προστίθενται πολλές σκιές με μπλε και μειωμένες τιμές χρώματος για να δώσουν τις ψευδαισθήσεις του βάθους 3D στο κείμενο.
10% {αδιαφάνεια: 1; κείμενο-σκιά: .2em -.2em 4px #aaa, .4em -.4em 4px # 777, .6em -.6em 4px # 444, .8em -.8em 4px # 111; } * * * ΒΗΜΑ 7 ΕΔΩ
07. Οριστικοποίηση της κινούμενης εικόνας
Τα τελικά καρέ εμφανίζονται στο 80% και στο τέλος του animation. Αυτά είναι υπεύθυνα για την αύξηση του μεγέθους της γραμματοσειράς και τη μετακίνηση του στοιχείου προς τα αριστερά. Εφαρμόζονται επίσης νέες ρυθμίσεις για να κινείται προς τη σκιά του κειμένου, ενώ επίσης ξεθωριάζει το κείμενο από την προβολή από πλαίσια 80% έως 100%.
80% {font-size: 8em; αριστερά: -8em; αδιαφάνεια: 1; } 100% {font-size: 10em; αριστερά: -10em; αδιαφάνεια: 0; text-shadow: .02em -.02em 4px #aaa, .04em -.04em 4px # 777, .06em -.06em 4px # 444, .08em -.08em 4px # 111; } * * *
Σημείωση: ό, τι έργο ξεκινάτε, είναι απαραίτητο να έχετε αποθήκευση cloud που μπορεί να αντιμετωπίσει (ο οδηγός μας θα βοηθήσει).
Αυτό το άρθρο δημοσιεύθηκε αρχικά στο τεύχος 273 του δημιουργικού περιοδικού Web Designer. Αγοράστε το τεύχος 273 εδώ ή εγγραφείτε στο Web Designer εδώ.
