CSS Infinite Slider Flipping μέσω εικόνων Polaroid

Στο τελευταίο άρθρο, φτιάξαμε ένα πολύ όμορφο μικρό ρυθμιστικό (ή «καρουσέλ» αν αυτό προτιμάτε) που περιστρέφεται σε κυκλική κατεύθυνση. Αυτή τη φορά θα φτιάξουμε ένα που θα ξεφυλλίζει μια στοίβα εικόνων Polaroid.

Cool σωστά; Μην κοιτάτε ακόμα τον κώδικα γιατί υπάρχουν πολλά να ξετυλίξετε. Ελάτε μαζί μου, έτσι;

Η βασική ρύθμιση

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

Και αυτό είναι το βασικό CSS που ορίζει τον γονέα μας .gallery δοχείο ως πλέγμα όπου όλες οι εικόνες στοιβάζονται η μία πάνω στην άλλη:

.gallery  {
  display: grid;
  width: 220px; /* controls the size */
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
  border: 10px solid #f2f2f2;
  box-shadow: 0 0 4px #0007;
}

Τίποτα σύνθετο μέχρι στιγμής. Ακόμη και για το στυλ που μοιάζει με Polaroid για τις εικόνες, το μόνο που χρησιμοποιώ είναι μερικές border και box-shadow. Ίσως μπορέσετε να το κάνετε καλύτερα, γι' αυτό μη διστάσετε να παίξετε με αυτά τα διακοσμητικά στυλ! Θα δώσουμε το μεγαλύτερο μέρος της προσοχής μας στο animation, το οποίο είναι το πιο δύσκολο κομμάτι.

Ποιο είναι το κόλπο;

Η λογική αυτού του ρυθμιστικού βασίζεται στη σειρά στοίβαξης των εικόνων — οπότε ναι, θα παίξουμε με z-index. Όλες οι εικόνες ξεκινούν με το ίδιο z-index αξία (2) που λογικά θα κάνει την τελευταία εικόνα στην κορυφή της στοίβας.

Παίρνουμε την τελευταία εικόνα και τη σύρουμε προς τα δεξιά μέχρι να αποκαλύψει την επόμενη εικόνα στη στοίβα. Στη συνέχεια μειώνουμε την εικόνα z-index τιμή και μετά το σύρουμε ξανά στο κατάστρωμα. Και αφού είναι z-index Η τιμή είναι χαμηλότερη από τις υπόλοιπες εικόνες, γίνεται η τελευταία εικόνα στη στοίβα.

Εδώ είναι ένα απογυμνωμένο demo που δείχνει το κόλπο. Τοποθετήστε το δείκτη του ποντικιού στην εικόνα για να ενεργοποιήσετε την κινούμενη εικόνα:

Τώρα, φανταστείτε το ίδιο κόλπο να εφαρμόζεται σε όλες τις εικόνες. Εδώ είναι το μοτίβο εάν χρησιμοποιούμε το :nth-child() ψευδο-επιλογέας για τη διαφοροποίηση των εικόνων:

• Σύρουμε την τελευταία εικόνα (N). Η επόμενη εικόνα είναι ορατή (N - 1).
• Σύρουμε την επόμενη εικόνα (N - 1). Η επόμενη εικόνα είναι ορατή (N - 2)
• Σύρουμε την επόμενη εικόνα (N - 2). Η επόμενη εικόνα είναι ορατή (N - 3)
• (Συνεχίζουμε την ίδια διαδικασία μέχρι να φτάσουμε στην πρώτη εικόνα)
• Σύρουμε την πρώτη εικόνα (1). Η τελευταία εικόνα (N) είναι ξανά ορατό.

Αυτό είναι το άπειρο ρυθμιστικό μας!

Ανατομή του κινούμενου σχεδίου

Αν θυμάστε το προηγούμενο άρθρο, όρισα μόνο ένα κινούμενο σχέδιο και έπαιξα με καθυστερήσεις για να ελέγξω κάθε εικόνα. Το ίδιο θα κάνουμε και εδώ. Ας προσπαθήσουμε πρώτα να οπτικοποιήσουμε το χρονοδιάγραμμα του animation μας. Θα ξεκινήσουμε με τρεις εικόνες και στη συνέχεια θα τις γενικεύσουμε αργότερα για οποιονδήποτε αριθμό (N) εικόνων.

