Πώς να δημιουργήσετε αντικείμενα κειμένου και εικόνων στο CSS

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

Η διαδικασία μας για τη δημιουργία κειμένου glitch εδώ είναι πραγματικά αρκετά παρόμοια με την εργασία με το λογισμικό κινουμένων σχεδίων. Θα τοποθετήσουμε βασικά πλαίσια σε συγκεκριμένα σημεία και θα τα χρησιμοποιήσουμε για τον έλεγχο της δράσης. Η διαφορά με τα βασικά πλαίσια του CSS είναι ότι γράφονται ως ποσοστά για το χρονοδιάγραμμα της κινούμενης εικόνας στον κώδικα. Αυτό δεν είναι οπουδήποτε κοντά τόσο απίστευτο όσο ακούγεται - μόλις το δοκιμάσετε, είναι σχετικά απλή για να επιτύχετε καλά αποτελέσματα. Θέλετε καλά αποτελέσματα χωρίς κωδικοποίηση; Δοκιμάστε ένα οικοδόμος ιστότοπου . Και κρατήστε το site σας να λειτουργεί ομαλά με τα δεξιά web hosting υπηρεσία.

Θα υπάρξει μια μικρή ποσότητα javascript που θα χρησιμοποιηθεί στο σεμινάριο - για να καταργήσετε την οθόνη φόρτωσης μόλις οι εικόνες φορτώστε στη σελίδα - αλλά η κύρια εστίαση εδώ είναι ενεργοποιημένη CSS animation . Θα χρησιμοποιήσουμε επίσης CSS πλέγμα σε στοιχεία θέσης στην οθόνη.

• Κατεβάστε τα αρχεία φροντιστηρίων Από το FileSilo (δωρεάν, απαιτείται σύνδεση)

01. Ρυθμίστε το

Για να ξεκινήσετε, ανοίξτε το αρχή Φάκελος από το Αρχεία έργου μέσα στον επεξεργαστή κωδικών σας. Ανοιξε το index.html Σελίδα, η οποία περιέχει μόνο μια σελίδα Barebones Skeleton HTML. Στο τμήμα κεφαλής, οι γραμματοσειρές χρειάζονται σύνδεση έτσι ώστε ο σχεδιασμός να εμφανίζεται σωστά. Προσθέστε τη σύνδεση στυλ για τις γραμματοσειρές.

<link href="https://fonts.googleapis.com/css?family=IM+Fell+English|Playfair+Display:900"rel="stylesheet">

02. Συνδέστε το CSS

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

 & lt; link rel = "styleshet type =" text / css "
href = "css / site.css" / & gt; 

03. Ρυθμίστε μια οθόνη φόρτωσης

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

 & lt; div id = "φορτωτής" κλάση = "φόρτωση" & gt;
       & lt; div class = "load-logo" & gt; img src = "img / logo.svg" class = "logo" & gt; / div & gt;
   & lt; / div & gt; 

04. Προσθέστε μια γραμμή κεφαλίδας

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

 & lt; div class = "contentfixed" & gt;
       & lt; κλάση κεφαλίδας = "header" & gt;
           & lt; h1 class = "headertitle" & gt; img img
SRC = "img / logo.svg" class = "logo" & gt; Hackercon & lt; / h1 & gt;
       & lt; / header & gt;
       & lt; nav class = "menu" id = "sitenav" & gt;
           & lt; ul & gt;
               & lt; li & gt; "ένα href =" index.html "& gt; / a & lt; / li & gt;
               & lt; li & gt; ένα href = "news.html" & gt; / a & gt; / li & lt; / li & gt;
               & lt; li & gt; & lt; a href = "contact.html" & gt; / a & gt; / li & lt; / li & gt;
               & lt; li & gt; & lt; a href = "about.html" & gt; / a & gt; / li & lt; / li & gt;
           & lt; / ul & gt;
       & lt; / nav & gt;
   & lt; / div & gt; 

05. Προσθήκη εικόνων

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

