CSS Άπειρο και κυκλικό περιστρεφόμενο ρυθμιστικό εικόνας

Τα ρυθμιστικά εικόνας (ονομάζονται επίσης καρουζέλ) υπάρχουν παντού. Υπάρχουν πολλά κόλπα CSS για να δημιουργήσετε το κοινό ρυθμιστικό όπου οι εικόνες ολισθαίνουν από αριστερά προς τα δεξιά (ή το αντίθετο). Είναι η ίδια συμφωνία τις πολλές βιβλιοθήκες JavaScript εκεί έξω που δημιουργούν φανταχτερά ρυθμιστικά με πολύπλοκα κινούμενα σχέδια. Δεν πρόκειται να κάνουμε τίποτα από αυτά σε αυτήν την ανάρτηση.

Μέσα από μια μικρή σειρά άρθρων, θα εξερευνήσουμε μερικά φανταχτερά και ασυνήθιστα ρυθμιστικά μόνο για CSS. Εάν έχετε κουραστεί να βλέπετε τα ίδια κλασικά ρυθμιστικά, τότε είστε στο σωστό μέρος!

Για αυτό το πρώτο άρθρο, θα ξεκινήσουμε με κάτι που αποκαλώ «κυκλικό περιστρεφόμενο ρυθμιστικό εικόνας»:

Cool σωστά; ας αναλύσουμε τον κώδικα!

Η σήμανση HTML

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

s και άλλα πράγματα.

Ο ίδιος κανόνας ισχύει και εδώ — ο κώδικάς μας δεν είναι παρά μια λίστα εικόνων σε ένα κοντέινερ.

Ας υποθέσουμε ότι εργαζόμαστε με τέσσερις εικόνες:

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

Πώς λειτουργεί;

Εδώ είναι ένα βίντεο όπου αφαιρώ overflow: hidden από το CSS, ώστε να κατανοήσουμε καλύτερα πώς κινούνται οι εικόνες:

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

Όλες οι εικόνες έχουν το ίδιο μέγεθος (σημειώνεται με S στο σχήμα). Σημειώστε τον μπλε κύκλο που είναι ο κύκλος που τέμνεται με το κέντρο όλων των εικόνων και έχει ακτίνα (R). Θα χρειαστούμε αυτήν την τιμή αργότερα για την κινούμενη εικόνα μας. R είναι ίσο με 0.707 * S. (Θα παρακάμψω τη γεωμετρία που μας δίνει αυτή την εξίσωση.)

Ας γράψουμε λίγο CSS!

Θα χρησιμοποιούμε Πλέγμα CSS για να τοποθετήσετε όλες τις εικόνες στην ίδια περιοχή η μία πάνω από την άλλη:

.gallery  {
  --s: 280px; /* control the size */

  display: grid;
  width: var(--s);
  aspect-ratio: 1;
  padding: calc(var(--s) / 20); /* we will see the utility of this later */
  border-radius: 50%;
}
.gallery > img {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}

Τίποτα πολύ περίπλοκο μέχρι στιγμής. Το δύσκολο κομμάτι είναι το animation.

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

.gallery > img {
  /* same as before */
  animation: m 8s infinite linear;
  transform-origin: 50% 120.7%;
}

@keyframes m {
  100% { transform: rotate(-360deg); }
}

Το κύριο κόλπο βασίζεται σε αυτήν την επισημασμένη γραμμή. Από προεπιλογή, το CSS transform-origin ιδιοκτησία ισούται με center (Ή 50% 50%) που κάνει την εικόνα να περιστρέφεται γύρω από το κέντρο της, αλλά δεν τη χρειαζόμαστε για να το κάνουμε αυτό. Χρειαζόμαστε την εικόνα να περιστρέφεται γύρω από το κέντρο του μεγάλο κύκλο που περιέχει τις εικόνες μας, εξ ου και η νέα τιμή για transform-origin.

Αφού το R ισούται με 0.707 * S, μπορούμε να το πούμε αυτό R είναι ίσο με 70.7% του μεγέθους της εικόνας. Εδώ είναι ένα σχήμα για να δείξουμε πώς το πήραμε 120.7% αξία:

Ας τρέξουμε το κινούμενο σχέδιο και ας δούμε τι συμβαίνει:

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

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

Τα πράγματα ήδη βελτιώνονται!

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

Θα ενημερώσουμε τα βασικά καρέ κινούμενων εικόνων για να κάνουμε ακριβώς αυτό:

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% { transform: rotate(-360deg); }
}

Για καθένα 90deg (360deg/4, Όπου 4 είναι ο αριθμός των εικόνων) θα προσθέσουμε μια μικρή παύση. Κάθε εικόνα θα παραμείνει ορατή για 5% της συνολικής διάρκειας πριν περάσουμε στην επόμενη (27%-22%, 52%-47%, και τα λοιπά.). Πάω να ενημερώσω το animation-timing-function χρησιμοποιώντας ένα cubic-bezier() λειτουργία για να κάνετε το animation λίγο πιο φανταχτερό:

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

