CSS Sonsuz ve Dairesel Dönen Görüntü Kaydırıcısı

Görüntü kaydırıcıları (karuseller olarak da adlandırılır) her yerdedir. Var ortak kaydırıcıyı oluşturmak için birçok CSS numarası resimlerin soldan sağa (veya tersi) kaydığı yer. Bu aynı anlaşma oradaki birçok JavaScript kitaplığı karmaşık animasyonlarla süslü kaydırıcılar oluşturan. Bu yazıda bunların hiçbirini yapmayacağız.

Küçük bir dizi makale aracılığıyla, bazı süslü ve alışılmadık yalnızca CSS kaydırıcılarını keşfedeceğiz. Aynı eski klasik kaydırıcıları görmekten bıktıysanız, o zaman doğru yerdesiniz!

Bu ilk makale için, "dairesel dönen görüntü kaydırıcısı" dediğim bir şeyle başlayacağız:

Harika değil mi? kodu inceleyelim!

HTML işaretlemesi

Eğer benim serimi takip ettiyseniz fantezi görüntü süslemeleri or CSS ızgarası ve özel şekiller, o zaman ilk kuralımın mümkün olan en küçük HTML ile çalışmak olduğunu bilirsiniz. Kodumu çok şeyle karıştırmadan önce her zaman CSS çözümleri bulmak için çok uğraşırım.

s ve diğer şeyler.

Aynı kural burada da geçerlidir — kodumuz bir kapsayıcıdaki görüntülerin bir listesinden başka bir şey değildir.

Diyelim ki dört resim üzerinde çalışıyoruz:

Bu kadar! Şimdi kodun ilginç kısmına geçelim. Ama önce, kaydırıcımızın nasıl çalıştığının mantığını anlamak için buna dalacağız.

Nasıl Çalışır?

İşte kaldırdığım bir video overflow: hidden görüntülerin nasıl hareket ettiğini daha iyi anlayabilmemiz için CSS'den:

Sanki dört resmimiz saat yönünün tersine dönen büyük bir daireye yerleştirilmiş gibi.

Tüm resimler aynı boyuta sahiptir ( ile gösterilir) S Şekilde). Tüm görüntülerin merkeziyle kesişen ve bir yarıçapa sahip olan mavi daireye dikkat edin (R). Bu değere daha sonra animasyonumuz için ihtiyacımız olacak. R eşittir 0.707 * S. (Bize bu denklemi veren geometriyi atlayacağım.)

Biraz CSS yazalım!

Kullanacağız CSS Izgarası tüm görüntüleri aynı alana üst üste yerleştirmek için:

.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;
}

Şimdiye kadar çok karmaşık bir şey yok. Zor kısım animasyon.

Büyük bir daireyi döndürmekten bahsetmiştik ama gerçekte, dönen büyük bir daire yanılsaması yaratarak her bir görüntüyü ayrı ayrı döndüreceğiz. Şimdi bir animasyon tanımlayalım, m, ve bunu görüntü öğelerine uygulayın:

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

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

Ana numara, vurgulanan çizgiye dayanır. Varsayılan olarak, CSS transform-origin mülk eşittir center (Ya da 50% 50%) bu da görüntünün merkezi etrafında dönmesini sağlar, ancak bunu yapmak için ona ihtiyacımız yok. Görüntünün merkezin etrafında dönmesine ihtiyacımız var. büyük daire resimlerimizi içeren bu nedenle yeni değer transform-origin.

R eşit olduğundan 0.707 * S, söyleyebiliriz R eşittir 70.7% görüntü boyutu. İşte nasıl elde ettiğimizi gösteren bir şekil 120.7% değeri:

Animasyonu çalıştıralım ve ne olacağını görelim:

Biliyorum biliyorum. Sonuç istediğimizden çok uzak ama gerçekte çok yakınız. Orada tek bir resim varmış gibi görünebilir, ancak tüm resimleri üst üste koyduğumuzu unutmayın. Hepsi aynı anda dönüyor ve sadece üstteki görüntü görünüyor. İhtiyacımız olan, bu çakışmayı önlemek için her görüntünün animasyonunu geciktirmek.

.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 */

İşler zaten daha iyiye gidiyor!

Taşmayı kapsayıcıda gizlersek zaten bir kaydırıcı görebiliriz, ancak animasyonu biraz güncelleyeceğiz, böylece her görüntü hareket etmeden önce kısa bir süre görünür kalacaktır.

