2022'de Öğeler Nasıl Çerçevelenir (En İyi Uygulamalar)

Yayınlanan: 2022-08-23

Bu makale, modern web tasarımında hareketli seçim çerçevesi öğeleri yapmanın en iyi yollarını tartışacaktır.

Seçim çerçevesi, otomatik olarak yatay olarak kayan sonsuz bir metin ve/veya görsel öğe (görüntüler gibi) bölümüdür.

Resmi HTML <marquee> öğesinin amortismana tabi tutulmasına ve kullanılması kesinlikle önerilmemesine rağmen, bir web sayfasını renklendirmek için kullanılan sürekli öğelerin kaydırmanın genel etkisi canlı ve iyi durumda ve birçok popüler web sitesinde görünecek.

Bazıları, kullanılmasından vazgeçilmesine rağmen (tekrar) tüm tarayıcılar tarafından hala desteklenen Seçim Çerçevesi öğesini kullanmaya devam ediyor. Örneğin, HTML kayan yazıyla oluşturulmuş klasik zıplayan DVD "ekran koruyucu" burada.

Bu akıllıca değil, ama yine de işe yarıyor. 2022'de bu öğeyi kullanmaktan kaçınmanın nedenleri açıktır:

Gerçekten erişilebilir değil
%100 amortismana tabi tutulmuştur ve desteği kaldırılabilir (ve muhtemelen bir noktada kaldırılacaktır)
Başlangıçta hiçbir zaman gerçek bir HTML öğesi olmadı (herhangi bir standardın parçası değil)

HTML Seçim Çerçevesi amortismana tabi tutulur - kullanmayın. — Bu öğeyi neden kullanmamanız gerektiğine ilişkin MDN belgelerinin açıklaması

Ancak, biz her zaman İzotropik'te seçim çerçevesi hayranı olduk.

Popüler Awwwards web sitelerinin çoğuna bir göz atın ve aşağıdaki gibi yatay hareket eden metin, resim veya bunların bir kombinasyonunu göreceksiniz:

Bu Bir Demo Çerçevesidir

Elbette, görev açısından kritik bilgileri kayan veya hareketli bölümlere koymak asla iyi bir fikir değildir . Ancak yukarıdaki örnek gibi bir şey için harika görünüyor, siteyi farklılaştırıyor ve unutulmaz kılıyor. Akıllıca ve ölçülü kullanın.

Çerçeveler o kadar harika ki, CSS kutu gölgelerini kullanarak otomatik olarak kayan metnin bir "ticker" stili bölümünü oluşturacak yararlı bir araç bile yayınladık. Harika, ancak bu makalede tartışılan yaklaşımın daha da iyi olduğunu düşünüyorum.

Bu seçim çerçevesi demosunu yapmak için gereken kod, Ryan Mulligan'ın 2022'de seçim çerçevesi efekti oluşturmanın (muhtemelen) en iyi yolu olan bu CodePen'den alınmıştır. Ayrıca bu kod hakkında blogunda yazıyor, https://ryanmulligan.dev/ blog/css-marquee.

Erişilebilirdir (tercih edilen azaltılmış hareketi destekler), sonsuzdur, her tür html öğesine izin verir ve hafiftir ve uygulanması kolaydır.

Ayrıca %100 CSS ile yapılmıştır ve JS içermez.

 <div class="marquee">
  <div class="marquee__group">
    <img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHxMd2fHx8f8fHx8fHx8f&'
    <img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHJhbmRvbXx8fHx8fHx8fHx8fHx0&'
    <img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx1&NT&QX8fHk08>
    <img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHxMd2fHx0x8fHx8fHx8&lt&'
    <img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fH80ix.1&'
  </div>

  <div aria-hidden="true" class="marquee__group">
    <img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHxMd2fHx8f8fHx8fHx8f&'
    <img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHJhbmRvbXx8fHx8fHx8fHx8fHx0&'
    <img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx1&NT&QX8fHk08>
    <img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHxMd2fHx0x8fHx8fHx8&lt&'
    <img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fH80ix.1&'
  </div>
</div>

<div class="marquee marquee--borders">
  <div class="marquee__group">
    <p>Unsplash Köpekleri</p>
    <p aria-hidden="true">Unsplash'ın Köpekleri</p>
    <p aria-hidden="true">Unsplash'ın Köpekleri</p>
  </div>

  <div aria-hidden="true" class="marquee__group">
    <p>Unsplash Köpekleri</p>
    <p>Unsplash Köpekleri</p>
    <p>Unsplash Köpekleri</p>
  </div>
