Hareketli Altyazılı Duyarlı Resim Galerisi

Görüntüleri duyarlı bir şekilde yeniden boyutlandırmak yaygın bir ihtiyaçtır ve modern CSS, tutarlı bir görüntü sağlamak için araçlar sağlar. aspect-ratio görüntüleri bozmadan. Ve ızgara, bir galeri düzeni için bize esneklik sağlar ve aynı zamanda birden çok öğeyi paylaşılan bir alanda konumlandırır.

Bu duyarlı galeri tekniği şunları kullanmayı araştırır:

• object-fit duyarlı görüntü ölçekleme için
• aspect-ratio tutarlı görüntü boyutları için
• Mutlak konumlandırmayı değiştirmek için bir CSS Izgara numarası
• Animasyonlu efektler için CSS dönüşümleri
• dokunmatik cihazlar için taşıma
• azaltılmış harekete saygı

İşte ilk HTML’miz, bir ul nerede her biri li içerir figure görüntü ile ve figcaption:

<ul class="gallery" role="list">
<li>
<figure>
<img alt="" src="https://www.cssdersleri.com/wp-content/uploads/2022/06/Hareketli-Altyazili-Duyarli-Resim-Galerisi.jpeg" />
<figcaption>Candy canes ice cream</figcaption>
</figure>
</li>
<li>
<figure>
<img alt="" src="https://www.cssdersleri.com/wp-content/uploads/2022/06/1655373521_738_Hareketli-Altyazili-Duyarli-Resim-Galerisi.jpeg" />
<figcaption>Ice cream biscuit</figcaption>
</figure>
</li>
<li>
<figure>
<img alt="" src="https://www.cssdersleri.com/wp-content/uploads/2022/06/1655373521_585_Hareketli-Altyazili-Duyarli-Resim-Galerisi.jpeg" />
<figcaption>Cream biscuit marzipan</figcaption>
</figure>
</li>
</ul>

Bu da ne role="list" orada yapıyor? BT yardımcı teknolojinin hala öğeyi bir liste olarak yorumlamasını sağlar CSS ile liste stilini kaldırdıktan sonra.

Nasıl yapıldığını göstermek için farklı resim boyutları kullandım. object-fit kapsayıcısına sığdırmak ve aynı zamanda resim hizmet.

Rastgele bir görüntü hizmeti kullandığım için tam olarak sağlamadığımı unutmayın. alt açıklamalar veya gerçek figcaption bu demo görüntüleri için metin. İdeal olarak yazmalısın alt resmi tanımlayan ve kullanan figcaption bir şekil olarak görüntü için bağlam sağlamak için. bu kaynağı tavsiye ederim yazmanın önemi hakkında daha fazla bilgi edinin alt ve figcaption.

Bir liste kullandığımız için, varsayılan liste stillerini kaldırmamız gerekiyor ve ayrıca listeyi bir ızgara kapsayıcı olarak ayarlayacağız. Bu ilk stiller, liste öğelerimizi arka arkaya yerleştirmeyi sağlar ve görüntülerin ızgara sütunlarında kalmasını sağlar, ancak onları yeniden boyutlandırmaz.

.gallery {
list-style: none;
padding: 0;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(20ch, 1fr));
gap: 1rem;
}
.gallery img {
display: block;
width: 100%;
}

Eğer benim gibiyseniz ve bunu geçmiş yıllarda yapmaya çalıştıysanız, muhtemelen nedenini anlamaya çalışırken farenizi odanın diğer ucuna fırlatmışsınızdır. position: absolute jQuery animasyonlarınızla iyi oynamıyordu.

CSS Izgarası ve CSS dönüşümleri günü kurtarmak için burada! 🎉

kurulumu yapacağız figure ızgara görüntüsünü kullanmak ve ayrıca istenen görüntü yüksekliğini tutmak için özel bir özellik tanımlamak için. Ve görüntünün yüklenmesi biraz yavaşsa diye ona bir arka plan vereceğiz.

