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

Σήμανση HTML

Η σήμανση HTML είναι πολύ απλή. Το παράδειγμα έχει τέσσερις διαφάνειες. Κάθε ένα αποτελείται από μια εικόνα (ως φόντο) και κείμενο περιγραφής σε ένα στοιχείο div. Η εισαγωγή πρόσθετων διαφανειών είναι πολύ εύκολη.

css

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

/* Slider */ .slides ( height:300px; margin:50px auto; overflow:hidden; position:relative; width:900px; ) .slides ul ( list-style:none; position:relative; ) /* #anim_slides animation frames */ @-desmes animation frames */ @-desmes animation:0_key (6%webkit-;) αδιαφάνεια:1; ) 24% ( αδιαφάνεια:1; ) 30% ( αδιαφάνεια:0; ) 100% ( αδιαφάνεια:0; ) ) @-moz-keyframes anim_slides ( 0% ( αδιαφάνεια:0; ) 6% ( αδιαφάνεια:1; ) 21%; 1% (0) (αδιαφάνεια:0) ity:0; ) .slides ul li ( opacity:0; position:absolute; top:0; /* css3 animation */ -webkit-animation-name: anim_slides; -webkit-animation-duration: 24,0s; -funnation-animation:-finitite-time; webkit-animation-direction: normal; -webkit-anim ation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: forwards; -moz-animation-name: anim_slides; -moz-animation-slides; -moz-animation-duration: -moz-animation-moz-24. animation-itation-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: προς τα εμπρός; ) /* css3 καθυστερήσεις */ .slides ul li:nth-child(2), .slides ul li:nth-child(2) div ( -webkit-animation-delay: 6.0s; -moz-animation-delay: 6.0s;) .slides ul li:nth-child(2) div ( -webkit-animation-delay: 12.0s; -moz-animation-delay: 12.0s; ) .slides ul li:nth-child(4), .slides ul li:nth-child(4) div ( -webkit-animation-delay; -.bkit-animation-delay; κλείδωμα; ) /* Καρέ κινούμενων σχεδίων #anim_titles */ @-webkit-keyframes anim_titles ( 0% ( αριστερά:100%; αδιαφάνεια:0; ) 5% (αριστερά:10%; αδιαφάνεια:1; ) 20% (αριστερά:10%; αδιαφάνεια:1; ) 25:0% (αριστερά):1:00% (αριστερά:1:0%;) ; αδιαφάνεια:0; ) ) @-moz-keyframes anim_titles ( 0% ( αριστερά:100%; αδιαφάνεια:0; ) 5% (αριστερά:10%; αδιαφάνεια:1; ) 20% (αριστερά:10%; αδιαφάνεια:1; ) 25% (αριστερά:100%; 0% (αριστερά:0;0%;) αδιαφάνεια ) .slides ul li div ( background-color:#000000; border-radius:10px 10px 10px; box-shadow:0 0 5px #FFFFFF inset; color:#FFFFFF; μέγεθος γραμματοσειράς:26px; αριστερά:10%; περιθώριο: 0 αυτόματο; padding:20px; θέση:απόλυτη; κορυφή:50%; πλάτος: 200 px; /* Animation css3 */ -webkit-animation-name: anim_titles; -webkit-animation-διάρκεια: 24,0 δευτ. -webkit-animation-timing-function:linear; -webkit-animation-itation-count: infinite; -webkit-animation-direction: normal; -webkit-animation-delay: 0; -webkit-animation-play-state: running; -webkit-animation-fill-mode: προς τα εμπρός. -moz-animation-name: anim_titles; -moz-animation-διάρκεια: 24. 0s; -moz-animation-timing-function: linear; -moz-animation-itation-count: infinite; -moz-animation-direction: normal; -moz-animation-delay: 0; -moz-animation-play-state: running; -moz-animation-fill-mode: προς τα εμπρός; )

4 Νοεμβρίου 2019 Η καταχώρηση έχει ενημερωθεί

Γιούρι Νέμετς

Ρυθμιστικά ενεργοποιημένα καθαρό CSS+ ρυθμιστικό μπόνους

Τα ρυθμιστικά CSS έχουν ορισμένα πλεονεκτήματα σε σχέση με τα ρυθμιστικά Javascript. Ένα τέτοιο πλεονέκτημα είναι η ταχύτητα λήψης. Οι εικόνες για ρυθμιστικά δεν χρησιμοποιούνται μόνο σε μεγάλα μεγέθη (αν δεν υπάρχει βελτιστοποίηση για διαφορετικές οθόνες), χρειάζεται επίσης λίγος χρόνος για τη φόρτωση σεναρίων. Αλλά στο άρθρο θα δείτε μόνο καθαρά ρυθμιστικά CSS.

Δείτε τι βρήκα σε έναν ιστότοπο σχετικά με τα ρυθμιστικά:

1. Ρυθμιστικό εικόνας CSS3

Ένα ρυθμιστικό CSS που χρησιμοποιεί κουμπιά επιλογής για την πλοήγηση στις διαφάνειες. Αυτά τα κουμπιά επιλογής βρίσκονται κάτω από τα ρυθμιστικά. Επίσης, εκτός από τα κουμπιά επιλογής, η πλοήγηση πραγματοποιείται χρησιμοποιώντας τα βέλη αριστερά και δεξιά. Για να παρακολουθείτε ποια εικόνα θα εμφανίζεται τώρα, χρησιμοποιούνται οι :checked ψευδοκλάσεις.

2. Ρυθμιστικό εικόνας CSS3 με μικρογραφίες

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

3. Γκαλερί CSS

Αλλά αυτό το ρυθμιστικό CSS είναι τέλειο για την πώληση σελίδων. Κατά κανόνα, κατά την ανάπτυξη σελίδων προορισμού (σελίδες πώλησης), πολλοί προγραμματιστές ιστού τοποθετούν ένα ρυθμιστικό στην αρχή, έτσι ώστε στην πρώτη οθόνη (χωρίς κύλιση), ο επισκέπτης να μπορεί να δει αμέσως όλα τα οφέλη που έχει αυτή η σελίδα για αυτόν. Πάνω απ 'όλα, αυτό το ρυθμιστικό έχει απόκριση, κάτι που είναι επίσης ωραίο.

4. Ρυθμιστικό CSS χωρίς συνδέσμους

Θέλω απλώς να σημειώσω ότι αυτό το ρυθμιστικό δεν χρησιμοποιεί συνδέσμους! Από προεπιλογή, εκτός από την κύρια εικόνα (διαφάνεια), είναι ορατές άλλες 2 διαφάνειες. Βρίσκονται πίσω από τον κεντρικό. Η αλλαγή των διαφανειών πραγματοποιείται σε μια όμορφη λειτουργία: πρώτα, δύο διαφάνειες απομακρύνονται και η διαφάνεια γίνεται στο κέντρο, η οποία στη συνέχεια θα γίνει η κύρια. Στη συνέχεια, η διαφάνεια μεγεθύνεται και τοποθετείται μπροστά από τις άλλες.

5. CSS3 Responsive Slider

Ένα άλλο προσαρμοστικό ρυθμιστικό που βασίζεται σε κουμπιά επιλογής. Για να δείτε πώς θα φαίνεται αυτό το ρυθμιστικό διαφορετικές συσκευές ah - Μπορείτε είτε να αλλάξετε μόνοι σας το παράθυρο του προγράμματος περιήγησης είτε στη σελίδα με το ρυθμιστικό υπάρχουν ειδικά εικονίδια για διαφορετικές συσκευές, κάνοντας κλικ στα οποία, θα δείτε την εμφάνιση του ρυθμιστικού σε υπολογιστή, tablet ή smartphone.

*** SLIDER BONUS ***

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

συμπέρασμα

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

Στοιχεία που καλύπτονται στο άρθρο.

Ο χρόνος δεν σταματά και μαζί του και η πρόοδος. Αυτό επηρέασε και το Διαδίκτυο. Μπορείτε ήδη να δείτε την αλλαγή εμφάνισητοποθεσίες, ιδιαίτερα δημοφιλείς προσαρμοστικός σχεδιασμός. Και ως αποτέλεσμα, πολλά νέα responsive jqueryρυθμιστικά, γκαλερί, καρουζέλ ή παρόμοια πρόσθετα.
1. Ρυθμιστικό Responsive Horizontal Posts

Οριζόντιο καρουζέλ με απόκριση με αναλυτική οδηγίαμε εγκατάσταση. Είναι φτιαγμένο σε απλό στυλ, αλλά μπορείτε να το διαμορφώσετε μόνοι σας.

2. Ρυθμιστικό στο Glide.js

Αυτό το ρυθμιστικό είναι κατάλληλο για κάθε τοποθεσία. Αυτό χρησιμοποιεί το Glide.js with ανοιχτή πηγή. Τα χρώματα του ρυθμιστικού μπορούν εύκολα να αλλάξουν.

3. Παρουσίαση με κλίση περιεχομένου

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

4. Ρυθμιστικό με χρήση καμβά HTML5

Πολύ όμορφο και εντυπωσιακό ρυθμιστικό με διαδραστικά σωματίδια. Φτιαγμένο με καμβά HTML5

5. Ρυθμιστικό μορφοποίησης εικόνας

Ρυθμιστικό με εφέ μορφοποίησης (Ομαλή μετατροπή από το ένα αντικείμενο στο άλλο). ΣΕ αυτό το παράδειγματο ρυθμιστικό είναι κατάλληλο για το χαρτοφυλάκιο ενός προγραμματιστή ιστού ή ενός web studio με τη μορφή χαρτοφυλακίου.

6. Κυκλικό ρυθμιστικό

Ρυθμιστικό σε μορφή κύκλου με εφέ αναστροφής της εικόνας.

7. Θολό ρυθμιστικό φόντου

Αποκριτικό ρυθμιστικό με εναλλαγή και θάμπωμα φόντου.

8. Αποκριτικό ρυθμιστικό μόδας

Απλό, ελαφρύ και ανταποκρινόμενο ρυθμιστικό ιστότοπου.

9. Slicebox - slider εικόνας jQuery 3D(ΕΠΙΚΑΙΡΟΠΟΙΗΜΕΝΟ)

Ενημερωμένη έκδοση του ρυθμιστικού Slicebox με διορθώσεις και νέες δυνατότητες.

10.Δωρεάν κινούμενο πλέγμα απόκρισης εικόνας

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

11.Ρυθμιστικό Flex

Καθολική δωρεάν προσθήκη για τον ιστότοπό σας. Αυτό το πρόσθετο διατίθεται σε πολλαπλές επιλογές ρυθμιστικού και καρουζέλ.

12. Κορνίζα φωτογραφιών

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

ΥΣΤΕΡΟΓΡΑΦΟ.Έβαλα το ρυθμιστικό αρκετές φορές και νομίζω ότι είναι από τα καλύτερα

13. Δωρεάν και αποκριτικό ρυθμιστικό 3D Thumbnail Gallery.

Πειραματική συλλογή slider 3DPanelLayoutμε πλέγμα και ενδιαφέροντα εφέ κινουμένων σχεδίων.

14. Ρυθμιστικό στο css3

Αποκριτικό ρυθμιστικό κατασκευασμένο με χρήση css3 με ομαλή εμφάνιση περιεχομένου και ελαφριά κινούμενη εικόνα.

15. WOW Slider

WOW Sliderείναι ένα ρυθμιστικό εικόνας με εκπληκτικά οπτικά εφέ.

17.Ελαστικό

Ελαστικό ρυθμιστικό με πλήρη απόκριση και μικρογραφίες διαφανειών.

18. Σχισμός

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

19. Responsive photo gallery plus

Απλός δωρεάν ρυθμιστικό-γκαλερί με ανέβασμα εικόνων.

20. Αποκριτικό ρυθμιστικό για WordPress

Αποκριτικό δωρεάν ρυθμιστικό για WP.

21. Ρυθμιστικό περιεχομένου Parallax

Ρυθμιστικό με εφέ παράλλαξης και έλεγχος κάθε στοιχείου με CSS3.

22. Ρυθμιστικό με δέσιμο μουσικής

Ρυθμιστικό χρησιμοποιώντας JPlayer ανοιχτού κώδικα. Αυτό το ρυθμιστικό μοιάζει με παρουσίαση με μουσική.

23. Ρυθμιστικό με jmpress.js

Το αποκριτικό ρυθμιστικό βασίζεται στο jmpress.js και επομένως θα επιτρέψει την εφαρμογή μερικών ενδιαφέροντων τρισδιάστατων εφέ στις διαφάνειες.

24. Fast Hover Slideshow

παρουσίαση διαφανειών με γρήγορη εναλλαγήδιαφάνειες. Διακόπτης slides σε λειτουργία αιώρησης.

25. Ακορντεόν εικόνας με CSS3

Ακορντεόν εικόνας με css3.

26. Προσθήκη βελτιστοποιημένης συλλογής με άγγιγμα

Αυτό προσαρμοστική γκαλερίτο οποίο είναι βελτιστοποιημένο για συσκευές αφής.

27. Γκαλερί 3D

3D Wall Gallery- δημιουργήθηκε για το πρόγραμμα περιήγησης Safari, όπου θα είναι ορατό το 3D εφέ. Όταν προβάλλεται σε διαφορετικό πρόγραμμα περιήγησης, η λειτουργικότητα θα είναι καλή, αλλά το εφέ 3D δεν θα είναι ορατό.

28. Ρυθμιστικό με σελιδοποίηση

Αποκριτικό ρυθμιστικό σελιδοποίησης με ρυθμιστικό jQuery UI. Η ιδέα είναι να χρησιμοποιήσετε μια απλή ιδέα πλοήγησης. Είναι δυνατή η επαναφορά όλων των εικόνων ή η εναλλαγή μεταξύ διαφανειών.

29.Μοντάζ εικόνας με jQuery

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

30. Γκαλερί 3D

Ένα απλό τρισδιάστατο κυκλικό ρυθμιστικό σε css3 και jQuery.

31. ΛΕΙΤΟΥΡΓΙΑ ΠΛΗΡΟΥΣ ΟΘΟΝΗΣμε εφέ 3D σε css3 και jQuery

Ρυθμιστικό με δυνατότητα προβολής εικόνων πλήρους οθόνης με όμορφη μετάβαση.

1. Πρόσθετο jQuery Fresco

Η αποκριτική συλλογή jquery (αλλάζει το μέγεθος όταν αλλάζει η ανάλυση της οθόνης) εμφανίζεται σε ένα αναδυόμενο παράθυρο με μικρογραφίες και λεζάντες εικόνων. Η γκαλερί jquery fresco λειτουργεί σωστά στα περισσότερα προγράμματα περιήγησης, όπως: IE6+, Firefox 3+, Chrome 5+, Opera 9+. Η δωρεάν έκδοση αυτής της προσθήκης μπορεί να χρησιμοποιηθεί μόνο σε μη εμπορικά έργα.

2. Ρυθμιστικό "Adaptor".

Ρυθμιστικό με διάφορα εφέ μετάβασης (7 διαφορετικά εφέ, συμπεριλαμβανομένου του 3D). Έργο στο Github.

3. Πρόσθετο Slider με διαφορετικά εφέ "jQ-Tiles"

Πρόσθετο με διάφορα εφέ μετάβασης, με ρυθμιζόμενη ταχύτητα ολίσθησης, με λειτουργία αυτόματης κύλισης.

4. Πρόσθετο jQuery "Sly"

Προσθήκη για την εφαρμογή κάθετου και οριζόντιου κύλισης. Έργο στο Github.

5. Κινούμενο μενού Makisu CSS3

6. Απλή παρουσίαση

7. Λειτουργικό ρυθμιστικό jQuery "iView Slider v2.0"

Ρυθμιστικό περιεχομένου / slideshow (όχι μόνο εικόνες, αλλά και βίντεο κλιπ και άλλα μπορούν να χρησιμοποιηθούν ως διαφάνεια περιεχόμενο HTML). Για πλοήγηση, μπορείτε να χρησιμοποιήσετε: μικρογραφίες, κουμπιά Αριστερά / Δεξιά και χρησιμοποιώντας το πληκτρολόγιο. Έργο στο Github.com.

8. Ένα σύνολο πρόσθετων jQuery "Vanity"

Υπάρχουν 7 πρόσθετα στο σετ: jSlider, jTabs, jPaginate, jSpotlight, jTip, jPlaceholder και jCollapse. Ένα σύνολο από αυτές τις λύσεις θα σας βοηθήσει να εφαρμόσετε ρυθμιστικά, συμβουλές εργαλείων, καρτέλες, αναδυόμενα παράθυρα εικόνων και πολλά άλλα.

9. Τοποθετήστε το εφέ CSS3

10. Αναπτυσσόμενο μενού CSS3

11.iOSlider

Ένα ρυθμιστικό σχεδιασμένο για να λειτουργεί σε κινητές συσκευές.

12. Ένδειξη φόρτωσης CSS3

13. Εφέ αιώρησης CSS3

14. Πρόσθετο jQuery "Product Colorizer".

Η προσθήκη είναι μια ελαφριά λύση για την προβολή προϊόντων σε διαφορετικά χρώματα (σχετική, για παράδειγμα, για ηλεκτρονικά καταστήματα ρούχων, για να επιτρέψετε στους επισκέπτες να επιλέξουν χρωματικό σχέδιοπροϊόν από πολλές επιλογές). Το πρόσθετο απαιτεί μόνο δύο εικόνες για κάθε προϊόν (όλα τα χρώματα θα υπερτεθούν ως μάσκα). Το πρόσθετο λειτουργεί σε όλα τα μεγάλα προγράμματα περιήγησης, συμπεριλαμβανομένου του IE7+ (θα λειτουργήσει και στο IE6 εάν διορθώσετε την οθόνη διαφάνεια PNG). Έργο στο GitHub.

15. Κινούμενα γραφήματα CSS3

16. Δημιουργία εφέ επικάλυψης όταν κάνετε κλικ στην εικόνα

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

17. Πλοήγηση στη σελίδα με τη μορφή αναπτυσσόμενου μενού

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

18. Γκαλερί CSS3 με εφέ hover

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

19. jQuery Parallax Slider

20. CSS3 κινούμενα σχέδια αιωρούνται σε μπλοκ

21. CSS3 jQuery αναδυόμενο παράθυρο

Κάντε κλικ στο βέλος στο κάτω μέρος της οθόνης στη σελίδα επίδειξης για να δείτε τα αναδυόμενα εικονίδια.

22. Δωρεάν συλλογή εικόνων HTML5 "Juicebox Lite"

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

23. Πρόσθετο "JQVMap"

24. CSS3 Parallax Slider

25. Συλλογή φωτογραφιών jQuery με μικρογραφίες

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

26. Πρόσθετο ρυθμιστικού περιεχομένου jQuery "Horinaja"

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

27. Πρόσθετο slider jQuery Pikachoose

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

28. Ορισμένα προσαρμοσμένα στυλ CSS για αναπτυσσόμενα

Πέντε διαφορετικά στυλ αναπτυσσόμενων λιστών που χρησιμοποιούν διαφορετικό CSSτεχνικός.

29. Μενού εστιατορίου με κινούμενο 3D εφέ

Ενδιαφέρουσα CSS jQuery παρουσίαση πληροφοριών στη σελίδα. Κάνοντας κλικ στον σύνδεσμο, ανοίγει το μενού φυλλαδίου και ο επισκέπτης μπορεί να διαβάσει περισσότερα για τα πιάτα που παρέχονται στο αναδυόμενο παράθυρο. Η κινούμενη εικόνα δεν εμφανίζεται σωστά στον IE.

30. Πρόσθετο Elastislide

Υλοποίηση ελαστικού προσαρμοζόμενου καρουζέλ (κάθετο και οριζόντιο καρουζέλ εικόνων) και γκαλερί εικόνων. Όταν το παράθυρο του προγράμματος περιήγησης μειώνεται, ο αριθμός των εικόνων μειώνεται σε ένα ορισμένο ελάχιστη τιμήκαι στη συνέχεια κλιμακώνεται το μέγεθος των υπόλοιπων εικόνων. Έργο στο Github.

31. Φρέσκο ​​ρυθμιστικό σχισμής CSS3 jQuery

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

32. Νέα έκδοση του ρυθμιστικού 3D εικόνας "Slicebox"

Μια νέα έκδοσηΜε τις αλλαγές που έγιναν και την προσθήκη νέων λειτουργιών: τώρα το ρυθμιστικό 3D έχει γίνει κλιμακωτό, μπορείτε να το δείτε όταν μειώσετε το παράθυρο του προγράμματος περιήγησης. Προστέθηκε υποστήριξη για Firefox. στην περιγραφή της διαφάνειας, μπορείτε ήδη να χρησιμοποιήσετε περιεχόμενο HTML (προηγουμένως, η περιγραφή είχε αφαιρεθεί από το χαρακτηριστικό link χωρίς δυνατότητα χρήσης Ετικέτες HTML). Στη σελίδα επίδειξης, μπορείτε να δείτε 4 επιλογές για τη χρήση της προσθήκης. τελευταία έκδοσηζει στο Github.com.

Το εφέ μοιάζει πολύ με το 3D CU3ER Flash Gallery (demo , λήψη), μόνο αυτό το 3D ρυθμιστικό δεν είναι κατασκευασμένο με λάμψητεχνολογίες, αλλά με τη βοήθεια javascript.

33.jQuery Plugin "PFold"

Πειραματική λύση. Το πρόσθετο υλοποιεί ένα τρισδιάστατο εφέ με απομίμηση μιας νότας που ξεδιπλώνεται. Διάφορες εκδόσεις: με τρία spreads, με δύο spreads και ένα spread με το επόμενο κεντράρισμα της διευρυμένης νότας.

34.jQuery Plugin "Windy"

Ένα πρόσθετο για πλοήγηση σε περιεχόμενο, όπως εικόνες. Κατά την κύλιση στις φωτογραφίες, σκορπίζονται σε διαφορετικές κατευθύνσεις (το εφέ θυμίζει κάπως τη διανομή των φύλλων στο παιχνίδι με κάρτες πόκερ). Για πλοήγηση, μπορείτε να χρησιμοποιήσετε τα αριστερά / δεξιά κουμπιά ή το ρυθμιστικό (δείτε τη σελίδα επίδειξης για διαφορετικές επιλογές). Έργο σε

Εργασία σε ένα βιβλίο για jQuery, συνάντησα το γεγονός ότι πολλοί από τους συνδρομητές μου μου ζήτησαν να πω σε αυτό πώς να γράψω ένα σενάριο slider στο jquery. Συγγνώμη, αγαπητοί φίλοι! Στην αυλή του XXI αιώνα και, ευτυχώς, έχουμε πρόσβαση σε όλες τις απολαύσεις του CSS3, επιτρέποντάς μας να υλοποιούμε τέτοια πράγματα χωρίς ούτε μια γραμμή javascript.

Μέρος 1.

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

Φυσικά, μπορεί να ρωτήσετε: γιατί να εφεύρουμε ξανά τον τροχό όταν υπάρχουν πολλές υλοποιήσεις ρυθμιστικών στο javascript; Εδώ είναι τα επιχειρήματά μου:

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

Έτσι, για το παράδειγμά μας, χρειάζεστε τέσσερις εικόνες, αν και στο έργο σας μπορείτε να φτιάξετε μια λωρίδα με όσες εικόνες χρειάζεστε. Η μόνη προϋπόθεση είναι όλες οι εικόνες να έχουν το ίδιο μέγεθος. Επίσης, ξέχασα να σας πω ότι το ρυθμιστικό μας θα είναι προσαρμοστικό (ναι, ναι, Προσαρμοστική διάταξη , σωστά διαβάσατε) και μπορείτε να το χρησιμοποιήσετε σε οποιοδήποτε από τα έργα σας για οποιαδήποτε συσκευή. Αλλά, αρκετή φλυαρία, τα χέρια μου έχουν ήδη φαγούρα για να γράψω μέγα-κώδικα. Ας ξεκινήσουμε με HTML:

Άφησα το χαρακτηριστικό alt κενό για εξοικονόμηση χώρου, αλλά μπορείτε να το συμπληρώσετε μόνοι σας με βάση τα αιτήματά σας SEO και να ενημερώσετε τους χρήστες που έχουν απενεργοποιήσει τις εικόνες στο πρόγραμμα περιήγησης. Θέλω επίσης να επιστήσω την προσοχή σας στο γεγονός ότι η πρώτη εικόνα ( alladin.jpg) θα υπάρχει επίσης στο τέλος της ταινίας, το οποίο θα επιτρέψει στο ρυθμιστικό μας να κάνει κυκλική κύλιση χωρίς τραντάγματα.

Για ευκολία, το πλάτος είναι το 80% του παραθύρου και το μέγιστο πλάτος είναι το μέγεθος κάθε μεμονωμένης φωτογραφίας (1000 px στο παράδειγμά μας), επειδή δεν θέλουμε να τεντωθεί η εικόνα:

Ρυθμιστικό (πλάτος: 80%, μέγιστο πλάτος: 1000 εικονοστοιχεία; )

Στον κώδικα CSS μας, το πλάτος του σχήματος εκφράζεται ως ποσοστό του div στο οποίο βρίσκεται. Δηλαδή, εάν η λωρίδα εικόνας περιέχει πέντε φωτογραφίες και το div αποδίδει μόνο μία, το πλάτος του σχήματος αυξάνεται πέντε φορές, που είναι το 500% του πλάτους του κοντέινερ div:

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

Πρέπει να χωρίσουμε τις φωτογραφίες εξίσου στη γραμμή εικόνας. Ο τύπος είναι πολύ απλός: αν υποθέσουμε ότι το σχήμα έχει πλάτος 100%, κάθε εικόνα θα πρέπει να καταλαμβάνει το 1/5 του οριζόντιου χώρου:

Υπάρχει ανάγκη να χρησιμοποιήσετε τον ακόλουθο κανόνα CSS:

Imagestrip img (πλάτος: 20%, ύψος: αυτόματη; )

Τώρα ας αλλάξουμε ιδιότητα υπερχείλισηςγια div:

Ρυθμιστικό (πλάτος: 80%, μέγ. πλάτος: 1000 εικονοστοιχεία, υπερχείλιση: κρυφό)

Τέλος, πρέπει να κάνουμε τη λωρίδα εικόνας να μετακινηθεί από αριστερά προς τα δεξιά. Εάν το πλάτος του div του κοντέινερ είναι 100%, κάθε κίνηση της λωρίδας εικόνας προς τα αριστερά θα μετρηθεί ως ποσοστό αυτής της απόστασης:

@keyframes slidey ( 20% ( αριστερά: 0%; ) 25% ( αριστερά: -100%; ) 45% ( αριστερά: -100%; ) 50% ( αριστερά: -200%; ) 70% ( αριστερά: -200%; ) 75% ( αριστερά: -300%; ) 75% ( αριστερά: -300% ; 3:0% ( αριστερά: -300%; ) 4 00%;))

Κάθε εικόνα στο ρυθμιστικό θα τυλίγεται σε ένα div και θα μετακινείται κατά 5%.

Ρυθμιστικό σχήμα (θέση: σχετική, πλάτος: 500%, κινούμενη εικόνα: 30s slidy infinite, μέγεθος γραμματοσειράς: 0, padding: 0, περιθώριο: 0, αριστερά: 0; )

Μέρος 2ο.

Κάναμε ένα mega-cool ρυθμιστικό χωρίς javascript. Και ας, πριν πάμε να ξεκουραστούμε, να του προσθέσουμε κουμπιά ελέγχου. Πιο συγκεκριμένα, όχι σε αυτό (είμαι ήδη πολύ τεμπέλης για να το ανακατέψω), αλλά ας δημιουργήσουμε ένα νέο.

Άρα ο κώδικας HTML μας είναι:

Τώρα ας φροντίσουμε για το animation των διαφανειών μας. Δυστυχώς, για διαφορετικό αριθμό διαφανειών, θα είναι διαφορετικό:

/* για ένα ρυθμιστικό δύο διαφανειών */ @keyframes slider__item-autoplay_count_2 ( 0%(αδιαφάνεια:0;) 20%(αδιαφάνεια:1;) 50%(αδιαφάνεια:1;) 70%(αδιαφάνεια:0;) 100%(αδιαφάνεια:0;) 100%(αδιαφάνεια:0/s-lider:0;) _item-autoplay_count_3 ( 0%(αδιαφάνεια:0; ) 10%(αδιαφάνεια:1;) 33% (αδιαφάνεια:1;) 43% (αδιαφάνεια:0;) 100%(αδιαφάνεια:0;) ) /* για ένα ρυθμιστικό τεσσάρων διαφανειών */ @der_play_)0:opacity-0; 8% (αδιαφάνεια:1;) 25% (αδιαφάνεια:1;) 33% (αδιαφάνεια:0;) 100% (αδιαφάνεια:0;) ) /* για ένα ρυθμιστικό πέντε διαφανειών */ @keyframes slider__item-autoplay_count_5 ( 0%(αδιαφάνεια;2%:0% (0%(opacity:0;) (αδιαφάνεια:0;) 100%(αδιαφάνεια:0;) )

Λυπηρό, έτσι δεν είναι; Επιπλέον, μην ξεχνάτε ότι για Opera, Chrome, IE και Mozilla, πρέπει να γράψετε τα πάντα ίδια, αλλά με το κατάλληλο πρόθεμα. Τώρα ας γράψουμε τον κώδικα για να κάνουμε κίνηση στις διαφάνειές μας (στο εξής, θα εμφανίζεται ο κώδικας για τρεις διαφάνειες. Μπορείτε να δείτε τον κώδικα για περισσότερες τοποθεσίες στο παράδειγμα κώδικα):

Slider_count_3 .item ( -moz-animation: slider__item-autoplay_count_3 15s infinite; -webkit-animation: slider__item-autoplay_count_3 15s infinite; -o-animation: slider__item: count_3-auto1; autoplay_count_3 15s infinite; ) .item:nth-of-type(2) ( -moz-animation-delay:5s; -webkit-animation-delay:5s; -o-animation-delay:5s; animation-delay:5s; ) .item:nth-of-type:

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

Slider:hover .item ( -moz-animation-play-state: σε παύση; -webkit-animation-play-state: σε παύση; -o-animation-play-state: σε παύση; animation-play-state: σε παύση; )

Τελικά, πρέπει να αλλάξουμε τις διαφάνειές μας. Ως γνωστόν υπάρχει ολόκληρη γραμμήσυμβάντα που σας επιτρέπουν να αλλάξετε τις ιδιότητες ενός στοιχείου όταν Βοήθεια CSS. Για ένα κλικ του ποντικιού, μπορούμε να χρησιμοποιήσουμε τις :focus , :target , ή :checked ψευδοκλάσεις σε ένα από τα στοιχεία της σελίδας. Η ψευδοκλάση :focus μπορεί να έχει μόνο ένα στοιχείο ανά σελίδα, το :target μολύνει το ιστορικό του προγράμματος περιήγησης και απαιτεί την ετικέτα. το :checked pseudo-class θυμάται την κατάσταση πριν φύγει από τη σελίδα και, στην περίπτωση των κουμπιών επιλογής, μπορεί να επιλεγεί μόνο σε ένα στοιχείο της ομάδας. Ας το χρησιμοποιήσουμε αυτό. Εισαγάγετε πριν