</div>

<div class="marquee seçim çerçevesi--ters">
  <div class="marquee__group">
    <img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx1&'
    <img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHJhbmRvbXx8fHx8fHx&x8fHx8fHx>'
    <img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx0x8fHx8fHx0x2.1>'
    <img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx1&'
    <img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx&Mq&Mq8fHx1&MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx'
  </div>

  <div aria-hidden="true" class="marquee__group">
    <img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx1&'
    <img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHJhbmRvbXx8fHx8fHx&x8fHx8fHx>'
    <img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx0x8fHx8fHx0x2.1>'
    <img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx1&'
    <img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx&Mq&Mq8fHx1&MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx'
  </div>
</div>

 @import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap");

* {
  kutu boyutlandırma: kenarlık kutusu;
}

gövde {
  min-yükseklik: 100vh;
}

gövde {
  --boşluk: 2rem;

  ekran: ızgara;
  hizalama içeriği: merkez;
  taşma: gizli;
  boşluk: var(--space);
  genişlik: %100;
  yazı tipi ailesi: "Corben", sistem-ui, sans-serif;
  yazı tipi boyutu: 1.5rem;
  satır yüksekliği: 1.5;
}

.marquee {
  --süre: 60s;
  --gap: var(--space);

  ekran: esnek;
  taşma: gizli;
  kullanıcı seçimi: yok;
  boşluk: var(--boşluk);
  dönüştürme: çarpık(-3 derece);
}

.marquee__group {
  flex-shrink: 0;
  ekran: esnek;
  hizalama öğeleri: merkez;
  justify-content: boşluk-etrafında;
  boşluk: var(--boşluk);
  minimum genişlik: %100;
  animasyon: kaydırma var(--duration) lineer sonsuz;
}

@media (azaltılmış hareketi tercih eder: azalt) {
  .marquee__group {
    animasyon oynatma durumu: duraklatıldı;
  }
}

.marquee__group img {
  maksimum genişlik: kelepçe (10rem, 1rem + 28vmin, 20rem);
  en-boy oranı: 1;
  nesne-uyum: kapak;
  sınır yarıçapı: 1rem;
}

.marquee__group p {
  arka plan görüntüsü: doğrusal gradyan(
    75 derece,
    hsl(240deg %70 %49) %0,
    hsl(253deg %70 %49) %11,
    hsl(267deg %70 %49) %22,
    hsl(280deg %71 %48) %33,
    hsl(293deg %71 %48) %44,
    hsl(307deg %71 %48) %56,
    hsl(320deg %71 %48) %67,
    hsl(333deg %72 %48) %78,
    hsl(347deg %72 %48) %89,
    hsl(0 derece %73 %47) %100
  );
  -webkit-arka plan-klip: metin;
  -webkit-metin-dolgu rengi: şeffaf;
}

.marquee--kenarlıklar {
  border-block: 3px katı dodgerblue;
  dolgu bloğu: 0.75rem;
}

.marquee--ters .marquee__group {
  animasyon yönü: ters;
  animasyon gecikmesi: calc(var(--duration) / -2);
}

@keyframes kaydırma {
  %0 {
    dönüştürmek: çevirX(0);
  }

  100% {
    transform: translateX(calc(-100% - var(--gap)));
  }
}

Bunun nasıl yaratıldığına ve neden bu kadar harika olduğuna bir göz atalım.

İşte tüm koda bakmadan önce bir genel bakış:

Kaydırma efektinin hızını ve yönünü kolayca kontrol edebiliriz. Hız için ayarladık ve yön için bir .marquee--reverse sınıfı kullanıyoruz.
Modülerdir - içeriği .marquee ve iç içeriği .marquee__group ile bir .marquee__group istediğiniz kadar gruba sahip olabilirsiniz.
Boyutlandırma, CSS değişkenleri ve kelepçe kullandığından duyarlı ve akıcıdır.
CSS'nin azaltılmış hareketi tercih etmesi durumunda, aria etiketleri kullanılarak ve duraklatılarak erişilebilir.
Hareket, ana kareleri kullanan standart bir CSS animasyonudur (böylece isterseniz fareyle üzerine gelindiğinde duraklayabilirsiniz). Hiç JS yok.
Aynı zamanda oldukça kopyala/yapıştır. İçeriğinizi değiştirin, HTML ve CSS'yi uygulayın ve harika bir küçük seçim çerçevesine sahip olacaksınız.