& lt; div class = "περιεχόμενο" & gt;
       & lt; div class = "glitch" & gt;
            & lt; div class = "glitchit" & gt; / div & gt;
            & lt; div class = "glitchit" & gt; / div & gt;
            & lt; div class = "glitchit" & gt; / div & gt;
            & lt; div class = "glitchit" & gt; / div & gt;
            & lt; div class = "glitchit" & gt; / div & gt;
       & lt; / div & gt;
       & lt; div class = "comententection" & gt;
       & lt; h2 class = "contenttitle" & gt; span & gt; con & lt; / span & gt; / h2 & lt; / h2 & gt;
          & lt; p τάξη = "contenttext" & gt; προσθέστε μια περιγραφή & lt; / p & gt;
           & lt; / div & gt;
       & lt; / div & gt; 

06. ενεργοποιήστε το εφέ κειμένου glitch

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

 & lt; script & gt;
       VAR Loader = Document.getElemementidid ('loader');
       window.adeventListener ("φορτίο",
λειτουργία (συμβάν) {
           φορτωτής.ClassList.
Κατάργηση ('φόρτωση').
           φορτωτής.Classlist.add ('φορτωμένο').
           document.Body.classList.
Προσθέστε ('Imgloaded').
       });
& lt; / script & gt; 

07. Ρυθμίστε τις μεταβλητές CSS

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

 Σώμα {
   - Color-Text: #FFF;
   - Color-BG: # 000;
   - Color-Link: # 555;
   - Color-Link-hover: # 98FADF;
   - Coloror-info: # f7cfb9;
   - Width-πλάτος: 100VW;
   - Υψόμετρο: 100VH;
   --Gap-οριζόντια: 10px;
   - Κατακόρυφος: 5px;
   yeime-anim: 4s;
   - Edelay-anim: 2s; 

08. Πείραμα με μεταβλητές ρυθμίσεις

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

 - Λειτουργία-1: Κανένα;
   - Blind-Mode-2: Επικάλυψη.
   - Mind-mode-3: Κανένα;
   - Mind-mode-4: Κανένα;
   - Λειτουργία-Λειτουργία-5: Επικάλυψη.
   - Color-1: διαφανές.
   - Color-2: # 7D948E;
   - Color-3: διαφανές.
   - Color-4: διαφανές.
   - Color-5: # AF4949;
} 

09. Συμπληρώστε την οθόνη με τις εικόνες

Για να διατηρήσετε τον κωδικό, μετακινηθείτε προς τα κάτω στο σχόλιο που σημειώστε τα βήματα 9 έως 13 στο αρχείο CSS, προσθέτοντας σε αυτόν τον κώδικα. Εδώ ο κωδικός glitch θέτει το δίνω Περιέχει όλες τις εικόνες για να γεμίσετε την πλήρη οθόνη και να τοποθετήσετε απολύτως στην επάνω αριστερή πλευρά της οθόνης. Σημειώστε ότι παίρνει το πλάτος και το ύψος από τις μεταβλητές CSS.

 .Glitch
{
   Θέση: Απόλυτη.
   Κορυφή: 0;
   Αριστερά: 0;
   Πλάτος: VAR (- πλάτος glitch);
   Ύψος: var (- glitch-Ύψος);
   Overflow: Κρυμμένο?
} 

10. Ρυθμίστε την τοποθέτηση εικόνας

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

 .Glitchit {
   Θέση: Απόλυτη.
   Κορυφή: Calc (-1 * VAR (- κενό-κατακόρυφος));
   Αριστερά: Calc (-1 * VAR (- Gap-οριζόντια));
   Πλάτος: Calc (100% + VAR (- Gap-οριζόντια) *
2).
   Ύψος: Calc (100% + VAR (- κενό-κατακόρυφος) *
2).
   Ιστορικό: URL (.../ img / main.jpg) Δεν επαναλαμβάνεται
50% 0;
   Ιστορικό-Χρώμα: VAR (- Blend-Color-1);
   Ιστορικό μέγεθος: κάλυψη;
   Μετασχηματισμός: Translate3D (0, 0, 0);
   Background-Blend-Mode: VAR (- Blend-
mode-1);
} 