Το animation μας χωρίζεται σε τρία μέρη: "slide to right", "slide to left" και " don't move". Μπορούμε εύκολα να αναγνωρίσουμε την καθυστέρηση μεταξύ κάθε εικόνας. Αν σκεφτούμε ότι η πρώτη εικόνα ξεκινά στο 0s, και η διάρκεια είναι ίση με 6s, τότε το δεύτερο θα ξεκινήσει στις -2s και το τρίτο στο -4s.

.gallery > img:nth-child(2) { animation-delay: -2s; } /* -1 * 6s / 3 */
.gallery > img:nth-child(3) { animation-delay: -4s; } /* -2 * 6s / 3 */

Μπορούμε επίσης να δούμε ότι το μέρος «μην κινείσαι» καταλαμβάνει τα δύο τρίτα του συνόλου του κινούμενου σχεδίου (2*100%/3) ενώ τα μέρη "slide to right" και "slide to left" παίρνουν το ένα τρίτο μαζί — έτσι, το καθένα ισούται με 100%/6 του συνόλου των κινουμένων σχεδίων.

Μπορούμε να γράψουμε τα βασικά καρέ κίνησης ως εξής:

@keyframes slide {
  0%     { transform: translateX(0%); }
  16.67% { transform: translateX(120%); }
  33.34% { transform: translateX(0%); }
  100%   { transform: translateX(0%); } 
}

Ότι 120% είναι μια αυθαίρετη τιμή. Χρειαζόμουν κάτι μεγαλύτερο από 100%. Οι εικόνες πρέπει να γλιστρήσουν προς τα δεξιά μακριά από τις υπόλοιπες εικόνες. Για να γίνει αυτό, πρέπει να κινηθεί τουλάχιστον 100% του μεγέθους του. Γι' αυτό πήγα 120% — για να κερδίσετε λίγο επιπλέον χώρο.

Τώρα πρέπει να εξετάσουμε το z-index. Μην ξεχνάτε ότι πρέπει να ενημερώσουμε την εικόνα z-index αξία μετά γλιστράει προς τα δεξιά του σωρού και πριν το σύρουμε πίσω στο κάτω μέρος του σωρού.

@keyframes slide {
  0%     { transform: translateX(0%);   z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  100%   { transform: translateX(0% );  z-index: 1; }  
}

Αντί να ορίσουμε μια κατάσταση στο 16.67% (100%/6) σημείο στη γραμμή χρόνου, ορίζουμε δύο καταστάσεις σε σχεδόν ίδια σημεία (16.66% και 16.67%) όπου το z-index Η τιμή μειώνεται πριν σύρουμε την εικόνα πίσω στο κατάστρωμα.

Να τι συμβαίνει όταν τα συνδυάζουμε όλα αυτά μαζί:

Χμμμ, το συρόμενο μέρος φαίνεται να λειτουργεί καλά, αλλά η σειρά στοίβαξης είναι ανακατεμένη! Το animation ξεκινάει όμορφα αφού η επάνω εικόνα μετακινείται προς τα πίσω… αλλά οι επόμενες εικόνες δεν ακολουθούν το παράδειγμά τους. Εάν παρατηρήσετε, η δεύτερη εικόνα της ακολουθίας επιστρέφει στην κορυφή της στοίβας πριν αναβοσβήσει η επόμενη εικόνα πάνω της.

Πρέπει να παρακολουθούμε στενά το z-index αλλαγές. Αρχικά, όλες οι εικόνες έχουν είναι z-index: 2. Αυτό σημαίνει ότι η σειρά στοίβαξης πρέπει να πάει…

Our eyes 👀 --> 3rd (2) | 2nd (2) | 1st (2)

Σύρουμε την τρίτη εικόνα και την ενημερώνουμε z-index για να λάβετε αυτήν την παραγγελία:

Our eyes 👀 --> 2nd (2) | 1st (2) | 3rd (1)

Κάνουμε το ίδιο με το δεύτερο:

Our eyes 👀 --> 1st (2) | 3rd (1) | 2nd (1)

…και το πρώτο:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

Αυτό κάνουμε και όλα δείχνουν να είναι καλά. Αλλά στην πραγματικότητα, δεν είναι! Όταν η πρώτη εικόνα μετακινηθεί στο πίσω μέρος, η τρίτη εικόνα θα ξεκινήσει μια άλλη επανάληψη, που σημαίνει ότι επιστρέφει z-index: 2:

Our eyes 👀 --> 3rd (2) | 2nd (1) | 1st (1)

Έτσι, στην πραγματικότητα ποτέ δεν είχαμε όλες τις εικόνες z-index: 2 καθόλου! Όταν οι εικόνες δεν κινούνται (δηλαδή, το μέρος "μην μετακινείτε" του κινούμενου σχεδίου) το z-index is 1. Αν σύρουμε την τρίτη εικόνα και την ενημερώσουμε z-index τιμή από 2 προς την 1, θα παραμείνει στην κορυφή! Όταν όλες οι εικόνες έχουν το ίδιο z-index, το τελευταίο στη σειρά πηγής — η τρίτη μας εικόνα σε αυτήν την περίπτωση — βρίσκεται στην κορυφή της στοίβας. Η ολίσθηση της τρίτης εικόνας έχει ως αποτέλεσμα τα εξής:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

Η τρίτη εικόνα εξακολουθεί να βρίσκεται στην κορυφή και, αμέσως μετά, μετακινούμε τη δεύτερη εικόνα στην κορυφή όταν η κινούμενη εικόνα επανεκκινείται στο z-index: 2:

Our eyes 👀 --> 2nd (2) | 3rd (1) | 1st (1)

Μόλις το σύρουμε, παίρνουμε:

Our eyes 👀 --> 3rd (1) | 2nd (1) | 1st (1)

Στη συνέχεια, η πρώτη εικόνα θα μεταπηδήσει στην κορυφή:

Our eyes 👀 --> 1st(2) | 3rd (1) | 2nd (1)

Εντάξει, χάθηκα. Όλη η λογική είναι λάθος τότε;

Ξέρω, είναι μπερδεμένο. Όμως η λογική μας δεν είναι εντελώς λανθασμένη. Αρκεί να διορθώσουμε λίγο το animation για να λειτουργήσουν όλα όπως θέλουμε. Το κόλπο είναι να επαναφέρετε σωστά το z-index.

Ας πάρουμε την κατάσταση όπου η τρίτη εικόνα βρίσκεται στην κορυφή:

Our eyes 👀 -->  3rd (2) | 2nd (1) | 1st (1)

Είδαμε ότι γλιστρώντας την τρίτη εικόνα και αλλάζοντας την z-index το κρατάει από πάνω. Αυτό που πρέπει να κάνουμε είναι να ενημερώσουμε το z-index της δεύτερης εικόνας. Έτσι, πριν σύρουμε την τρίτη εικόνα μακριά από το κατάστρωμα, ενημερώνουμε την z-index της δεύτερης εικόνας να 2.

Με άλλα λόγια, επαναφέρουμε το z-index της δεύτερης εικόνας πριν τελειώσει η κινούμενη εικόνα.

Το σύμβολο πράσινο συν αντιπροσωπεύει αύξηση z-index προς την 2, και το κόκκινο σύμβολο μείον συσχετίζεται με z-index: 1. Η δεύτερη εικόνα ξεκινά με z-index: 2, στη συνέχεια το ενημερώνουμε σε 1 όταν γλιστρά μακριά από το κατάστρωμα. Αλλά πριν η πρώτη εικόνα γλιστρήσει μακριά από το κατάστρωμα, αλλάζουμε το z-index της δεύτερης εικόνας πίσω στο 2. Αυτό θα διασφαλίσει ότι και οι δύο εικόνες έχουν το ίδιο z-index, αλλά και πάλι, το τρίτο θα παραμείνει στην κορυφή επειδή εμφανίζεται αργότερα στο DOM. Αλλά μετά την τρίτη εικόνα διαφάνειες και της z-index ενημερώνεται, μετακινείται προς τα κάτω.

Αυτό είναι τα δύο τρίτα της κινούμενης εικόνας, οπότε ας ενημερώσουμε τα βασικά καρέ μας ανάλογα:

@keyframes slide {
  0%     { transform: translateX(0%);   z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  66.33% { transform: translateX(0%);   z-index: 1; }
  66.34% { transform: translateX(0%);   z-index: 2; } /* and also here */
  100%   { transform: translateX(0%);   z-index: 2; }  
}

Λίγο καλύτερα, αλλά και πάλι όχι αρκετά εκεί. Υπάρχει ένα άλλο θέμα…

Ω, όχι, αυτό δεν θα τελειώσει ποτέ!

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

Όταν η πρώτη εικόνα βρίσκεται στην κορυφή, έχουμε την εξής κατάσταση:

Our eyes 👀 -->  1st (2) | 3rd (1) | 2nd (1)

Λαμβάνοντας υπόψη την προηγούμενη προσαρμογή που κάναμε, η τρίτη εικόνα θα μεταπηδήσει στο επάνω μέρος πριν από τη διαφάνεια της πρώτης εικόνας. Συμβαίνει μόνο σε αυτήν την περίπτωση επειδή η επόμενη εικόνα που μετακινείται μετά την πρώτη εικόνα είναι η τελευταία εικόνα που έχει υψηλότερη σειρά στο DOM. Οι υπόλοιπες εικόνες είναι καλές γιατί έχουμε N, Τότε N - 1, μετά πάμε από 3 προς την 2, να 2 προς την 1… αλλά μετά πάμε από 1 προς την N.

Για να το αποφύγουμε αυτό, θα χρησιμοποιήσουμε τα ακόλουθα βασικά καρέ για την τελευταία εικόνα:

@keyframes slide-last {
  0%     { transform: translateX(0%);   z-index: 2;}
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } /* we update the z-order here */
  33.34% { transform: translateX(0%);   z-index: 1; }
  83.33% { transform: translateX(0%);   z-index: 1; }
  83.34% { transform: translateX(0%);   z-index: 2; } /* and also here */
  100%   { transform: translateX(0%);   z-index: 2; }
}

Επαναφέρουμε το z-index τιμή 5/6 μέσω της κινούμενης εικόνας (αντί των δύο τρίτων) που είναι όταν η πρώτη εικόνα είναι έξω από το σωρό. Άρα δεν βλέπουμε κανένα άλμα!

TADA! Το άπειρο ρυθμιστικό μας είναι πλέον τέλειο! Εδώ είναι ο τελικός μας κώδικας σε όλο του το μεγαλείο:

.gallery > img {
  animation: slide 6s infinite;
}
.gallery > img:last-child {
  animation-name: slide-last;
}
.gallery > img:nth-child(2) { animation-delay: -2s; } 
.gallery > img:nth-child(3) { animation-delay: -4s; }

@keyframes slide {
  0% { transform: translateX(0%); z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; } 
  33.34% { transform: translateX(0%); z-index: 1; }
  66.33% { transform: translateX(0%); z-index: 1; }
  66.34% { transform: translateX(0%); z-index: 2; } 
  100% { transform: translateX(0%); z-index: 2; }
}
@keyframes slide-last {
  0% { transform: translateX(0%); z-index: 2; }
  16.66% { transform: translateX(120%); z-index: 2; }
  16.67% { transform: translateX(120%); z-index: 1; }
  33.34% { transform: translateX(0%); z-index: 1; }
  83.33% { transform: translateX(0%); z-index: 1; }
  83.34% { transform: translateX(0%); z-index: 2; } 
  100%  { transform: translateX(0%); z-index: 2; }
}

Υποστήριξη οποιουδήποτε αριθμού εικόνων

Τώρα που το animation μας λειτουργεί για τρεις εικόνες, ας το κάνουμε να λειτουργεί για οποιονδήποτε αριθμό (N) εικόνων. Αλλά πρώτα, μπορούμε να βελτιστοποιήσουμε λίγο την εργασία μας διαχωρίζοντας την κινούμενη εικόνα για να αποφύγουμε τον πλεονασμό:

.gallery > img {
  z-index: 2;
  animation: 
    slide 6s infinite,
    z-order 6s infinite steps(1);
}
.gallery > img:last-child {
  animation-name: slide, z-order-last;
}
.gallery > img:nth-child(2) { animation-delay: -2s; } 
.gallery > img:nth-child(3) { animation-delay: -4s; }

@keyframes slide {
  16.67% { transform: translateX(120%); }
  33.33% { transform: translateX(0%); }
}
@keyframes z-order {
  16.67%,
  33.33% { z-index: 1; }
  66.33% { z-index: 2; }
}
@keyframes z-order-last {
  16.67%,
  33.33% { z-index: 1; }
  83.33% { z-index: 2; }
}

Πολύ λιγότερος κωδικός τώρα! Κάνουμε ένα animation για το συρόμενο μέρος και ένα άλλο για το z-index ενημερώσεις. Σημειώστε ότι χρησιμοποιούμε steps(1) σχετικά με την z-index κινουμένων σχεδίων. Αυτό συμβαίνει γιατί θέλω να αλλάξω απότομα το z-index τιμή, σε αντίθεση με το συρόμενο animation όπου θέλουμε ομαλή κίνηση.

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

@for $i from 2 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    animation-delay: calc(#{(1 - $i)/$n}*6s);
  }
}