.gallery {
  padding: calc(var(--s) / 20); /* the padding is needed here */
  position: relative;
}
.gallery::after {
  content: "";
  position: absolute;
  inset: 0;
  padding: inherit; /* Inherits the same padding */
  border-radius: 50%;
  background: repeating-conic-gradient(#789048 0 30deg, #DFBA69 0 60deg);
  mask: 
    linear-gradient(#fff 0 0) content-box, 
    linear-gradient(#fff 0 0);
  mask-composite: exclude;
}
.gallery::after,
.gallery >img {
  animation: m 8s infinite cubic-bezier(.5, -0.2, .5, 1.2);
}

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

Εμεις τελειωσαμε! Έχουμε ένα δροσερό κυκλικό ρυθμιστικό:

Ας προσθέσουμε περισσότερες εικόνες

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

Για αυτό, θα κάνουμε τον κώδικα πιο γενικό, εισάγοντας το Sass. Αρχικά, ορίζουμε μια μεταβλητή για τον αριθμό των εικόνων ($n) και θα ενημερώσουμε κάθε τμήμα όπου έχουμε κωδικοποιήσει τον αριθμό των εικόνων (4).

Ας ξεκινήσουμε με τις καθυστερήσεις:

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

Ο τύπος για την καθυστέρηση είναι (1 - $i)*duration/$n, που μας δίνει τον ακόλουθο βρόχο Sass:

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

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

@keyframes m {
  0%, 3% { transform: rotate(0); }
  22%, 27% { transform: rotate(-90deg); }
  47%, 52% { transform: rotate(-180deg); }
  72%, 77% { transform: rotate(-270deg); }
  98%, 100% {transform: rotate(-360deg); }
}

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

@keyframes m {
  0% { transform: rotate(0); }
  25% { transform: rotate(-90deg); }
  50% { transform: rotate(-180deg); }
  75% { transform: rotate(-270deg); }
  100% { transform: rotate(-360deg); }
}

Το βήμα μεταξύ κάθε κατάστασης είναι ίσο με 25% - το οποίο είναι 100%/4 — και προσθέτουμε α -90deg γωνία — που είναι -360deg/4. Αυτό σημαίνει ότι μπορούμε να γράψουμε τον βρόχο μας ως εξής:

@keyframes m {
  0% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  100% { transform: rotate(-360deg); }
}

Αφού κάθε εικόνα παίρνει 5% του animation, αλλάζουμε αυτό:

#{($i / $n) * 100}%

…με αυτό:

#{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}%

πρέπει να σημειωθεί ότι 5% είναι μια αυθαίρετη τιμή που επιλέγω για αυτό το παράδειγμα. Μπορούμε επίσης να το κάνουμε μεταβλητή για να ελέγξουμε πόσο χρόνο θα πρέπει να παραμένει ορατή κάθε εικόνα. Θα το παραλείψω για λόγους απλότητας, αλλά για την εργασία, μπορείτε να δοκιμάσετε να το κάνετε και να μοιραστείτε την εφαρμογή σας στα σχόλια!

@keyframes m {
  0%,3% { transform: rotate(0); }
  @for $i from 1 to $n {
    #{($i / $n) * 100 - 2}%, #{($i / $n) * 100 + 3}% { transform: rotate(#{($i / $n) * -360}deg); }  
  }
  98%,100% { transform: rotate(-360deg); }
}

Το τελευταίο κομμάτι είναι η ενημέρωση transform-origin. Θα χρειαστούμε μερικά τεχνάσματα γεωμετρίας. Όποιος κι αν είναι ο αριθμός των εικόνων, η διαμόρφωση είναι πάντα η ίδια. Έχουμε τις εικόνες μας (μικρούς κύκλους) τοποθετημένες μέσα σε έναν μεγάλο κύκλο και πρέπει να βρούμε την τιμή της ακτίνας, R.

Πιθανότατα δεν θέλετε μια βαρετή εξήγηση γεωμετρίας, οπότε ορίστε πώς βρίσκουμε R:

R = S / (2 * sin(180deg / N))

Αν το εκφράσουμε ως ποσοστό, αυτό μας δίνει:

R = 100% / (2 * sin(180deg / N)) = 50% / sin(180deg / N)

…που σημαίνει το transform-origin η τιμή είναι ίση με:

transform-origin: 50% (50% / math.sin(180deg / $n) + 50%);

Τελειώσαμε! Έχουμε ένα ρυθμιστικό που λειτουργεί με οποιεσδήποτε εικόνες αριθμού!

Ας ρίξουμε εννέα εικόνες εκεί:

Προσθέστε όσες εικόνες θέλετε και ενημερώστε τις $n μεταβλητή με τον συνολικό αριθμό εικόνων.

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

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