Η ιδέα εδώ είναι να δημιουργήσετε την εμφάνιση μιας παρουσίασης χωρίς το καρουζέλ. Με άλλα λόγια, φτιάχνουμε μια σειρά εικόνων από το αριστερό προς τα δεξιά και επαναλαμβάνουμε μόλις φτάσει το τέλος των εικόνων. Το κόλπο είναι ότι χρησιμοποιούμε μία εικόνα φόντου με κινούμενες εικόνες CSS για να […]
Η ιδέα εδώ είναι να δημιουργήσετε την εμφάνιση μιας παρουσίασης χωρίς το καρουζέλ. Με άλλα λόγια, φτιάχνουμε μια σειρά εικόνων από το αριστερό προς τα δεξιά και επαναλαμβάνουμε μόλις φτάσει το τέλος των εικόνων.
Το κόλπο είναι ότι χρησιμοποιούμε μία εικόνα φόντου με κινούμενες εικόνες CSS για να την μετακινήσουμε στην οθόνη και να την επαναλάβουμε όταν τελειώσει. Αυτό δημιουργεί την ψευδαίσθηση μιας γκαλερί εικόνων όταν πραγματικά χρησιμοποιούμε μία μόνο εικόνα.
Ρύθμιση του HTML
Ακολουθεί ένα προσχέδιο για το πώς πρέπει να δομηθεί το HTML μας:
Υπάρχουν δύο στοιχεία με τα οποία εργαζόμαστε: το ένα που καλούμε .container
που ταιριάζει στο ακριβές πλάτος της θύρας προβολής και ένα άλλο που καλούμε .sliding-background
που βρίσκεται πίσω από το .container
και ξεχειλίζει. Στην ουσία, χρησιμοποιούμε το " .container
μάσκα" για να αποκρύψουμε το πλήρες πλάτος του .sliding-background
καθώς κυλάει στην οθόνη.
Αυτό σημαίνει ότι πρέπει να δημιουργήσουμε μόνο δύο στοιχεία στη σήμανση HTML:
Θέση των στοιχείων
Ας προχωρήσουμε και προσθέστε κάποιο CSS που θα τοποθετήσει σωστά τα δύο στοιχεία μας.
.container ( overflow: hidden; ) .sliding-background ( height: 500px; width: 5076px; )
Μας .container
χρήσεις του overflow
ακινήτου που θα κρύψει κάτι που είναι οπτικά περιέχονται έξω από αυτό. Σκεφτείτε το σαν μια καλλιέργεια σε μια φωτογραφία. Μπορεί να υπάρχουν επιπλέον πράγματα έξω από το δοχείο, αλλά το κοντέινερ μας εμποδίζει να το δούμε.
Εκεί .sliding-background
μπαίνει το παιχνίδι μας. Έχει οριστεί σε ένα γελοίο πλάτος που θα υπερέβαινε τα περισσότερα σημεία προβολής. Και αυτό είναι το τέχνασμα: πρέπει να είναι κάτι που θα ξεχειλίζει από το δοχείο. Σε αυτήν την περίπτωση, χρησιμοποιούμε ένα κάπως αυθαίρετα επιλεγμένο 5076px
πλάτος που θα πρέπει να ξεχειλίζει από τα περισσότερα σημεία προβολής του προγράμματος περιήγησης.
Δημιουργία εικόνας φόντου
Χρειαζόμαστε μια εικόνα εάν δημιουργούμε την ψευδαίσθηση μιας γκαλερί παρουσίασης διαφανειών, σωστά; Αυτή είναι η επόμενη επιχειρηματική μας σειρά.
Θυμάστε πώς αναφέραμε ότι το κάπως αυθαίρετα επιλεγμένο 5076px
πλάτος για το συρόμενο φόντο; Λοιπόν, είναι αυθαίρετο, αλλά σκόπιμο με την έννοια ότι διαιρείται ωραία από το 3, το οποίο ταιριάζει στο χρονοδιάγραμμα για ένα βρόχο διάρκειας ενός λεπτού, το οποίο θα εμφανιστεί λίγο αργότερα. Αυτό σημαίνει ότι ο καμβάς για την εικόνα φόντου μας είναι 5076 / 3
ή 1692px
. Στο τέλος, το φόντο μας θα επαναληφθεί συνολικά τρεις φορές σε ένα λεπτό σε έναν άπειρο βρόχο. Μαθηματικά για τη νίκη!
Το 500px
ύψος είναι πραγματικά αυθαίρετο. Αυτό μπορεί να είναι ό, τι θέλετε και αρκεί να είναι και το πραγματικό μέγεθος του αρχείου εικόνας φόντου.
Το αρχείο Photoshop που χρησιμοποιήθηκε για τη δημιουργία της εικόνας φόντου για την επίδειξη στην αρχή αυτού του κεφαλαίου είναι διαθέσιμο για λήψη αν ψάχνετε για ένα σημείο εκκίνησης.
Μόλις η εικόνα αποθηκευτεί (και βελτιστοποιηθεί!), Αυτό θα χρησιμοποιήσουμε ως εικόνα φόντου στο CSS:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 500px; width: 5076px; /* The image width times 3 */ )
Μεγάλος! Αυτό μας δίνει την τεράστια εικόνα που ξεχειλίζει από το κοντέινερ και τώρα μπορεί να χρησιμοποιηθεί για κύλιση σε όλη την οθόνη και το άπειρο.
Ζωτικότητα του φόντου
Εντάξει, ας κάνουμε αυτό το πράγμα να κινηθεί. Θέλουμε να πάει από αριστερά προς τα δεξιά σε έναν βρόχο που επαναλαμβάνεται ξανά και ξανά για να δημιουργήσει ένα απρόσκοπτο εφέ που η εικόνα συνεχίζεται για πάντα.
Αρχικά, ας καθορίσουμε το animation CSS:
@keyframes .slide ( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); /* The image width */ ) )
Χρησιμοποιούμε την transform
ιδιότητα για να τοποθετήσουμε την αριστερή εικόνα στο αριστερό άκρο του κοντέινερ κατά την έναρξη της κινούμενης εικόνας, όπως:
Μόλις ολοκληρωθεί η κινούμενη εικόνα, θα έχει αλλάξει αρνητικά τη θέση (από αριστερά προς δεξιά) κατά ποσό που ταιριάζει με το ακριβές πλάτος της εικόνας μας. Και, δεδομένου ότι το .sliding-background
πλάτος είναι τριπλάσιο της πραγματικής εικόνας, η εικόνα επαναλαμβάνεται τρεις φορές μεταξύ 0% και 100% πριν από την επανάληψη της βρόχου.
Σημείωση: ο λόγος για τον οποίο χρησιμοποιούμε ένα πρόσθετο
καθόλου, αντί να κινείται background-position
στο κύριο
, είναι έτσι ώστε να μπορούμε να χρησιμοποιήσουμε ένα κινούμενο σχέδιο transform
για να κάνουμε την κίνηση, η οποία είναι πολύ πιο καλή.
Εντάξει, ας ολοκληρώσουμε κάνοντας slide
κινούμενα σχέδια στην .sliding-background
τάξη:
.sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; )
Η animation
ιδιότητα δίνει εντολή .sliding-background
να χρησιμοποιήσει το slide
κινούμενο σχέδιο και να το εκτελέσει για ένα λεπτό κάθε φορά σε ένα γραμμικό, άπειρο βρόχο.
Βάζοντας τα όλα μαζί
.container ( overflow: hidden; ) .sliding-background ( background: url("… path/to/image") repeat-x; height: 560px; width: 5076px; animation: slide 60s linear infinite; ) @keyframes slide( 0%( transform: translate3d(0, 0, 0); ) 100%( transform: translate3d(-1692px, 0, 0); ) )