.gallery figure {
--gallery-height: 15rem;

margin: 0;
height: var(--gallery-height);
background-color: hsl(200, 85%, 2%);
}

Daha sonra başvuruyoruz object-fit ile birlikte görüntüye width: 100% ve şeklin boyutuna ölçeklenmesi için yükseklik için özel özelliği çekin. büyüsü object-fit: cover herhangi bir bozulma olmamasıdır.

.gallery img {
  display: block;
  width: 100%;
  object-fit: cover;
  height: var(--gallery-height);
}

Demoyu yeniden boyutlandırırsanız, img’nin artık bir demo olarak uygulanmış gibi davrandığını göreceksiniz. background-image ve kullanarak background-size: cover. bu img etiketi, kendi içeriği için bir kap gibi davranıyor.

yardımcı bir giriş için object-fit duyarlı görüntü ölçekleme için kontrol edin bu seriden bu önceki gönderi. benimkini de beğenebilirsin 3 dakikalık ücretsiz yumurta kafa dersi object-fit.

Kullanmaya yükselterek görüntü boyutlandırmayı iyileştirebiliriz. aspect-ratio yerel CSS özelliği kullanılarak desteklendiğinde @supports. Desteklendiğinde, bırakacağız height ve tanımlamak için takas aspect-ratio kullanmak. Bu, görünüm pencerelerinde daha tutarlı boyutta görüntülere sahip olmamızı sağlar.

.gallery figure {
--gallery-aspect-ratio: 4/3;
}
@supports (aspect-ratio: 1) {
.gallery figure,
.gallery img {
aspect-ratio: var(--gallery-aspect-ratio);
height: auto;
}
}

Şimdi bu noktada, altyazı resmin altındaki DOM sırasına göre doğal olarak aktı. Bu aynı zamanda varsayılan CSS ızgara davranışından da kaynaklanmaktadır, çünkü kendi “hücresinde” olması gerektiği ve varsayılan olarak ızgara öğelerinin satırlar halinde y ekseninden aşağı aktığı varsayılmaktadır.

Bunu çözmek için adlandırılmış bir grid-template-areas için figureve her ikisini de atayın img ve figcaption orada yaşamak. Ardından, ayarlamak için ızgara konumlandırmasını kullanacağız. place-items: end başlığı “hücrenin” sağ alt köşesine taşımak için kartın üzerindeki

.gallery figure {
display: grid;
grid-template-areas: "card";
place-items: end;
border-radius: 0.5rem;
overflow: hidden;
}
.gallery figure > * {
grid-area: card;
}
.gallery figcaption {
transform: translateY(100%);
}

Altyazının, kısmen eklemekten de artık görünmediğini fark edebilirsiniz. overflow: hidden için figure. Ardından, başlığı yerleştirmek için, başlangıç ​​konumunu çerçevenin dışında ayarlamak için CSS dönüşümlerini kullandık. figure. bir değeri 100% çevirmek için öğeyi hareket ettirecek 100% yerleştirildiği eksene göre. Yani, translateY(100%) “aşağı” başlığı ilk görünümün dışına etkili bir şekilde taşır.

Animasyonumuz fareyle üzerine gelindiğinde tetiklenecek ve tekrar sorunsuz bir şekilde canlanmasını ve geri çıkmasını istiyoruz. Bu, aşağıdakilerin ayarlanmasını gerektirir: transition Emlak.

beklediğimizi tanımlayacağız. geçiş üzerinde transform özelliği ve geçiş süresinin olması gerektiği 800ms ve kullan ease-in zamanlama işlevi.

bu :hover stiller aslında figure içeren öğe olduğundan, biz de bir ekleyeceğiz transform Altyazıyı, konumuna geri döndürerek doğal başlangıç ​​noktasına geri götüren tanım 0 y ekseninde.

.gallery figcaption {
transform: translateY(100%);
transition: transform 800ms ease-in;

padding: 0.25em 0.5em;
border-radius: 4px 0 0 0;
background-color: hsl(0 0% 100% / 87%);
}
.gallery figure:hover figcaption {
transform: translateY(0);
}