Αυτό σημαίνει ότι μεταβαίνουμε από το vanilla CSS στο Sass. Στη συνέχεια, πρέπει να φανταστούμε πώς η κλίμακα του χρονοδιαγράμματος με N εικόνες. Ας μην ξεχνάμε ότι το animation γίνεται σε τρεις φάσεις:

Μετά το «slide to right» και το «slide to left», η εικόνα θα πρέπει να παραμείνει τοποθετημένη έως ότου οι υπόλοιπες εικόνες περάσουν από τη σειρά. Επομένως, το μέρος "μην κινείστε" πρέπει να διαρκέσει τον ίδιο χρόνο όπως (N - 1) ως "slide to right" και "slide to left". Και μέσα σε μια επανάληψη, N οι εικόνες θα γλιστρήσουν. Έτσι, το "slide to right" και το "slide to left" παίρνουν και τα δύο 100%/N του συνολικού χρονοδιαγράμματος κινουμένων σχεδίων. Η εικόνα γλιστρά μακριά από το σωρό στο (100%/N)/2 και γλιστράει πίσω στο 100%/N .

Μπορούμε να το αλλάξουμε αυτό:

@keyframes slide {
  16.67% { transform: translateX(120%); }
  33.33% { transform: translateX(0%); }
}

…σ 'αυτό:

