24 έξυπνα σχέδια ιστοσελίδων που συνδυάζουν JQuery και εικονογράφηση
Χάρη στη δύναμη της JavaScript, οι λέξεις "δυναμική" και "εικονογράφηση" δεν ισχύουν πλέον αποκλειστικά για ιστοσελίδες με βάση το Flash.
Τώρα που η δυναμική HTML αποτελεί πραγματικότητα στα πιο συχνά χρησιμοποιούμενα προγράμματα περιήγησης και υπάρχουν πολλές φανταστικές βιβλιοθήκες JavaScript για να γίνει εύκολη η χρήση της, οι ιστότοποι CSS μπορούν να πάρουν πίσω μέρος των πιστών που κρατούνται τόσο σφιχτά από το Flash.
Από αυτές τις νέες βιβλιοθήκες JavaScript, το jQuery έχει γίνει ένα από τα πιο ευρέως υιοθετημένα λόγω της ευκολίας χρήσης, του εύρους των χαρακτηριστικών και της αρχικής εστίασης στην οπτική μοναδικότητα.
Εδώ είναι 24 έξυπνα παραδείγματα σχεδιασμού ιστοσελίδων που χρησιμοποιούν jQuery και Illustration .
1.Form Fifty Five
Χαρακτηριστικά: Αλλαγή απεικόνισης κεφαλίδας πολλαπλά παράθυρα προβολής διαφανειών.
Περιγραφή: Όχι μόνο αυτός ο ιστότοπος έχει πολύ πραγματικά καλές σχετικές με το σχεδιασμό περιεχόμενο, αλλά jQuery χρησιμοποιείται με διάφορους τρόπους για να βελτιώσει την εμφάνιση και τη χρηστικότητα του δικτυακού τόπου. Προσθέστε σε ένα περιοδικά μεταβαλλόμενο εικονογραφημένο υπόβαθρο και μερικές ωραίες κυκλικές διεπαφές ελέγχου και έχετε ένα όμορφο γάμο jQuery και εικονογράφηση.
Αρχική σελίδα με εικονίδιο κεφαλίδας: 
Αριστερή στήλη με ετικέτες που έχουν πατηθεί: 
Κεφαλίδα σκίασης παραθύρου για σύνδεση: 
2. Frozn
Χαρακτηριστικά: Κάθετη και οριζόντια ολίσθηση.
Περιγραφή: Εκτός από τους μεγάλους, φωτεινούς χρωματισμούς κύκλους με αριθμούς, το χαρακτηριστικό που παρατήρησα περισσότερο ήταν οι εικονογραφημένες εικόνες προφίλ. Έτσι, τους έκανα κλικ. Τότε συνέβη η μαγεία: κατακόρυφη και οριζόντια σκίαση παραθύρων που άνοιξε ένα πλήρες σύνολο καταχωρήσεων blog με ενσωματωμένα βίντεο Vimeo. Η επίμονη κλίση υποσέλιδου είναι ένα ενδιαφέρον αποτέλεσμα όταν μετακινηθείτε προς τα κάτω.
Μεγάλους κύκλους και εικονογραφήσεις στην αρχική σελίδα: 
Κάθετα επεκτεινόμενο περιεχόμενο: 
Οι επεξηγήσεις των συγγραφέων διευρύνθηκαν για να αποκαλύψουν καταχωρήσεις ιστολογίου και βίντεο 
3. Mockup iPhone
Χαρακτηριστικά: Μεταφορά και απόθεση, στόχευση
Περιγραφή: Εάν έχετε σκεφτεί ποτέ να δημιουργήσετε μια εφαρμογή για το iPhone (και ποιος προγραμματιστής ιστού δεν το έχει;), τότε αυτό μπορεί να είναι ένας ιστότοπος για τον έλεγχο. Σας επιτρέπει να μεταφέρετε και να αποθέσετε σκιασμένα στοιχεία ή στοιχεία σχεδιαγράμματος που έχουν σχεδιαστεί από υπολογιστή σε ένα περίγραμμα iPhone που σχεδιάστηκε με σκίτσο ή έχει σχεδιαστεί από υπολογιστή. Παρά το γεγονός ότι είναι αρκετά γυμνά κόκαλα στο σχεδιασμό, είναι μια καινοτόμος χρήση της απεικόνισης που θα μπορούσε μόνο να έχει τραβηχθεί από το παρελθόν με Flash.
Επεξεργαστής iPhone που έχει σχεδιαστεί από υπολογιστή: 
Σχέδιο επεξεργαστή iPhone: 
4. Florida Flourish
Χαρακτηριστικά: Ποντίκια με διαφάνεια, παρουσίαση διαφανειών
Περιγραφή: Τα λαμπερά χρώματα και οι λεπτομέρειες του εικονογραφημένου δένδρου σε αυτή την εκκίνηση είναι άμεση προσοχή. Κάντε κλικ σε οποιαδήποτε από τις κατηγορίες που διακλαδίζονται από το δέντρο και θα έχετε όχι μόνο περιγραφικό περιεχόμενο που βασίζεται σε jQuery, αλλά και ένα εντελώς διαφορετικό δέντρο. Κάντε κύλιση προς τα κάτω και θα δείτε μια ωραία κεντρική παρουσίαση και ένα υποσέλιδο που παίρνει το φυσικό μοτίβο υπόγειο.
Πλήρης προβολή της αρχικής σελίδας, με μεγάλο δέντρο, παρουσίαση και υποσέλιδο: 
Δέντρο χρησιμότητας: 
Δέντρο ευελιξίας: 
5. Τσάι App
Χαρακτηριστικά: Παρουσίαση, ελάσσονα κινούμενα σχέδια, συρόμενα αντικείμενα
Περιγραφή: Ίσως είναι εγώ ή ένα σημάδι ότι η Apple έχει λαμπρούς σχεδιαστές, αλλά μου αρέσουν οι ιστοσελίδες που έχουν περικόψει φωτογραφίες iPhone. Αυτός ο ιστότοπος έχει μια κινούμενη εικόνα, με μια παρουσίαση στην οθόνη που ενεργοποιείται από το ποντίκι πάνω από μερικά καλοφτιαγμένα κουμπιά. Ο στρογγυλεμένος τύπος Helvetica συνδυάζεται με τον σχεδιασμό του τηλεφώνου και των κουμπιών. Οι εικονογραφήσεις με θέμα το τσάι στη σελίδα και στα στιγμιότυπα οθόνης της εφαρμογής συνδέουν τα πάντα μαζί.
Κινούμενες εικόνες στο εσωτερικό του γραφικού iPhone στη σελίδα: 
Το αναδυόμενο παράθυρο εμφανίζει την οθόνη της εφαρμογής: 
Μια άλλη οθόνη τσαγιού γύρου τσαγιού εμφανίζεται στο γραφικό iPhone: 
6. Καλύτερο πριν
Χαρακτηριστικά: Θέση οθόνης, κινούμενα σχέδια πλοήγησης
Περιγραφή: Εάν οι ιστότοποι θα μπορούσαν να πάρουν jQuery στεροειδή, αυτό θα ήταν τα Barry Bonds του ιστού. Με όλα τα δυναμικά γραφικά, αυτός ο ιστότοπος θα μπορούσε εύκολα να θεωρηθεί λάθος για μια ιστοσελίδα Flash. Μετά από προσεκτική επιθεώρηση, όμως, θα διαπιστώσετε ότι η σελίδα δεν είναι ούτε Flash ούτε περίπλοκη από άποψη προγραμματισμού. Αλλά η συνειδητοποίηση ότι δεν υπάρχει ίχνος του Flash θα παραμείνει χαραγμένο στην ψυχή σας.
Το αρχικό μενού: 
Περισσότερα πράγματα σε σγουράκια: 
Υπομενού και χαρτοφυλάκιο: 
Κινουμένων σχεδίων
Η εύρεση σχεδίου ιστότοπου για την οποία επιλέχθηκε το DHTML για να δημιουργηθεί η κινούμενη εικόνα είναι πάντα μια έκπληξη. Το καλύτερο μέρος για μένα είναι ότι μπορώ να το δω στο iPhone μου. Είμαι βέβαιος ότι δεν είναι ο κύριος λόγος για τον οποίο οι σχεδιαστές επέλεξαν να αγνοήσουν το Flash και τα φιλικά προς το περιβάλλον εργαλεία του. Δεν ξέρω πόσο βασίστηκαν στο jQuery για να κωδικοποιήσουν τα κινούμενα σχέδια τους, αλλά έπρεπε να είχαν κάποιες σαδιστικές τάσεις κάποιου είδους να τις απομακρύνουν.
7. Το μάτι του Tori
Χαρακτηριστικά: Πτηνά Origami που φέρουν οριζόντια.
Περιγραφή: Ποιος σκέφτεται να χρησιμοποιήσει origami σε μια ιστοσελίδα; Και ποιος σκέφτεται να χρησιμοποιεί τα μπλε πουλιά origami για να αντιπροσωπεύει τα tweets, αντί για το πρότυπο μπλε εικονογράφηση; Και ποιος σκέφτεται να ζωντανέψει τα tweets; Η απάντηση στις ερωτήσεις αυτές είναι οι δημιουργοί του Tori's Eye. Δημιουργήστε έναν ιστότοπο με κάποια από αυτά τα χαρακτηριστικά και θα έχετε κάτι εντελώς πρωτότυπο. Για αυτούς τους δημιουργούς, η κατοχή όλων αυτών των χαρακτηριστικών δεν ήταν αρκετή. Έκαναν την αντίθετη-διαισθητική απόφαση να κάνουν όλα τα κινούμενα σχέδια χωρίς Flash!
Origami Twitter πουλιά πετούν σε ένα τοπίο: 
8. Τσάντες
Χαρακτηριστικά: Προβολή και υποσέλιδο animation με μονοχρωματικά εικονίδια.
Περιγραφή: Η χρήση του jQuery εδώ είναι πιο εμφανής όταν η προβολή διαφανειών ενεργοποιείται με ένα κλικ στην περιοχή πλοήγησης. Ο επεκτατικός λευκός χώρος, ο μαύρος τύπος και οι εικονιστικές εικονογραφήσεις δημιουργούν έναν όμορφο ιστότοπο. Αλλά βέβαια, μια κινούμενη εικόνα στο υποσέλιδο δεν έχει σταματήσει να λειτουργεί από την άφιξή σας. Κάντε δεξί κλικ στα στερεά μαύρα κινούμενα σχέδια και θα ανακαλύψετε το μυστικό της ταινίας του διαδικτυακού τόπου: Sprites και DHTML.
Αρχική σελίδα με πολύ λευκό χώρο: 
Μεγάλα εικονίδια διάσπαρτα σε όλο το περιεχόμενο διαφανειών: 
Το κινούμενο υποσέλιδο τρέχει συνεχώς, ανεξάρτητα από το πού βρίσκεστε στην ιστοσελίδα: 
9. Kidd 81
Χαρακτηριστικά: Η κινούμενη εικόνα επικεφαλής κινείται οριζόντια.
Περιγραφή: Τα ζωηρόχρωμα σχέδια με θέμα το χειμώνα εδώ προσελκύουν την προσοχή σας αμέσως και ο σχεδιασμός έχει συνέχεια μέχρι το υποσέλιδο. Όπως κάποιες από αυτές τις άλλες ιστοσελίδες που χρησιμοποιούν το jQuery για να εμψυχώσουν αντικείμενα, οι ομαλά κινούμενες εικόνες μοιάζουν να διακρίνονται από το Flash με την πρώτη ματιά. Το κερασάκι στην τούρτα, όμως, είναι το draggable "Wow! Δεν μπορώ να πιστέψω ότι μπορείτε να σύρετε αυτά τα "εικονίδια.
Αρχική κινούμενα σχέδια αρχικής σελίδας: 
Ένα υποσέλιδο με το ίδιο εικονογραφημένο θέμα: 
Το τμήμα καταστήματος έχει τον ίδιο χαρακτήρα και τα ίδια χρώματα: 
Κάθετη κύλιση
Μερικά εργαλεία JavaScript είναι ικανά να ενεργοποιούν την ομαλή κύλιση μεταξύ τμημάτων μιας σελίδας. Το jQuery, βέβαια, είναι περισσότερο από ικανό να επιτελέσει αυτό το αποτέλεσμα και τουλάχιστον μερικές από τις ιστοσελίδες αυτού του τμήματος λαμβάνουν αυτή τη διαδρομή. Η δυναμική κύλιση είναι ωραίο αποτέλεσμα, αλλά σε συνδυασμό με δημιουργικές και λεπτομερείς απεικονίσεις, το χαρακτηριστικό είναι μόνο ένα μέρος της μεγαλύτερης εικόνας.
10. Tomas Pojeta
Χαρακτηριστικά: Sky, ωκεανός, υποβρύχια.
Περιγραφή: Όπως μερικές άλλες ιστοσελίδες σε αυτό το τμήμα, το Pojeta υιοθετεί ένα μοτίβο που πηγαίνει από μεγάλο υψόμετρο έως κάτω από την επιφάνεια. Η κορυφή της ιστοσελίδας είναι στο διάστημα, με τον εξαιρετικά λεπτομερή πυραύλο και μαϊμού. Μετακινηθείτε προς τα κάτω και θα δείτε τους εξωγήινους και τα μπαλόνια στην κάτω ατμόσφαιρα. Περαιτέρω κάτω είναι ένα παρθένο νησί που ψάχνει κομμάτι γης στη μέση του νερού, η οποία οδηγεί σε μια υποβρύχια θέα με ένα υποβρύχιο. Κάθε εικόνα ταιριάζει, και οι μεταβάσεις είναι περίπου τόσο απρόσβλητοι όσο παίρνει.
Πύραυλος και μαϊμού στο διάστημα: 
Νησί του Πάσχα και του τοκουάν: 
Υποβρύχιο υποβρύχιο: 
11. Morphix
Χαρακτηριστικά: Χώρος, ουρανός, γη, υπόγεια.
Περιγραφή: Το Morphix ξεκινά επίσης με κάποια ανώτερη ατμοσφαιρική δράση, αλλά στη συνέχεια μεταβαίνει στη γη αντί της θάλασσας και τελειώνει με ένα υπόγειο διαχωρισμό. Το στυλ είναι προφανώς διαφορετικό, αλλά η απεικόνιση για κάθε στρώμα καλύπτει το πλάτος της σελίδας, όπως και η τελευταία, δημιουργώντας μια αίσθηση ορίζοντα. Και πάλι, η μετάβαση από τον ουρανό στο υπόγειο ρέει ομαλά, ειδικά με τη δυναμική κύλιση.
Άνω ατμόσφαιρα, με χαρτοφυλάκιο: 
Επίπεδο εδάφους, με αγελάδες και ουρανοξύστες: 
Υπόγεια, με ρίζες δέντρων και αλεσέ: 
12. GANDRWeb
Χαρακτηριστικά: Διάφορα infographics.
Περιγραφή: Σε αντίθεση με τους προηγούμενους δύο ιστότοπους, αυτός χρησιμοποιεί ενημερωτικά στοιχεία αντί των χαρακτήρων, των τοπίων και του φόντου. Κάθε τμήμα της σελίδας εξηγεί το συνοδευτικό γραφικό. Το κάτω μέρος της σελίδας παρουσιάζει, χωρίς έκπληξη, μια μεγάλη φόρμα ιστού. Ένας καθαρά σχετικός με τις πωλήσεις ιστότοπος που χρησιμοποιεί τόση καλή εικόνα είναι σπάνιος. Οι μεταβάσεις που ενεργοποιούνται από jQuery προσθέτουν στιλπνότητα στο μήνυμα.
Ενημερωτικά για τα οφέλη και την τιμολόγηση: 
Infographic εξηγώντας τη διαδικασία σχεδιασμού: 
Φόρμα διαδικτύου: 
13. Orman Clark
Χαρακτηριστικά: Σύννεφα, εδάφους και ιπτάμενα αντικείμενα
Περιγραφή: Όπως και οι δύο πρώτοι ιστότοποι σε αυτή την ενότητα, ο ιστότοπος του Orman Clark ξεκινά με τον ουρανό, αλλά η ψηλή σελίδα κολλάει με ουρανό σύννεφο μέχρι το υποσέλιδο, όπου χτυπούμε στο έδαφος. Μια αξιοσημείωτη διαφορά μεταξύ αυτής της σελίδας και των περισσότερων άλλων σε αυτό το άρθρο είναι η σταθερή θέση της κύριας πλοήγησης και απεικόνισης. Αυτό τονίζεται από το αστέρι στην κορυφή του φόντου που υπογραμμίζει το πλωτό αυγό. Ο ιστότοπος διαθέτει επίσης ένα καλά ενσωματωμένο slideshow jQuery για το χαρτοφυλάκιο.
Μπαλόνι, αγελάδα και αυγό: 
Biplane και jQuery παρουσίαση διαφανειών χαρτοφυλακίου: 
Web φόρμα, υποσέλιδο και σταθερή πλοήγηση: 
14. Dreamerlines
Χαρακτηριστικά: Διάφορα κολάζ.
Περιγραφή: Ο ιστότοπος Dreamerlines λαμβάνει μια ξεχωριστή προσέγγιση. Όπως το GANDRweb, κάθε τμήμα έχει ένα ξεχωριστό γραφικό που συνδέεται με τα γειτονικά του τμήματα μόνο με λευκό χώρο. Κάθε τμήμα, ωστόσο, είναι μοναδική, λεπτομερής, πολύχρωμη και προσελκύει την προσοχή. Οι έντονες εικονογραφήσεις, το μεγάλο τολμηρό κείμενο και ο χρωματισμός του φόντου ρυθμίζουν τον τόνο.
Μεγάλο κείμενο για να ξεκινήσετε: 
Κολάζ στο πρόσωπό σας: 
Φόρμα Web που περιβάλλεται από πολλά οπτικά εφέ: 
15. Κοινωνικό σνακ
Χαρακτηριστικά: Καλώδιο, πτηνά και έδαφος.
Περιγραφή: Το μοτίβο του ουρανού δεν γερνάει ποτέ και οι σχεδιαστές μπορούν να επιλέξουν από οποιοδήποτε παλέτα για να χρωματίσουν τον ορίζοντα τους. Ο ορίζοντας του κοινωνικού σνακ είναι λίγο θολό, με έντονο πράσινο και καφέ χρώμα. Τα πουλιά κάθονται σε καλώδια που είναι διάσπαρτα κάθετα σε όλη τη σελίδα σε ξεχωριστά τμήματα. Η ιστοσελίδα τελειώνει με μια ταράτσα. Αν και το blog δεν έχει ομαλή jQuery κύλιση, η διασκέδαση εικονογραφημένη κεφαλίδα με χαριτωμένους χαρακτήρες αξίζει να αναφέρουμε.
Η παλέτα χρωμάτων και το μοτίβο πουλιών στην κορυφή: 
Τα πλαίσια για τις φωτογραφίες της ομάδας κρέμονται από ένα σύρμα πουλιών: 
Χαριτωμένοι χαρακτήρες στην ενότητα ιστολογίου: 
Παρουσίαση διαφανειών
Μία από τις πιο συνηθισμένες και αναγνωρίσιμες χρήσεις του jQuery είναι για το σενάριο slideshow. Κάθε φορά που βλέπετε περιεχόμενο που ολισθαίνει στην οθόνη μετά από ένα κλικ του ποντικιού και δεν μπορεί να βρεθεί Flash, είναι πιθανώς jQuery. Θα βρείτε slideshows σε εταιρικούς ιστότοπους, σελίδες προορισμού, χαρτοφυλάκια πρακτορείων, ιστότοπους ηλεκτρονικού εμπορίου, παντού. Αυτοί είναι πανταχού παρόντες. Ακολουθούν μερικά παραδείγματα slideshows που ζωντανεύουν λόγω αιχμηρών απεικονίσεων.
16. GoSiteWave
Χαρακτηριστικά: Κάθετη προβολή διαφανειών με οριζόντια πλοήγηση και ελκυστικά εικονίδια.
Περιγραφή: Η κατακόρυφη κύλιση της παρουσίασης, σε συνδυασμό με τα εικονίδια και τις εικόνες, είναι η πραγματική ιστορία εδώ. Οι προβολές διαφανειών αναμένεται να μετακινηθούν οριζόντια, οπότε το αντίθετο είναι εντυπωσιακό. Τα φωτεινά μπλουζ και τα πορτοκάλια, τα σικερά στρογγυλά κουμπιά και το σκούρο φόντο με επιδέξια τοποθετημένες λωρίδες φωτός προσθέτουν στο αποτέλεσμα. Φυσικά, αν τα εικονίδια δεν είχαν γίνει τόσο καλά, ο ιστότοπος ίσως δεν είχε κάνει την περικοπή.
Αρχική σελίδα διαφανειών γραφικών: 
Άλλο slideshow: 
17. Sketchen
Χαρακτηριστικά: Οριζόντια παρουσίαση ταινιών Flash, με προ-φορτωμένο περιεχόμενο, μεγάλο κείμενο και εικονογραφήσεις.
Περιγραφή: Αν σας αρέσει το κίτρινο, θα αγαπήσετε αυτόν τον ιστότοπο. Αυτή η παρουσίαση παρουσιάζει μεγάλες περικομμένες εικόνες που διατηρούν το κίτρινο φόντο ανέπαφο. Μια πρόσθετη παρουσίαση στο αναδυόμενο "lightbox" περιέχει το χαρτοφυλάκιο. Μήπως αναφέρω ότι οι εικονογραφήσεις ήταν μεγάλες; Παίρνουν πολύ χώρο, αλλά είναι πολύ καλά. Το χρώμα του φόντου και οι εικόνες τονίζονται από τα πράσινα και λευκά στοιχεία πλοήγησης και η έντονη αντίθεση εξασφαλίζει ότι η χρηστικότητα δεν είναι ανησυχητική.
Μεγάφωνο: 
Λευκό υποσέλιδο: 
Μήλο: 
Χαρτοφυλάκιο στο "lightbox": 
18. Μορφή πενήντα πέντε
Χαρακτηριστικά: Ομαλή κατακόρυφη κύλιση, δυναμικά δημιουργημένο περιεχόμενο blog, παρουσίαση διαφανειών,
Περιγραφή: Μην αφήνετε την μονόχρωμη παλέτα χρωμάτων και τα απλά σχέδια γραμμής να σας ξεγελάσουν. Αυτός ο δικτυακός τόπος έχει όλα. Ολοκληρωμένη κατακόρυφη κύλιση, σταθερό υποσέλιδο που επικαλύπτει περιεχόμενο, παρουσίαση διαφανειών χαρτοφυλακίου, δυναμικό περιεχόμενο blog, κ.λπ. Με όλες αυτές τις λειτουργίες που πηγαίνουν για αυτό, αυτό που θέτει πραγματικά τον χώρο εκτός είναι ο συνολικός αριθμός τυχαίων εικονογραφήσεων και το γεγονός ότι ' Όλοι είναι πολύ αστείο. Σε αυτές τις γραμμές, μια επίσκεψη στον ιστότοπο δεν είναι πλήρης χωρίς τη δειγματοληψία του ξεκαρδιστικού βίντεο "Σχετικά".
Πολλές απεικονίσεις στην οθόνη έναρξης
Οι χαρακτήρες ταιριάζουν με το στυλ απεικόνισης
Εμφάνιση διαφανειών χαρτοφυλακίου
Οι τίτλοι πλοήγησης υποσέλιδου υπογραμμίζονται κατά την κύλιση
Οριζόντια κύλιση
Σε αντίθεση με την προβολή διαφανειών, η οποία συνήθως περιορίζεται σε μια ενότητα μιας ιστοσελίδας, η οριζόντια κύλιση (όπως ορίζεται εδώ) συμβαίνει στο επίπεδο του προγράμματος περιήγησης ή τουλάχιστον αισθάνεται έτσι. Η δυναμική οριζόντια κύλιση δεν έχει τόσα πολλά παραδείγματα όπως η κάθετη κύλιση. αλλά όπως θα δείτε, οι σχεδιαστές που σκέφτονται οριζόντια έχουν μεγάλες φαντασίες.
19. Serial Cut
Χαρακτηριστικά: οριζόντια και κάθετη κύλιση.
Περιγραφή: Αυτή η προβολή διαφανειών έχει σχεδιαστεί για να καλύψει την περιοχή προβολής του προγράμματος περιήγησης. Δεν μπορείτε να μετακινηθείτε αριστερά ή δεξιά, αλλά έχει σημασία; Οι εικόνες και ο σχεδιασμός είναι τόσο εξαιρετικοί που ο προγραμματιστής θα μπορούσε να είχε διασταυρωμένη, ανάποδα ή οποιαδήποτε άλλη αόριστη μέθοδο ναυσιπλοΐας και οι άνθρωποι θα περνούσαν ακόμα την προσπάθεια να υπολογίζουν τι θα ακολουθήσει. Αυτό που πραγματικά βοηθά είναι το μέγεθος του εικονιδίου πλοήγησης και ότι οι φωτογραφίες και οι εικόνες του χαρτοφυλακίου καταλαμβάνουν ολόκληρη την οθόνη.
Τρένα: 
CD κάλυψη: 
3-D τύπος με παπούτσια: 
20. Tyler Finck
Χαρακτηριστικά: Οριζόντιες μεταβάσεις, με κινούμενες εικόνες που δημιουργούνται από το φόντο.
Περιγραφή: Εδώ είναι ένα καλό παράδειγμα χρήσης της εικόνας φόντου για να δημιουργήσετε ένα εφέ κίνησης για τη δυναμική οριζόντια κύλιση. Η παλέτα χρωμάτων είναι κυρίως ασπρόμαυρη. Οι γραμματοσειρές είναι με έντονα γράμματα και έχουν παχιά μπλοκ φόντα σε ορισμένα σημεία και ο τύπος που βασίζεται στην εικόνα έχει σκιαγραφική εμφάνιση. Το πλήρες πακέτο λειτουργεί καλά.
Μια μινιμαλιστική αρχική σελίδα: 
Bio: 
Το σουτ χρημάτων: 
Άλλες λειτουργίες
Ορισμένες ιστοσελίδες που χρησιμοποιούν το jQuery δεν είναι εύκολα κατατάξιμες. Μπορεί να έχουν ασυνήθιστα χαρακτηριστικά ή να κάνουν λεπτή χρήση του jQuery ή να προσαρμόσουν μια κοινή τεχνική με ασυνήθιστο τρόπο. Η προ-φόρτωση, η αυτόματη συμπλήρωση κειμένου, η εξασθένιση και η σμίκρυνση κειμένου και η στρωματοποίηση κειμένου σε εικόνες είναι μερικά από τα κόλπα που βρέθηκαν στο τελικό σύνολο ιστοτόπων αυτής της συλλογής.
21. Πορτοκαλί ετικέτα
Χαρακτηριστικά: Προ-φόρτωση εικόνας.
Περιγραφή: Η προ-φόρτωση εικόνας είναι η έκταση της χρήσης του jQuery από την Orange Label. Κατά την κύλιση προς τα κάτω, τα στοιχεία χαρτοφυλακίου προστίθενται στη σελίδα (με ένα περιστρεφόμενο γραφικό που σας λέει ότι προ-φόρτωση). Από τη σκοπιά της χρηστικότητας, αυτό το βολικό χαρακτηριστικό διατηρεί τη σελίδα από αυτόματη φόρτωση περιεχομένου εύρους ζώνης. Η απεικόνιση στην κορυφή είναι μεγάλη, πολύχρωμη, εξαιρετικά λεπτομερής και νόστιμη καραμέλα ματιών.
Η εικόνα: 
Εικονογραφημένο είδωλο: 
Στοιχείο χαρτοφυλακίου και υποσέλιδο: 
22. Εικονοσκόπιο μεταξοτυπίας
Χαρακτηριστικά: ολοκλήρωση κειμένου.
Περιγραφή: Πληκτρολογήστε το όνομα ενός εικονιδίου και αυτός ο ιστότοπος ταξινομεί τα εικονίδια του βάσει των πιθανών αποτελεσμάτων του τι έχετε πληκτρολογήσει μέχρι τώρα. Η ποιότητα των εικονιδίων είναι αρκετά καλή και η υπηρεσία είναι αρκετά βολική για το σύνολο. Επειδή ο σχεδιασμός είναι πραγματικά για τα αποτελέσματα αναζήτησης, έχει ελάχιστα με τον τρόπο της οπτικής απόσπασης της προσοχής, η οποία είναι ένα μεγάλο συν.
Προεπιλεγμένη προβολή: 
Αποτελέσματα αναζήτησης για "light": 
23. Vyniknite
Χαρακτηριστικά: Fades.
Περιγραφή: Αυτός ο ιστότοπος ξεκινάει με μια μεγάλη εικόνα από πικραλίδα, καλή εμφάνιση και ωραία επιλογή γραμματοσειρών. Η μόνη αξιοσημείωτη ενέργεια jQuery που συμβαίνει είναι η εξασθένιση και η έξοδος που συμβαίνει κατά την πλοήγηση στις καρτέλες. Μια άλλη μικρή φέτα του ουρανού είναι ο τρόπος που η πικραλίδα καταλήγει σε αλληλεπικάλυψη τόσο των ενεργών όσο και των αδρανών καρτελών. Και αν κοιτάξετε προσεκτικά το παρασκήνιο, θα δείτε μερικές περίπλοκες στροφές αέρα που συνοδεύουν την πλωτή πανίδα.
Πικραλίδες εν αφθονία: 
24. Οργανισμός Halo
Χαρακτηριστικά: Αυτόματο slideshow με εικόνα φόντου. κείμενο πάνω στις εικόνες.
Περιγραφή: Φόντο, φόντο, φόντο. Πλοηγηθείτε μέσω αυτής της ιστοσελίδας και θα βρείτε μια ποικιλία από διακοσμητικά αυτά γεμάτα πολύχρωμα 3-D εικονογραφήσεις. Ένα εντυπωσιακό χαρτοφυλάκιο μπορεί να προσεγγιστεί μέσω μιας jQuery slideshow στην αρχική σελίδα. Εναλλακτικά, μπορείτε να βρείτε πληροφορίες για κάθε στοιχείο στην ενότητα χαρτοφυλακίου (ή "εργασίας") από την επικάλυψη κειμένου στη μικρογραφία.
Αρχική σελίδα με παρουσίαση: 
Το χαρτοφυλάκιο επικαλύπτει κείμενο σε εικόνες: 
Ένα άλλο πολύχρωμο φόντο: 
Γράφτηκε αποκλειστικά για το WDD από τον Maurice Wright. Είναι προγραμματιστής ιστοσελίδων και σχεδιαστής και δημιουργός του Moluv.com . Από το 2000, ο Moluv αποτέλεσε πηγή έμπνευσης για δημιουργικό πνεύμα που αναζητούσε τους καλύτερους ιστότοπους στο Διαδίκτυο.
Πώς άλλαξε το jQuery τον τρόπο με τον οποίο σχεδιάζετε τους ιστοτόπους σας; Παρακαλώ σχολιάστε παρακάτω ...