CSS'nin nihayet görsel etkileşimler üzerindeki kontrolü geri alması, stilin, animasyonun ve erişilebilirliğin sorumluluğunu tam olarak olması gerektiği gibi üstlenmesi gerçeğini seviyorum. Bugün, yerel tarayıcı yetenekleri, ağır yükü JavaScript ana iş parçacığından uzaklaştırıp GPU'ya yakınlaştırmamıza olanak tanıyor. Tarayıcı motorunun performansı optimize etmesine izin vererek, sağlam, erişilebilir ve gelecekte kullanımdan kaldırılabilecek harici kitaplıklardan bağımsız kodlar oluştururken enerji ve işlem gücünden tasarruf ediyoruz.

3 boyutlu, modern düzen tekniklerimiz, klip yollarımız, dönüşümlerimiz, özel özelliklerimiz, kaydırmayla yönlendirilen animasyonlarımız, görünüm geçişlerimiz, @property'miz var ve neredeyse her şeyi, hatta otomatik yüksekliğe kadar canlandırabiliriz!

Ve elbette, yeni olmayan ancak resimler ve animasyonlar yoluyla web sitelerinin tamamını oluşturmamıza olanak tanıyan SVG var. Aşağıdaki örneği ele alalım: duyarlıdır, hafiftir, erişilebilirdir ve öncelikle CSS Grid + SVG tarafından desteklenmektedir.

Nasıl Önlem Alınmalı?

Yalnızca SVG kullanarak kullanıcı arayüzü de dahil olmak üzere tam bir video oyunu bile oluşturabiliriz:

Aşağıda, modern CSS'ye yönelik eksiksiz bir rehber değil, bir sitenin canlı hissetmesini ve hatırlanmasını istediğimde ulaştığım, fikir sahibi bir teknik seçkisi yer alıyor. Unutulmaz deneyimler yaratmanın birçok yolu vardır. Bazen sorunsuz bir şekilde tamamlanan bir form kadar basittir. Ancak burada ben yelpazenin ifade edici tarafıyla ilgileniyorum.

Detaylar ve Etkileri

İletişim Olarak Hareket: Niyetinizi Tanımlamak

Teknik tarafa geçmeden önce bir şeyi açıklığa kavuşturmak istiyorum: Sırf yapabiliyoruz diye bir şeyleri hareket ettirmemeliyiz.

Önemli Gelişmeler

Her şey iletişim kurar ve animasyonlarımız da bir istisna değildir. Niyetlerimizi aşırıya kaçmadan dar bir kapsamda tutabilmek için iletmek istediğimiz mesajı destekleyen hareketleri tasarlamaya zaman ayırmalıyız.

İşte bir sitenin tasarımını ve animasyonunu planlarken kullandığım bir metodoloji.

Mantar odaklı bir doğa etkinliği projesi üzerinde çalıştığımızı düşünün. Tasarım dili tamamen "havaya" bağlı olarak değişiyor: "Psychedelic Mantar Rave" satmak, ataların tıbbına odaklanan "Ruhsal Mantar İnzivası"ndan çok farklı.

Gelecekte Ne Bekleniyor?

Her tasarım kararı iletişim kurar. Amacımı ve kapsamımı tanımlamak için anahtar kelime listeleri dediğim şeyleri oluşturmayı seviyorum. Örneğin, işleri farklı seçeneklere ayırabilirim:

Seçenek A: Psikedelik Etkinlik

Görseller: Renkli, doygun, yüksek kontrastlı, illüstrasyonlar, çarpıtmalar

Uzmanların Görüşleri

Renkli, doygun, yüksek kontrastlı, çizimler, çarpıtmalar Hareket: Hızlı, çılgınca, öngörülemez, geçiş, ritmik, senkronize döngüler, hipnotik

Hızlı, çılgınca, öngörülemez, dönüşen, ritmik, senkronize döngüler, hipnotik Duygu: Eğlenceli, kaotik, enerjik, uyarıcı, şaşırtıcı

Eğlenceli, kaotik, enerjik, teşvik edici, şaşırtıcı Tipografi: Funk, “psych-rock”

Sistem Güvenliği

Funk, "psych-rock" Stil Referansları: Pop Art, 60'lar/70'ler op sanatı, rave ilanları

Sonuç ve Değerlendirme

Pop Art, 60'lar/70'ler op sanatı, çılgın el ilanları Aksiyonlar: Dans

