20+ Demos που εμφανίζουν τα προηγμένα εφέ JQuery
Λίγο πριν από λίγο, το Flash ήταν μια από τις πρωτογενείς τεχνολογίες που χρησιμοποιούν οι σχεδιαστές ιστοσελίδων για να προσθέσουν διαδραστικότητα σε έναν ιστότοπο.
Από την εισαγωγή του iPad, με την έλλειψη Flash Player, υπάρχει επιτάχυνση στον κόσμο ανάπτυξης ιστοσελίδων για τη χρήση εναλλακτικών τεχνολογιών στο Flash, όπως το jQuery, το Ajax και άλλοι.
Παρόλο που το Flash εξακολουθεί να είναι ένα πολύ ισχυρό και χρήσιμο εργαλείο, το οποίο λειτουργεί σε πολλές περιπτώσεις, πολλά από τα αποτελέσματα που οι σχεδιαστές ιστοσελίδων έχουν συνηθίσει να δημιουργούν στο Flash, μπορούν να εφαρμοστούν εξίσου εύκολα με τη χρήση του jQuery.
Εδώ είναι 21 online demos που δείχνουν τη δύναμη του jQuery για τη δημιουργία προηγμένων εφέ και διαδραστικότητας που μπορούν να ανταγωνίζονται το Flash.
1. Εναλλαγή! Ένα plugin jQuery
Αυτό το demo μιμείται τη δημοφιλή τεχνική flip card που μπορεί να περιστρέψει ένα στοιχείο 360 μοίρες γύρω από το δικό του άξονα x ή y.
2. jQuery Quicksand plugin
Αυτό είναι ένα εξαιρετικό plugin για τη διαλογή μιας σειράς στοιχείων / εικονιδίων σε μια σελίδα με ωραία fade-in / fade-out και εφέ κίνησης.
3. ImageFlow
Αυτό το πρόγραμμα προβολής εικόνων είναι παρόμοιο με το interface CoverFlow της Apple που έχει γίνει τόσο οικείο στα διάφορα προϊόντα και εφαρμογές.
4. Δημιουργία διαδραστικού χάρτη με jQuery αντί Flash
Αυτό το demo ενώνει τη δύναμη του jQuery με τον Ajax, για να δημιουργήσει πραγματικά μια ζωντανή διασύνδεση.
5. Συμβουλές Slideout Με jQuery & CSS3
Κάνοντας κλικ στα σύμβολα "+" αποκαλύπτονται πρόσθετες πληροφορίες με ωφέλιμο ομαλό εφέ κίνησης.
6. Γκαλερί Zoomer
Σε αυτό το demo, αυτό που φαίνεται να είναι τακτική στατική Συλλογή εικόνων παρέχεται κάποια πρόσθετη διαδραστικότητα χρησιμοποιώντας ένα εφέ πολλαπλών στρώσεων όταν στρέφεται πάνω από μια εικόνα.
7. jQuery κυκλοφορούν
Αυτό το demo δείχνει το πολύ χρησιμοποιούμενο εφέ Flash που περιβάλλει μια εικόνα γύρω από μια σελίδα - όλα γίνονται χρησιμοποιώντας το jQuery.
8. Εφέ μεγέθυνσης φωτογραφιών
Αυτό το demo φαίνεται απατηλά απλό, αλλά μετά από περαιτέρω εξέταση θα διαπιστώσετε ότι υπάρχουν πολλά στρώματα για την πολυπλοκότητα του αποτελέσματος zoom-out.
9. Συρόμενα κουτιά και λεζάντες με jQuery
Εδώ μπορούμε να δούμε πόσο ισχυρές μεταβάσεις μπορούν να δημιουργηθούν χρησιμοποιώντας το jQuery, μια τεχνική που αφιερώνεται αποκλειστικά στους προγραμματιστές Flash.
10. CSS3 Gallery Lightbox
Αυτό το πρόσθετο μοιάζει να γράφτηκε ειδικά για κοινωνικά μέσα. Η μεταφορά και απόθεση μιας φωτογραφίας στην κορυφή του "κουτιού κοινής χρήσης" θα ανοίξει ένα παράθυρο που μπορεί να είναι η διεπαφή για την κλήση ενός API μέσω AJAX, το οποίο μπορεί να επιτρέψει στο χρήστη να μοιραστεί μια φωτογραφία στο Flickr, στο Twitter, στο Facebook και σε άλλους ιστότοπους.
11. Δημιουργία εφέ φωτογραφίας με το jQuery & CSS
Αν και αυτή η επίδειξη μπορεί να φαίνεται σαν μάτι-καραμέλα με την πρώτη ματιά, θα μπορούσε να είναι ένα πολύ ισχυρό εργαλείο για την εργασία με μεγάλες εικόνες όταν συνδυάζεται με τοπική αποθήκευση AJAX ή HTML5.
12. Awesome Bubble Navigation
Εδώ ο προγραμματιστής κάνει καλή χρήση των μεταβάσεων χρωμάτων και των κινούμενων εικόνων, δημιουργώντας ένα πολύ ελκυστικό και διαδραστικό μενού.
13. Όμορφη πλοήγηση φόντου εικόνας
Σε αυτήν την επίδειξη, κάθε ενέργεια χρήστη ενεργοποιεί αρκετές μεταβάσεις, οι οποίες ενεργούν για να βυθίσουν πλήρως το χρήστη στη διεπαφή.
14. AviaSlider
Το AviaSlider χρησιμοποιεί κλασικά εφέ μετάβασης που μοιάζουν με Flash, για να βελτιώσουν αυτό που φαίνεται να είναι μια τυπική διεπαφή ρυθμιστικού.
15. Εικόνα φόντου Παρουσίαση διαφανειών
Τα κινούμενα υπόβαθρα είναι μια από τις περιοχές όπου το Flash χρησιμοποιείται για να κυριαρχήσει στο σχεδιασμό ιστοσελίδων. Ακολουθεί ένα παράδειγμα χρησιμοποιώντας το jQuery.
16. Μετακίνηση παρουσίασης διαφανειών
Μια άλλη μοναδική εμφάνιση στην τυπική διεπαφή προβολής διαφανειών. Εδώ ο συγγραφέας προσθέτει τη διαγώνια πλοήγηση για να καρυκευτεί τη διεπαφή και να την ξεχωρίζει.
17. jqFancyTransitions
Αυτό το plugin μπορεί να χρησιμοποιηθεί για την προβολή των φωτογραφιών σας ως παρουσίαση διαφανειών με φανταστικά εφέ μετάβασης ως Flash.
18. iCarousel - Ολισθητήρας οριζόντιων εικόνων
Ένα άλλο slideshow που προσθέτει μόνο ένα άγγιγμα χαλάρωσης για να κάνουν τις μεταβάσεις να ξεχωρίζουν πραγματικά. Δεν είναι περίεργο που επέλεξαν να παρουσιάσουν σέξι προϊόντα Mac σε αυτό το demo.
19. Δημιουργία μιας διαδραστικής εικόνας με το jQuery
Αυτό το demo μπορεί να χρησιμοποιηθεί για να επωφεληθούν από ιστοσελίδες όπου υπάρχει πολύς χώρος στην οθόνη. Κάνοντας κλικ σε μια ενότητα του ιστότοπου, αποκαλύπτεται ένα πλαίσιο με όρους, το οποίο εμφανίζει περισσότερες πληροφορίες σχετικά με το τμήμα που πατήθηκε.
20. Cloud Zoom
Ένα plugin που μοιάζει με αυτό που σχεδιάστηκε με το ηλεκτρονικό εμπόριο στο μυαλό. Το Cloud Zoom είναι εύκολο να εφαρμοστεί και μπορεί πραγματικά να βελτιώσει την εμπειρία του χρήστη.
21. Apple-Like Retina Effect
Όποιος έχει χρησιμοποιήσει ένα iPhone, iPod touch ή iPad είναι εξοικειωμένος με την "Απεικόνιση της Ακτίνας" που θα μεγεθύνει μια μικρή περιοχή στην οθόνη όταν αγγίζετε την περιοχή για μεγάλο χρονικό διάστημα. Αυτό το demo υλοποιεί αυτό το αποτέλεσμα για την επιφάνεια εργασίας.
Συντάχθηκε αποκλειστικά για WDD από Kalim Fleet . Είναι επαγγελματίας σχεδιαστής ιστοσελίδων και blogger με εμπειρία πάνω από 6 χρόνια. Ο ιστός είναι το πάθος του καθώς διαχωρίζει το χρόνο του ανάμεσα στο γράψιμο ιστολογίου, την ανάπτυξη λογισμικού και τα κοινωνικά μέσα. Αγαπά τη χρήση και την ανάπτυξη νέων εφαρμογών για το web, το κινητό και την επιφάνεια εργασίας.
Ξέρετε για άλλα πολύ ωραία παραδείγματα jQuery επιπτώσεων που μπορούν να ανταγωνίζονται τη δύναμη του Flash; Έχετε ποτέ προτείνει jQuery εφέ πάνω από το Flash όταν οι πελάτες σας το ζητήσουν; Παρακαλώ μοιραστείτε τις απόψεις και τα παραδείγματα σας παρακάτω!