Gerçekten iyi yapılmış ve (imo) 2022'de bir seçim çerçevesi efektinin uygulanmasının standart yolu olmalıdır.

İşte HTML:

<div class="marquee"> <div class="marquee__group"> <img src='https://images.unsplash.com/photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZJhbxfvxDE&ixid=MnwzMjM4NDZJhbxfvxDZDZ8hbxfxfix -1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8hbxfvk&ixid=MnwzMjM4NDZ8hbxfvk&tdZ8hbxfx0x .1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1586917383423-c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfvx2.1& =80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1560743173-567a3b5658b1?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvxbX&NTHJhbmRvxbX&NTHJhbmRv8.1 =400' alt=''> <img src='https://images.unsplash.com/photo-1603232644140-bb47da511b92?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx 8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''> </div> <div aria-hidden="true" class="marquee__group"> <img src='https://images.unsplash.com /photo-1548199973-03cce0bbc87b?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib&un=rb-1https://sp&ixlib&un=r80https://s.g&ixlib&' -1583511666445-775f1f2116f5?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3MzQ&ixlib&un=rb3MzQ&ixlib&un=r80-169 -c25e88ac05ce?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q'1='b31.2.1&q'='w31s/sp://rc/sp's.g.sp'. ?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ3NzU&ixlib=rb-1.2.1&q=80&w=400' alt='s =ent ropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt='-marque-class="-marque-div> </div> </div> : 100s"> <div class="marquee__group"> <p>Unsplash Köpekleri</p> <p aria-hidden="true">Unsplash Köpekleri</p> <p aria-hidden="true" >Unsplash Köpekleri</p> </div> <div aria-hidden="true" class="marquee__group"> <p>Unsplash Köpekleri</p> <p>Unsplash Köpekleri</p> <p>Unsplash Köpekleri</p> </div> </div> <div class="marquee marquee--reverse"> <div class="marquee__group"> <img src='https://images. unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE'sp='g&q4MDE'sp='g&qrb80&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE' com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDQ4MDE&cs='g2.1=MnwzMjM4NDZ8MHwxfHx8fHx8fDE2NTk0MDQ4MDE&cs='g2.1=' s.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk&ixlibQ4MDE's&q0MDQ4MDE2NTk0MDQ4MDE' unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyM80.'s='g&rc=unsp'sp'. com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXx8fHx8fHx8fDE2NTk0MDUyMTM-1&hidlib=ue> "marquee__group"> <img src='https://images.unsplash.com/photo-1546421845-6471bdcf3edf?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvxbXx&' alt '> <img src='https://images.unsplash.com/photo-1518378188025-22bd89516ee2?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfHJhbmRvbXHx8fHf8 0MDQ4MDE&ixlib=rb-1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1571772805064-207c8435df79?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=Mnwz8MN rb-1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1602067340370-bdcebe8d1930?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZJ8MHwxDE 1.2.1&q=80&w=400' alt=''> <img src='https://images.unsplash.com/photo-1508948956644-0017e845d797?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=MnwzMjM4NDZ8MHwxfvxH2NTZ8MHwxfvxH8 1&q=80&w=400' alt=''> </div> </div>

Demoda üç seçim çerçevesi görebiliriz. Birinci ve üçüncü, .marquee--reverse sınıfıyla tersine çevrilir. Standart bir hızları vardır ve görüntüler içerirler.

İkincisi (ortadaki) tamamen metindir ve özel bir sınıfla sınırlar uygular. Ayrıca stil özniteliği tarafından belirlenen daha yavaş bir süreye sahiptir: .

Ayrıca, .marquee div içinde, bir aria etiketi dışında aynı olan, esasen yinelenenler olduğunu fark edeceksiniz.