Dans Ekstraları: Emojiler, filmler (ör. Las Vegas'ta Korku ve Nefret)

Teknik Analiz

Seçenek B: Manevi İnziva

Görseller: Toprak tonları, nötr tonlar, doygunluğu giderilmiş, fotoğraf ağırlıklı, doğa, boşluk

Toprak tonları, nötr tonlar, doygunluğu giderilmiş, fotoğraf ağırlıklı, doğa, boşluk Hareket: Yavaş, akıcı, organik, nefes alma, ince paralaks, düzgün kaydırma.

Yavaş, akıcı, organik, nefes alan, hafif paralaks, düzgün kaydırma. Duygu: Sakin, dingin, içe dönük, düşünceli, güvenli

Sakin, dingin, içe dönük, düşünceli, güvenli Tipografi: Zarif Serif, minimalist sans-serif, geniş aralık, okunaklı

Zarif Serif, minimalist sans-serif, geniş aralık, okunaklı Stil Referansları: İskandinav tasarımı, Japon Wabi-sabi, sağlıklı yaşam/spa estetiği, botanik kitapları

İskandinav tasarımı, Japon Wabi-sabi, sağlıklı yaşam/spa estetiği, botanik kitapları Eylemler: Nefes alma

Nefes Alma Ekstraları: İyileştirici sesler, film (örneğin, Ye Dua Et Sev)

Bu, tasarım ve animasyon kararlarıma rehberlik etmek için yaptığım türden bir egzersiz. Listeler, kullanmayı planladığım CSS özelliklerini ve bunların nasıl kullanılacağını seçmemde bana yardımcı olacak. Hatta bunları müşteriyle paylaşıyorum ve birlikte bir yön seçiyoruz.

Diyelim ki Seçenek A'yı tercih edelim ve unutulmaz kullanıcı deneyimleri yaratmak için temel bileşenler olduğunu düşündüğüm birkaç örneğe bakalım.

Bölünmüş Metin Animasyonları

Bu animasyonlar GSAP SplitText eklentisi sayesinde popüler hale geldi. Metni karaktere (veya isterseniz kelimelere veya satırlara) göre böler, böylece kademeli animasyonlar gibi ilginç metin efektleri oluşturabiliriz.

H O L < span style="--i:3">A

Bu yaklaşım “Hola”daki her harfi bir aralıkta sarar. Buradan, her bir yayılma alanı, aralıkları sırayla indeksleyen özel bir özellik ile satır içi stile dönüştürülür. Sibling-index() işlevi geniş tarayıcı desteği kazandığında bu çok daha kolaylaşacak bir şey.

Ancak şimdilik her özel özellik değeri, animasyon gecikmesini artıran ve her aralığı şaşırtan bir çarpan görevi görüyor. Bu durumda, yukarı doğru hareket ettikçe her karakterde solmaya başlarız.

.reveal-text span { animasyon: SlideUp 0,6 saniyelik ilerleme hızı; animasyon gecikmesi: calc(var(--i) * 0,1s); ekran: satır içi blok; opaklık: 0; dönüşüm: TranslateY(3rem); } @keyframes SlideUp { ila { opaklık: 1; dönüşüm: çeviriY(0); } }

Erişilebilirlik burada zor kısımdır. İçgüdü, aria-hidden='true' ile tüm bireysel kapsamları yardımcı teknolojiden gizlemek ve ekran okuyucular için tam kelimenin görsel olarak gizlenmiş bir versiyonunu eklemektir:

HOLA H O L A

.sr-only { konum: mutlak; genişlik: 1 piksel; yükseklik: 1 piksel; dolgu: 0; kenar boşluğu: -1 piksel; taşma: gizli; klip: rect(0, 0, 0, 0); beyaz boşluk: şimdirap; sınır: 0; }

Ancak uyaralım: Bu model tüm ekran okuyucularda iyi bir deneyimi garanti etmez. Adrian Roselli, GSAP'nin SplitText'ini sekiz ekran okuyucu ve tarayıcı kombinasyonunda test etti ve yalnızca ikisinde doğru çalıştığını gördü. Bu tekniği gönderirseniz, gerçek yardımcı teknolojiyle test edin.

Bu risk çok yüksek geliyorsa, Preethi'nin harf aralığı özelliğini kullanan, bilmeye değer çok akıllı bir alternatifi var. Karakterleri üst üste çökerten negatif değerleri kabul eder, DOM'a hiç dokunmadan gizler. Tekrar 0'a canlandırın ve erişilebilirlik ek yükü olmadan benzer bir ortaya çıkarma efekti elde edin.

Harika olurdu, ::nth-letter gibi bir sözde seçici, bireysel glifleri doğrudan CSS'den hedeflemek için ::first-letter'in ilk karakteri seçmesi gibi. Ama ne yazık ki, ::n'inci harf yok... en azından henüz.

Her animasyonda kullanıcının hareket tercihlerine saygı duymayı unutmayın:

@media (azaltılmış hareketi tercih eder: azalt) { .reveal-text span { animasyon: yok; /* veya daha yumuşak bir animasyon */ } }

CodePen Yerleştirme Geri Dönüşü

Uygulamak istediğimiz çok fazla metin ve farklı animasyonlar olduğunda çok fazla ölçeklenmeyebilir. Psychedelic olay için, metni SMIL ile bölmeyi denemek istedim ama çok ayrıntılıydı. Bu, yalnızca iki harfi canlandırmanın kodudur: