Μια δυναμική διεπαφή στον ιστότοπό σας θα τραβήξει την προσοχή των χρηστών και θα αυξήσει την επισκεψιμότητα. Η δημιουργία μιας κινούμενης κεφαλίδας για έναν ιστότοπο δεν είναι τόσο δύσκολη όσο φαίνεται με την πρώτη ματιά.
Οδηγίες
Βήμα 1
Ας προσπαθήσουμε να δημιουργήσουμε μια κινούμενη κεφαλίδα, η οποία θα αλλάξει τη διαμόρφωσή της όταν ο δρομέας του ποντικιού αιωρείται πάνω του. Για παράδειγμα, μια ασπρόμαυρη εικόνα σε μια κεφαλίδα μετατράπηκε σε χρώμα κατά την αλληλεπίδραση ή άλλαξε σε άλλη.
Βήμα 2
Εγκαταστήστε τη βιβλιοθήκη jQuery στον υπολογιστή σας μετά τη λήψη της από τον επίσημο ιστότοπο (jquery.com).
Βήμα 3
Συνδέστε τη βιβλιοθήκη στο αρχείο html μεταξύ των ετικετών κεφαλής χρησιμοποιώντας την ετικέτα σεναρίου:
Βήμα 4
Επιλέξτε δύο εικόνες που θα αντικαταστήσουν η μία την άλλη όταν ο χρήστης αλληλεπιδρά με την κεφαλίδα. Εάν θέλετε να κάνετε μετάβαση από μαύρο και άσπρο σε χρώμα, δημιουργήστε ένα αντίγραφο της εικόνας και αποκορεσμός της στο Photoshop.
Βήμα 5
Δημιουργήστε μια λίστα με δύο στοιχεία στο έγγραφο html και επισυνάψτε εικόνες σε κάθε χρησιμοποιώντας την ετικέτα εικόνας. Εφαρμόστε μια τάξη στυλ στην ίδια τη λίστα, για παράδειγμα
Βήμα 6
Κάντε το στο div που είναι υπεύθυνο για την κεφαλίδα του ιστότοπού σας. Κατ 'αρχάς, καθορίστε τη διεύθυνση της εικόνας που θα πρέπει να αντικατοπτρίζεται σε στατική κατάσταση και, στη συνέχεια, αυτή που εμφανίζεται στο δείκτη.
Βήμα 7
Προσθήκη κλάσης = "pervaya" στην πρώτη εικόνα και κλάσης: "vtoraya" στη δεύτερη εικόνα.
Βήμα 8
Στο συνημμένο αρχείο css, καθορίστε την απόλυτη τοποθέτηση των στοιχείων (θέση: απόλυτο;), σταθερό ύψος και πλάτος (ύψος και πλάτος) για αυτές τις κλάσεις.
Βήμα 9
Τοποθετήστε τις εικόνες το ένα πάνω στο άλλο. Χρησιμοποιήστε το στυλ ευρετηρίου z για αυτό. Σας επιτρέπει να ευθυγραμμίσετε στοιχεία κατά μήκος του άξονα z, ο οποίος απομακρύνεται από εμάς στο βάθος της οθόνης.
Βήμα 10
Για την ίδια τη λίστα, καθορίστε την εσοχή, ευθυγράμμιση που χρειάζεστε και καταργήστε τα στοιχεία λίστας (list-style-type: none;).
Βήμα 11
Δημιουργήστε ένα αρχείο.js και επικολλήστε τον ακόλουθο κώδικα σε αυτό:
$ (έγγραφο). ήδη (συνάρτηση () {
$ ("img.grey"). αιωρηθείτε (λειτουργία () {
$ (this).stop (). animate ({"opacity": "0"}, "αργό");
}, λειτουργία () {
$ (this).stop (). animate ({"opacity": "1"}, "αργό");
});
});
Βήμα 12
Αυτός ο κωδικός θα ενεργοποιήσει την κεφαλίδα σας σε δράση. Μην ξεχάσετε να συνδέσετε το αρχείο.js στο έγγραφο html.