Bu, animasyonu kusursuz bir şekilde sonsuz hale getirirken, aynı zamanda farklı görüntü alanı oranlarına uyum sağlayabilmek içindir (CSS'ye baktığımızda bu konuda daha fazlası).

Bu, yinelenen içeriği erişilebilirlik ağacından kaldıran aria-hidden="true" ile erişilebilir hale getirilir.

Ayrıca, görüntüler doğrudan Unsplash'tan sunulur. Bu kaynağı ilginç bulabilirsiniz: URL'ye Göre Rastgele Görüntüler Nasıl Oluşturulur (Web Dev)

Sonuç olarak, zarif, basit bir HTML yapısıdır.

Şimdi CSS'ye bakalım

Ve işte CSS (doğrudan CodePen'den alınmıştır):

@import url("https://fonts.googleapis.com/css2?family=Corben:wght@700&display=swap"); * { kutu boyutlandırma: kenarlık kutusu; } gövde { min-yükseklik: 100vh; } .demo_marquee-wrap { --demo-marquee_space: 2rem; ekran: ızgara; hizalama içeriği: merkez; taşma: gizli; boşluk: var(--demo-marquee_space); genişlik: %100; yazı tipi ailesi: "Corben", sistem-ui, sans-serif; yazı tipi boyutu: 1.5rem; satır yüksekliği: 1.5; } .marquee { --demo-marquee_duration: 60s; --demo-marquee_gap: var(--demo-marquee_space); ekran: esnek; taşma: gizli; kullanıcı seçimi: yok; boşluk: var(--demo-marquee_gap); dönüştürme: çarpık(-3 derece); } .marquee__group { flex-shrink: 0; ekran: esnek; hizalama öğeleri: merkez; justify-content: boşluk-etrafında; boşluk: var(--demo-marquee_gap); minimum genişlik: %100; animasyon: scroll var(--demo-marquee_duration) lineer sonsuz; } @media (azaltılmış hareketi tercih eder: azalt) { .marquee__group { animasyon-oynatma durumu: duraklatıldı; } } .marquee__group img { maksimum genişlik: kelepçe(10rem, 1rem + 28vmin, 20rem); en-boy oranı: 1; nesne-uyum: kapak; sınır yarıçapı: 1rem; } .marquee__group p { color:#29303e; } .marquee--borders { border-block: 3px solid #29303e; dolgu bloğu: 0.75rem; } .marquee--reverse .marquee__group { animasyon yönü: ters; animasyon gecikmesi: calc(var(--demo-marquee_duration) / -2); } @keyframes scroll { 0% { transform: translateX(0); } %100 { transform: translateX(calc(-100% - var(--demo-marquee_gap))); } }

Aşağıdakileri görebiliriz:

Her şey REM, değişkenler ve kelepçe kullanıyor, yani efekt akışkan ve ekran boyutuna ve tarayıcı ayarlarına tepki verecek.
Animasyon %100 CSS'dir. Bu, .marquee__group içindeki " animation: scroll var(--duration) linear infinite; " satırı ile uygulanır. Animasyon sonsuz, doğrusal ve adlandırılmış kaydırmadır. Kök süresi, HTML işaretlemesindeki (yukarıda bahsedilen) belirli bir grubun hızını kontrol etmek için üzerine yazılabilen --duration değişkeni tarafından kontrol edilir.
Kaydırma, X'i çeviren temel bir dönüşümdür.
Animasyonu tersine çevirmek için, .marquee--reverse .marquee__group sınıfında sadece " animation-direction: reverse; ' var.
Boşlukların çoğu için calc ve --gap kullanıyoruz. Bu, işleri akıcı hale getirir ve Gap'i ihtiyaçlarınıza göre değiştirebilirsiniz.
Onu çapraz yapan ve %100 yatay hale getirmek için kaldırılabilen bir çarpıklık (%3) etkisi vardır.
Azaltılmış hareket tercih edilirse hareket etmeyeceğinden erişilebilir ve sorumludur: azaltma ayarlıdır (bunu nasıl test edeceğinizi buradan öğrenin).

Temel olarak, her şeyi gerçekten iyi yapar ve 2022'de kayan seçim çerçevesi benzeri bir efekt uygulamanın en iyi yoludur.

Uygulamak için, HTML'yi sayfanıza eklemeniz, metin/görüntüleri değiştirmeniz ve CSS'yi global stillerinize eklemeniz yeterlidir.

Değişkenlerle oynayabilirsiniz, ancak gerçekçi olarak bu oldukça tak ve çalıştır... değiştirmeniz gereken pek bir şey yok!