@keyframes slide {
  #{50/$n}%  { transform: translateX(120%); }
  #{100/$n}% { transform: translateX(0%); }
}

Αν αντικαταστήσουμε N με 3, παίρνουμε 16.67% και 33.33% όταν υπάρχουν 3 εικόνες στη στοίβα. Είναι η ίδια λογική με τη σειρά στοίβαξης όπου θα έχουμε αυτό:

@keyframes z-order {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  66.33% { z-index: 2; }
}

Πρέπει ακόμα να ενημερώσουμε το 66.33% σημείο. Εκεί υποτίθεται ότι επαναφέρει η εικόνα z-index πριν το τέλος του animation. Την ίδια στιγμή, η επόμενη εικόνα αρχίζει να ολισθαίνει. Αφού το συρόμενο μέρος παίρνει 100%/N, η επαναφορά θα πρέπει να γίνει στις 100% - 100%/N:

@keyframes z-order {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  #{100 - 100/$n}% { z-index: 2; }
}

Αλλά για μας z-order-last κινούμενα σχέδια για να λειτουργήσει, θα πρέπει να συμβεί λίγο αργότερα στη σειρά. Θυμάστε την επιδιόρθωση που κάναμε για την τελευταία εικόνα; Επαναφορά του z-index Η τιμή πρέπει να εμφανίζεται όταν η πρώτη εικόνα είναι έξω από το σωρό και όχι όταν αρχίζει να γλιστράει. Μπορούμε να χρησιμοποιήσουμε τον ίδιο συλλογισμό εδώ στα βασικά καρέ μας:

@keyframes z-order-last {
  #{50/$n}%,
  #{100/$n}% { z-index: 1; }
  #{100 - 50/$n}% { z-index: 2; }
}

Εμεις τελειωσαμε! Δείτε τι παίρνουμε όταν χρησιμοποιούμε πέντε εικόνες:

Μπορούμε να προσθέσουμε μια πινελιά περιστροφής για να κάνουμε τα πράγματα λίγο πιο όμορφα:

Το μόνο που έκανα είναι να προσαρτήσω rotate(var(--r)) στο transform ιδιοκτησία. Μέσα στον βρόχο, --r ορίζεται με τυχαία γωνία:

@for $i from 1 to ($n + 1) {
  .gallery > img:nth-child(#{$i}) {
    --r: #{(-20 + random(40))*1deg}; /* a random angle between -20deg and 20deg */
  }
}

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

Ολοκληρώνοντας

Ολα αυτά z-index Η δουλειά ήταν μια μεγάλη εξισορροπητική πράξη, σωστά; Εάν δεν ήσασταν σίγουροι πώς λειτουργεί η σειρά στοίβαξης πριν από αυτήν την άσκηση, τότε μάλλον έχετε μια πολύ καλύτερη ιδέα τώρα! Εάν δυσκολεύεστε να ακολουθήσετε μερικές από τις εξηγήσεις, σας συνιστώ να διαβάσετε ξανά το άρθρο και χαρτογραφήστε τα πράγματα με μολύβι και χαρτί. Προσπαθήστε να απεικονίσετε κάθε βήμα της κινούμενης εικόνας χρησιμοποιώντας διαφορετικό αριθμό εικόνων για να κατανοήσετε καλύτερα το κόλπο.

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

Την επόμενη φορά, θα φτιάξουμε τρισδιάστατα ρυθμιστικά. Μείνετε συντονισμένοι!