Ve ta-da! Temel bir animasyonlu başlığımız var.

Adını bilmiyor olabilirsiniz, ancak etkisini görmüşsünüzdür: bir durağan görüntünün yavaş, pürüzsüz kaydırma ve yakınlaştırma kombinasyonu, belgesel yapımcısı tarafından popüler hale getirildiğinden dolayı böyle adlandırılmıştır. Ken Burns.

Daha önce ele aldığımız ilkeleri kullanarak transition ve tranform özellikleri, onları tekrar birleştirebiliriz img vurgulu üzerinde de bu etkiyi eklemek için.

ek bir değer katıyoruz transform varsayılanı ayarlamak için scale 0’a gelindiğinde onu büyüteceğiz, bu yüzden başladığı noktayı belirlememiz gerekiyor. Cömert bir süre kullanıyoruz 1200ms Pürüzsüz bir kaydırma ve yakınlaştırma efekti oluşturmak için geçişin gerçekleşmesi için.

.gallery img {
transform: scale(1) translate(0, 0);
transition: transform 1200ms ease-in;
}

Daha sonra ekliyoruz :hover içine geçiş figure kuralı, yakınlaştırma efekti için her ikisini de biraz daha büyüterek, x ekseninde sola geri çekmenin yanı sıra -8% ve ayrıca y ekseninde biraz yukarı -3%. Çeviri değerlerini zevkinize göre ayarlayabilirsiniz.

.gallery figure:hover img {
transform: scale(1.3) translate(-8%, -3%);
}

Bir şey daha var, o da geçiş sürelerimizi bir a ile ayarlamış olmamız. 400ms fark. Bu değeri altyazı için bir gecikme olarak ekleyebiliriz. Gecikmenin, fareyle üzerine gelindiğinde geçişten önce ve fareyle üzerine gelindiğinde geçişin sonunda geçerli olduğunu unutmayın. Şahsen ben bu etkiyi seviyorum çünkü bu, her iki yönde de animasyonların birlikte bitmesi anlamına geliyor.

.gallery figcaption {
  
  transition: transform 800ms 400ms ease-in;
}

Görüntü ve başlık üzerinde Ken Burns efektinin yer aldığı galerimiz hep birlikte burada.

.gallery img {
transform: scale(1) translate(0, 0);
transition: transform 1200ms ease-in;
}
.gallery figure:hover img {
transform: scale(1.3) translate(-8%, -3%);
}
.gallery figcaption {
transition: transform 800ms 400ms ease-in;
}

Fareyle üzerine gelme, fare kullanıcıları için iyidir, ancak çeşitli nedenlerle gezinmek için öncelikle klavyelerini kullananlar ne olacak?

bu li element, doğası gereği odaklanabilir bir element değildir, bu yüzden sadece ekleyerek :focus tarzlar davranışı değiştirmez.

İki seçeneğimiz var:

• Yine de görüntüleri bağlamayı planlıyorsanız, figure bir bağlantı elemanı ve kanca ile :focus bunun için stiller
• Bir bağlantı gerekli değilse, başvurun tabindex="0" her birine figure onları odaklanabilir öğeler olarak etkinleştirecek

kullanacağız tabindex Bu demo için yaklaşım.

<figure tabindex="0"></figure>

Bunu sekme yaparak test edebilirsiniz ve standart odak halo anahattını fark edeceksiniz.

Anahattı özelleştireceğiz ve aynısını uygulamak için kuralları güncelleyeceğiz. :hover davranış :focus.

.gallery figure:focus {
  outline: 2px solid white;
  outline-offset: 2px;
}

.gallery figure:hover figcaption,
.gallery figure:focus figcaption {
  transform: translateY(0);
}

.gallery figure:hover img,
.gallery figure:focus img {
  transform: scale(1.3) translate(-8%, -3%);
}

Şu ana kadar büyük bir varsayımda bulunduk; bu, galerimizle etkileşime giren kullanıcıların üzerine gelme özellikli bir cihaza sahip olduğu yönünde. ve bir öğe üzerinde “vurgu” gerçekleştirmek için gereken motor beceriler.