11. Επιλέξτε εικόνες

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

 .Glitchit: nth-παιδί (n + 2) {
   αδιαφάνεια: 0;
}
.Imgloaded .Glitchit: nth-παιδί (n + 2) {
   Κίνηση-Διάρκεια: VAR (- Χρονικό anim);
   Κίνηση-καθυστέρηση: var (- καθυστέρηση-anim);
   animation-timing-λειτουργία: γραμμική?
   animation-επανάληψη-Count: Infinite?
} 

12. Ρυθμίστε τις εικόνες δύο και τρεις

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

 μέχρι τα αποτελέσματα.
.Imgloaded .Glitchit: nth-παιδί (2) {
   Ιστορικό-Χρώμα: VAR (- Blend-Color-2);
   Background-Blend-Mode: VAR (- Blend-
mode-2);
   Animation-Όνομα: Glitch-1;
}
.Imgloaded .Glitchit: nth-παιδί (3) {
   Ιστορικό-Χρώμα: VAR (- Blend-Color-3);
   Background-Blend-Mode: VAR (- Blend-
mode-3);
   Animation-Όνομα: Glitch-2;
} 

13. Ρυθμίστε τις εικόνες τέσσερις και πέντε

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

 .Imgloaded .Glitchit: nth-παιδί (4) {
   Ιστορικό-Χρώμα: VAR (- Blend-Color-4);
   Background-Blend-Mode: VAR (- Blend-
Λειτουργία-4).
   Animation-Όνομα: Glitch-3;
}
.Imgloaded .Glitchit: nth-παιδί (5) {
   Ιστορικό-Χρώμα: VAR (- Blend-Color-5);
   Background-Blend-Mode: VAR (- Blend-
mode-5);
   Animation-Όνομα: λάμψη-φλας;
} 

14. Προσθέστε το πρώτο σύνολο κλειδιών

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

 @keyframes glitch-1 {
   0% {
       αδιαφάνεια: 1;
       Μετασχηματισμός: Translate3d (VAR (- Gap-
οριζόντια), 0, 0);
       Clip-Path: Πολύγωνο (0 2%, 100% 2%,
100% 5%, 0 5%).
   } 2% {
       Clip-Path: Πολύγωνο (0 15%, 100% 15%,
100% 15%, 0 15%).
   } 

15. Χρησιμοποιήστε το clip-path

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

 4% {
       Clip-Path: Πολύγωνο (0 10%, 100% 10%,
100% 20%, 0 20%).
   } 6% {
       Clip-Path: Πολύγωνο (0 1%, 100% 1%,
100% 2%, 0 2%).
   } 8% {
       Clip-Path: Πολύγωνο (0 33%, 100% 33%, 1
00% 33%, 0 33%).
   } 10% {
       Clip-Path: Πολύγωνο (0 44%, 100% 44%,
100% 44%, 0 44%);
   } 

16. Επιταχύνετε την κίνηση

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

 12% {
       Clip-Path: Πολύγωνο (0 50%, 100% 50%,
100% 20%, 0 20%).
   } 14% {
       Clip-Path: Πολύγωνο (0 70%, 100% 70%,
100% 70%, 0 70%).
   } 16% {
       Clip-Path: Πολύγωνο (0 80%, 100% 80%,
100% 80%, 0 80%).
   } 18% {
       Clip-Path: Πολύγωνο (0 50%, 100% 50%,
100% 55%, 0 55%).
   } 20% {
       Clip-Path: Πολύγωνο (0 70%, 100% 70%,
100% 80%, 0 80%).
   } 

17. Τελειώστε τις δυσλειτουργίες της εικόνας

Μετά από 22% η εικόνα είναι απενεργοποιημένη μέχρι να αναπαράγει το κινούμενο σχέδιο. Αυτό ολοκληρώνει το glitch-1 με glitch-2 και glitch-3 που ήδη παρέχονται στον κώδικα. Η επόμενη ενότητα θα λάβει το κείμενο που βρίσκεται πάνω από την κορυφή της εικόνας.

 21,9% {
       αδιαφάνεια: 1;
       Μετασχηματισμός: Translate3d (VAR (- Gap-
οριζόντια), 0, 0);
   } 22%, 100% {
       αδιαφάνεια: 0;
       Μετασχηματισμός: Translate3D (0, 0, 0);
       Clip-Path: Πολύγωνο (0 0, 0 0, 0 0, 0
0);
   }
} 

