Περιεχόμενο
- 01. Προσθέστε τον κωδικό στην κύρια ετικέτα της σελίδας σας
- 02. Στυλ της οθόνης
- 03. Εμφάνιση της δυσλειτουργίας
- 04. Κρατήστε τα πάντα
- 05. Τρέχοντας το πρόβλημα
- 06. Επιστροφή στην κανονικότητα
- Αγοράστε το εισιτήριό σας για Generate New York τώρα
Ένας πολύ καλός τρόπος για να τραβήξετε την προσοχή - και να το κρατήσετε - είναι να δημιουργήσετε μια διάταξη ιστότοπου που θα αναδεικνύει τα ταλέντα σας από την αρχή (ένας αξιοπρεπής δημιουργός ιστότοπων μπορεί να βοηθήσει στην κατασκευή). Ο ιστότοπος της Ουκρανίας του γραφείου Vintage είναι ένα εξαιρετικό παράδειγμα, που σας φέρνει στο χαρτοφυλάκιο σχεδιασμού VR με έναν εντυπωσιακό συνδυασμό ενός παλλόμενου λογότυπου κατασκευασμένου από γυάλινα σωματίδια και ένα υπέροχο κομμάτι δυσλειτουργίας που ενεργοποιείται στο hover
- Κινούμενη εικόνα Ιστού: Δεν απαιτείται κωδικός
Ένα απλό εφέ δυσλειτουργίας που χρησιμοποιείται με φειδώ μπορεί να δώσει στον ιστότοπό σας ένα ζωτικό μικρό επιπλέον οπτικό ενδιαφέρον και είναι εκπληκτικά εύκολο να εφαρμοστεί. Δείτε πώς μπορείτε να το κάνετε.
Έχετε έναν περίπλοκο ιστότοπο στο μυαλό σας; Βεβαιωθείτε ότι η φιλοξενία ιστού σας είναι έτοιμη για την εργασία. Και διατηρήστε τα αρχεία σχεδιασμού σας ασφαλή στην αποθήκευση cloud.
Πραγματοποιήστε λήψη των αρχείων για αυτό το σεμινάριο.
01. Προσθέστε τον κωδικό στην κύρια ετικέτα της σελίδας σας
Η δημιουργία ενός απλού εφέ δυσλειτουργίας μπορεί να γίνει με πολλούς διαφορετικούς τρόπους. Εδώ πρόκειται να το κάνουμε έχοντας ένα κινούμενο GIF στο πάνω μέρος του κειμένου, το οποίο θα ενεργοποιηθεί και θα απενεργοποιηθεί στην οθόνη. Αρχικά, προσθέστε αυτόν τον κωδικό στην κύρια ετικέτα της σελίδας σας.
div id = "holder" onmouseover = "glitch ()"> div id = "glitch"> / div> WEB br> ΠΡΟΪΟΝ- br> ION / div>
02. Στυλ της οθόνης
Το περιεχόμενο θα χρησιμοποιεί μια συγκεκριμένη γραμματοσειρά από τις Γραμματοσειρές Google που ονομάζεται Work Sans. Πιάστε τον σύνδεσμο από εκεί και τοποθετήστε τον στο κεφάλι σας. Στη συνέχεια, προσθέστε το CSS είτε σε ετικέτες στυλ είτε σε ξεχωριστό αρχείο CSS. Η σελίδα είναι ασπρόμαυρη με λευκό κείμενο και ο κάτοχος έχει στυλ για το κείμενο.
σώμα {φόντο: # 000; font-family: «Work Sans», sans-serif; χρώμα: #fff; } #holder {font-size: 6em; πλάτος: 500px; ύψος: 300px; περιθώριο: 0 αυτόματη; θέση: σχετική }
03. Εμφάνιση της δυσλειτουργίας
Το εφέ δυσλειτουργίας πρόκειται να είναι μια εικόνα φόντου που τοποθετείται ακριβώς πάνω από την κορυφή του κειμένου. Το σημαντικό μέρος εδώ είναι ότι γίνεται αόρατο μειώνοντας την αδιαφάνεια στο μηδέν, ώστε να μην εμφανίζεται έως ότου ο χρήστης αλληλεπιδρά με το κείμενο.
#glitch {θέση: απόλυτη; κορυφή: 0; αριστερά: 0; ευρετήριο z: 10; πλάτος: 100%; ύψος: 100%; φόντο: url (glitch.gif); αδιαφάνεια: 0; }
04. Κρατήστε τα πάντα
Προσθέστε ετικέτες σεναρίου στο τέλος του τμήματος του σώματος και δημιουργήστε μια προσωρινή μνήμη αναφοράς στο div «glitch» στο έγγραφο. Στη συνέχεια, μια μεταβλητή που ονομάζεται "over" ορίζεται σε false. Αυτό θα ενεργοποιηθεί και θα απενεργοποιηθεί όταν ο χρήστης μετακινεί το κείμενο.
var gl = document.getElementById ("δυσλειτουργία"); var over = false;
05. Τρέχοντας το πρόβλημα
Η λειτουργία δυσλειτουργίας καλείται όταν το ποντίκι κινείται πάνω από το κείμενο. Εάν η δυσλειτουργία δεν λειτουργεί τότε η ορατότητα βλάβης είναι ενεργοποιημένη και απενεργοποιείται μετά από ενάμισι δευτερόλεπτο.Μπορείτε να πειραματιστείτε με αυτό και να χρησιμοποιήσετε έναν τυχαίο αριθμό για να τον κάνετε πιο απρόβλεπτο.
δυσλειτουργία λειτουργίας () {if (over == false) {gl.style.opacity = "1"; setTimeout (συνάρτηση () {normal ();}, 1500); }}
06. Επιστροφή στην κανονικότητα
Το εφέ δυσλειτουργίας δεν θα πρέπει να παραμείνει, καθώς θα ήταν πολύ ενοχλητικό για τον χρήστη, αλλά ως διαδραστικό στοιχείο λειτουργεί καλά. Εδώ, ο κώδικας επαναφέρει την αδιαφάνεια στο μηδέν έτσι ώστε να μην είναι ορατή στο πάνω μέρος του κειμένου.
κανονική λειτουργία () {gl.style.opacity = "0"; }
Αγοράστε το εισιτήριό σας για Generate New York τώρα
Η τριήμερη εκδήλωση σχεδιασμού ιστοσελίδων Generate New York επέστρεψε. Από τις 25 έως τις 27 Απριλίου 2018, οι ομιλητές θα περιλαμβάνουν τον Dan Mall SuperFriendly, τον σύμβουλο κινούμενων σχεδίων Ιστού Val Head, τον προγραμματιστή JavaScript πλήρους στοίβας Wes Bos και άλλα. Υπάρχει επίσης μια ολόκληρη μέρα εργαστηρίων και πολύτιμων ευκαιριών δικτύωσης - μην το χάσετε. Αποκτήστε το εισιτήριό σας τώρα.
Αυτό το άρθρο δημοσιεύθηκε αρχικά στο τεύχος 270 του δημιουργικού περιοδικού Web Designer. Αγοράστε το τεύχος 270 εδώ ή εγγραφείτε στο Web Designer εδώ.