Mevcut fareyle üzerine gelme deneyimi bir dokunmatik cihazda biraz çalışsa da, galeriyi bağlantıları kullanacak şekilde yükseltirseniz, altyazının navigasyon olayından önce gösterilmesi için zaman olmayabilir. Bunun yerine stratejimizi, yalnızca üzerine gelme özellikli cihazlar için animasyonlu bağlantıları etkinleştirecek şekilde değiştirelim ve varsayılanı bunları görüntüleyecek şekilde ayarlayalım.

Bu, hem fareyle üzerine gelmeyi hem de kullanıcının öncelikle bir fare, muhtemelen bir ekran kalemi kullandığı anlamına gelen “ince” işaretleme aygıtını algılamak için bir medya sorgusu kombosu ile yapılır. Buradaki anahtar kelime “muhtemel”dir, çünkü bazen dokunabilen cihazlar ve diğer zamanlarda daha fazla “ince” işaretçiler vardır. Bilgilendirilmiş bir karar vermenize yardımcı olacak daha fazla bilgi için, bu mükemmele göz atın etkileşim ortamı özelliklerine genel bakış Patrick H. Lauke’den.

kaldıracağız transform üzerinde figcaption ve bunun yerine yalnızca bu ortam sorgusu birleşimi geçerliyse uygulayın. Dokunmatik bir cihaz kullanıyorsanız, bir sonraki demoda muhtemelen altyazıları varsayılan olarak göreceksiniz veya tarayıcı geliştirme araçlarınızı kullanarak bir mobil veya dokunmatik cihazı taklit edebilirsiniz.

.gallery figcaption {
  transform: translateY(100%);
  
  z-index: 1;
}

@media (any-hover: hover) and (any-pointer: fine) {
  .gallery figcaption {
    transform: translateY(100%);
  }
}

Bazı kullanıcılar, medya sorgusu yoluyla da halledebileceğimiz “düşük hareket” deneyimine ihtiyaç duyabilir.

Tercih edilen-azaltılmış-hareket medya sorgusu, kullanıcı sistem ayarlarını azaltılmış hareket talep edecek şekilde güncellediğinde, resim yazısı ve resmin geçişini kaldırmamıza izin verecektir. Yapabilirsiniz genel bakışımda bu tercih edilen medya sorgusu hakkında daha fazla bilgi edinin.

Azaltılmış hareket ayarı doğru olduğunda, ilişkili transition ve transform değerler. Sonuç, görüntünün Ken Burns etkisine sahip olmaması ve resim yazısının geçiş olmadan anında görünmesi olacaktır.

@media (prefers-reduced-motion: reduce) {
.gallery * {
transition-duration: 0ms !important;
}
.gallery img {
transform: none !important;
}
.gallery figcaption {
transition-delay: 0ms;
}
}

Ken Burns stilinin bir başka özelliği de vinyet – görüntünün kenarlarındaki yumuşak siyah gradyan. Bunu bir iç metinle başarabiliriz box-shadow. Ancak, bir ek box-shadow doğrudan görüntü öğesi üzerinde çalışmayacaktır, bunun yerine onu bir :after sözde elemanı figure:

Vinyet, adındaki teke uygulanarak konumlandırılır. grid-area ve sahip olmasını sağlamak height ve width göreli konumlandırmaya ek olarak tüm kartı almak için resmin üzerine yığmak için.

.gallery figure::after {
content: "";
grid-area: card;
width: 100%;
height: 100%;
box-shadow: inset 0 0 2rem 1rem hsl(0 0% 0% / 65%);
position: relative;
}

Bu bileşen için oluşturulan son stilleri içeren yeni bir CodePen oluşturmak için “CodePen’de Aç” seçeneğini seçin.

Bu basit galeri örneğinde, sadece temel bir img öğe. Modern resim formatlarını nasıl kullanacağınızı öğrenmek ve resimlerinizin performansını artırmak istiyorsanız, görüntü görüntüleme öğeleri kılavuzu.