Άπειρη εικόνα φόντου κύλισης - CSS-Κόλπα

Anonim

Η ιδέα εδώ είναι να δημιουργήσετε την εμφάνιση μιας παρουσίασης χωρίς το καρουζέλ. Με άλλα λόγια, φτιάχνουμε μια σειρά εικόνων από το αριστερό προς τα δεξιά και επαναλαμβάνουμε μόλις φτάσει το τέλος των εικόνων. Το κόλπο είναι ότι χρησιμοποιούμε μία εικόνα φόντου με κινούμενες εικόνες 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); ) )