Tam da bunu yapmak için animasyon ana karelerimizi güncelleyeceğiz:

@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); }
}

Her biri için 90deg (360deg/4, Burada 4 resim sayısıdır) küçük bir duraklama ekleyeceğiz. Her görüntü şu süre boyunca görünür durumda kalacaktır: 5% Bir sonrakine geçmeden önce toplam sürenin (27%-22%, 52%-47%, vb.). güncellemek için gidiyorum animation-timing-function kullanılarak cubic-bezier() animasyonu biraz daha meraklı hale getirme işlevi:

Şimdi kaydırıcımız mükemmel! Neredeyse mükemmel çünkü son dokunuşu hala kaçırıyoruz: resimlerimizin etrafında dönen renkli dairesel kenarlık. üzerinde bir sözde öğe kullanabiliriz. .gallery Bunu yapmak için sarıcı:

.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);
}

ile bir daire oluşturdum. yinelenen konik gradyan kullanırken arka plan için maskeleme hilesi bu sadece yastıklı alanı gösterir. Sonra resimler için tanımladığımız animasyonun aynısını ona uyguluyorum.

İşimiz bitti! Harika bir dairesel kaydırıcımız var:

Daha fazla resim ekleyelim

Dört görüntü ile çalışmak iyidir, ancak bunu herhangi bir sayıda görüntüye ölçeklendirebilirsek daha iyi olur. Sonuçta, bu bir görüntü kaydırıcısının amacıdır. değerlendirebilmeliyiz N görüntüler.

Bunun için Sass'ı tanıtarak kodu daha genel hale getireceğiz. İlk olarak, görüntü sayısı için bir değişken tanımlıyoruz ($n) ve resim sayısını sabit olarak kodladığımız her bölümü güncelleyeceğiz (4).

Gecikmelerden başlayalım:

.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 */

Gecikmenin formülü şudur: (1 - $i)*duration/$n, bu bize aşağıdaki Sass döngüsünü verir:

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

Gerçekten istiyorsak süreyi de bir değişken yapabiliriz. Ama animasyona geçelim:

@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); }
}

Deseni daha iyi görebilmek için sadeleştirelim:

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

Her durum arasındaki adım şuna eşittir: 25% - hangisi 100%/4 - ve bir ekliyoruz -90deg açı - hangisi -360deg/4. Bu, döngümüzü bunun yerine şöyle yazabileceğimiz anlamına gelir:

@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); }
}

Her görüntü aldığından 5% animasyonda şunu değiştiriyoruz:

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

…Bununla:

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

Bu unutulmamalıdır 5% bu örnek için seçtiğim isteğe bağlı bir değerdir. Ayrıca, her görüntünün ne kadar süre görünür kalması gerektiğini kontrol etmek için bir değişken yapabiliriz. Basitlik adına bunu atlayacağım, ancak ev ödevi için, bunu yapmayı deneyebilir ve uygulamanızı yorumlarda paylaşabilirsiniz!

@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); }
}

Son bit güncellemektir transform-origin. Bazı geometri hilelerine ihtiyacımız olacak. Görüntü sayısı ne olursa olsun, yapılandırma her zaman aynıdır. Resimlerimizi (küçük daireler) büyük bir çemberin içine yerleştirdik ve yarıçapın değerini bulmamız gerekiyor, R.

Muhtemelen sıkıcı bir geometri açıklaması istemezsiniz, bu yüzden nasıl bulacağımız aşağıda açıklanmıştır. R:

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

Bunu yüzde olarak ifade edersek, bu bize şunu verir:

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

…bunun anlamı transform-origin değer şuna eşittir:

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

Yapılmıştı! Herhangi bir sayıda görüntüyle çalışan bir kaydırıcımız var!

Oraya dokuz resim atalım:

İstediğiniz kadar resim ekleyin ve güncelleyin. $n toplam görüntü sayısına göre değişir.

Tamamlayan

CSS dönüşümlerini ve standart geometriyi kullanan birkaç numarayla, çok fazla kod gerektirmeyen hoş bir dairesel kaydırıcı oluşturduk. Bu kaydırıcının harika yanı, bir dairemiz olduğu için sonsuz animasyonu korumak için görüntüleri çoğaltmakla uğraşmamıza gerek olmamasıdır. Tam bir dönüşten sonra ilk resme geri döneceğiz!