18. Πώς να δημιουργήσετε κείμενο glitch

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

 @keyframes glitch-text {
   0% {
       Μετασχηματισμός: Translate3d (Calc (-1 *
VAR (- Gap-οριζόντια)), 0, 0) Scale3D (-1, -1,
1);
       Clip-Path: Πολύγωνο (0 20%, 100% 20%,
100% 21%, 0 21%).
   } 2% {
       Clip-Path: Πολύγωνο (0 33%, 100% 33%,
100% 33%, 0 33%).
   } 4% {
       Clip-Path: Πολύγωνο (0 44%, 100% 44%,
100% 44%, 0 44%);
   } 

19. Περισσότερη αποκοπή

Το αποτέλεσμα συνεχίζεται σε αυτό το τμήμα κώδικα, αλλάζοντας ταχέως το σχήμα της διαδρομής περικοπής. ο διαδρομή κλιπ έρχεται επίσης με το -Webkit- Πρόθεμα αλλά για συντομία αυτό δεν έχει εμφανιστεί σε κανέναν από τον κώδικα εδώ. Κατά τη στιγμή της γραφής, το Clip Path δεν υποστηρίζεται αυτή τη στιγμή στο IE, Edge ή Opera Mini, αλλά βρίσκεται σε όλα τα άλλα προγράμματα περιήγησης.

 5% {
       Clip-Path: Πολύγωνο (0 50%, 100% 50%,
100% 20%, 0 20%).
   } 6% {
       Clip-Path: Πολύγωνο (0 70%, 100% 70%,
100% 70%, 0 70%).
   } 7% {
       Clip-Path: Πολύγωνο (0 80%, 100% 80%,
100% 80%, 0 80%).
   } 8% {
       Clip-Path: Πολύγωνο (0 50%, 100% 50%,
100% 55%, 0 55%).
   } 

20. Αναστρέψτε το κείμενο πίσω

Στο τελικό κείμενο Glitch Animation το κείμενο γυρίζει πίσω στην αρχική του θέση και περιμένει τα κλειδιά να έρθουν ξανά. Όπως μπορείτε να δείτε όλα τα κινούμενα σχέδια λαμβάνουν χώρα στο 10 τοις εκατό, ενώ παραμένει αδρανής για το 90 τοις εκατό της εποχής, δίνοντας το κείμενο το σωστό ποσό δυσφορίας και επιτρέποντας να είναι ευανάγνωστο.

 9% {
       Clip-Path: Πολύγωνο (0 70%, 100% 70%,
100% 80%, 0 80%).
   } 9,9% {
       Μετασχηματισμός: Translate3d (Calc (-1 *
VAR (- Gap-οριζόντια)), 0, 0) Scale3D (-1, -1,
1);
   } 10%, 100% {
       Μετασχηματισμός: Translate3d (0, 0, 0)
Scale3D (1, 1, 1).
       Clip-Path: Πολύγωνο (0 0, 100% 0, 100%
100%, 0% 100%).
   }
} 

21. Δημιουργήστε ένα γρήγορο φλας

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

 @KeyFrames glitch-flash {
   0%, 5% {
       αδιαφάνεια: 0,2;
       Μετασχηματισμός: Translate3d (VAR (- Gap-
οριζόντια), VAR (- κενό-κάθετη), 0).
   } 5,5%, 100% {
       αδιαφάνεια: 0;
       Μετασχηματισμός: Translate3D (0, 0, 0);
}} 

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

Αυτό το άρθρο δημοσιεύθηκε αρχικά στο Creative Web Design Web Design Web Designer. Αγοράζουν τεύχος 281 ή Εγγραφείτε .

Διαβάστε περισσότερα:

• Προσθέστε μια επίδραση σφάλματος στον ιστότοπό σας
• 10 εκπληκτικές νέες τεχνικές CSS
• Δημιουργήστε εφέ κολάζ στο πρόγραμμα περιήγησης με CSS