CSS'de kaydırmaya dayalı animasyonları kullanmaya başlama

1. Başlamadan önce

Kaydırmaya dayalı animasyonlar, bir animasyonun oynatılmasını kaydırma kapsayıcısının kaydırma konumuna göre kontrol etmenizi sağlar. Bu, yukarı veya aşağı kaydırdığınızda animasyonun ileri ya da geri sarılacağı anlamına gelir. Ayrıca, kaydırmaya dayalı animasyonlarla bir öğenin kaydırma kapsayıcısı içindeki konumuna göre animasyonu da kontrol edebilirsiniz. Bu sayede paralaks arka plan resmi, kaydırma ilerleme çubukları ve görünüme girdikçe ortaya çıkan resimler gibi ilgi çekici efektler oluşturabilirsiniz.

Chrome 115'te, bildirim temelli kaydırmaya dayalı animasyonları kolayca oluşturmanıza olanak tanıyan bir dizi JavaScript sınıfı ve CSS özelliği desteği sunuluyor. Bu yeni API'ler, mevcut Web Animations ve CSS Animations API'leriyle birlikte çalışır.

Bu codelab'de, CSS kullanarak kaydırmaya dayalı animasyonlar oluşturmayı öğreneceksiniz. Bu codelab'i tamamlayarak bu heyecan verici özellik tarafından sunulan birçok yeni CSS özelliği (ör. scroll-timeline, view-timeline, animation-timeline ve animation-range) hakkında bilgi edineceksiniz.

Not: Kaydırmaya dayalı animasyonlar spesifikasyonu tarafından sağlanan JavaScript karşılığı bu codelab'de ele alınmamaktadır.

Neler öğreneceksiniz?

• CSS'de kaydırma zaman çizelgesiyle paralaks arka plan efekti oluşturma
• CSS'de kaydırma zaman çizelgesiyle ilerleme çubuğu oluşturma
• CSS'de görünüm zaman çizelgesiyle resim gösterme efekti oluşturma
• CSS'de farklı türlerdeki Görünüm Zaman Çizelgesi aralıklarını hedefleme.

İhtiyacınız olanlar

Aşağıdaki cihaz kombinasyonlarından biri:

• ChromeOS, macOS veya Windows'da Chrome'un yeni bir sürümü (115 ya da sonraki sürümler) ve "Deneysel Web Platformu Özellikleri" işaretinin etkin olarak ayarlanmış olması gerekir.
• HTML hakkında temel bilgi
• CSS'nin, özellikle CSS'deki animasyonların temel düzeyde anlaşılması

2. Hazırlanın

Bu proje için ihtiyacınız olan her şey bir GitHub deposunda mevcuttur. Başlamak için kodu klonlayın ve en sevdiğiniz geliştirme ortamında açın.

1. Yeni bir tarayıcı sekmesi açın ve https://github.com/googlechromelabs/io23-scroll-driven-animations-codelab adresine gidin.
2. Depoyu klonlayın.
3. Kodu tercih ettiğiniz IDE'de açın.
4. Bağımlılıkları yüklemek için npm install komutunu çalıştırın.
5. npm start komutunu çalıştırın ve http://localhost:3000/ adresini ziyaret edin.
6. Alternatif olarak, npm yüklü değilse src/index.html dosyasını Chrome'da açın.

3. Animasyon zaman çizelgeleri hakkında bilgi

Bir öğeye eklenen animasyonlar varsayılan olarak belge zaman çizelgesinde çalışır. Bu nedenle, sayfa yüklendiğinde animasyon, zaman ilerledikçe ilerler. Bu, varsayılan animasyon zaman çizelgesidir ve şimdiye kadar erişebildiğiniz tek animasyon zaman çizelgesiydi.

Kaydırmaya dayalı animasyonlarla iki yeni zaman çizelgesi türüne erişebilirsiniz:

• İlerleme Zaman Çizelgesini Kaydırma
• İlerleme Zaman Çizelgesini Görüntüleme

CSS'de bu zaman çizelgeleri, animation-timeline özelliği kullanılarak bir animasyona eklenebilir. Bu yeni zaman çizelgelerinin ne anlama geldiğini ve aralarındaki farkları inceleyin.

İlerleme Zaman Çizelgesini Kaydırma

Kaydırma İlerlemesi Zaman Çizelgesi, belirli bir eksen boyunca kaydırma kapsayıcısının (kaydırma alanı veya kaydırıcı olarak da adlandırılır) kaydırma konumundaki ilerlemeye bağlı bir animasyon zaman çizelgesidir. Kaydırma aralığındaki bir konumu, zaman çizelgesindeki ilerleme yüzdesine dönüştürür.

Başlangıç kaydırma konumu% 0 ilerlemeyi, bitiş kaydırma konumu ise% 100 ilerlemeyi temsil eder. Aşağıdaki görselleştirmede, kaydırılabilir alanı aşağı kaydırdıkça ilerleme durumunun% 0'dan% 100'e doğru arttığını unutmayın.

İlerleme Zaman Çizelgesini Görüntüleme

Bu tür zaman çizelgeleri, kaydırma kapsayıcısındaki belirli bir öğenin göreli ilerleme durumuna bağlıdır. Kaydırma İlerleme Durumu Zaman Çizelgesi'nde olduğu gibi, kaydırıcının kaydırma uzaklığı izlenir. Kaydırma İlerlemesi Zaman Çizelgesinin aksine, ilerlemeyi belirleyen, bir konunun kaydırılabilir alan içindeki göreli konumudur. Bu metrik, kaydırılabilir alanda bir öğenin ne kadar görünür olduğunu izleyen IntersectionObserver ile karşılaştırılabilir. Öğe kaydırılabilir alanda görünmüyorsa kesişmiyor demektir. Kaydırma çubuğunun içinde görünüyorsa (en küçük kısmı bile) kesişiyor demektir.

Görüntüleme İlerleme Zaman Çizelgesi, bir konu kaydırma çubuğuyla kesişmeye başladığı anda başlar ve konu kaydırma çubuğuyla kesişmeyi bıraktığında sona erer. Aşağıdaki görselleştirmede, ilerleme durumunun, konu kaydırma kapsayıcısına girdiğinde% 0'dan başlayarak sayılmaya başladığını ve kaydırma kapsayıcısından çıktığında% 100'e ulaştığını unutmayın.

Varsayılan olarak, Görünüm İlerleme Durumu Zaman Çizelgesi'ne bağlı bir animasyon, zaman çizelgesinin tamamına eklenir. Bu süre, öznenin kaydırma alanına girdiği andan itibaren başlar ve kaydırma alanından çıktığı anda sona erer.

Ayrıca, hangi aralığa eklenmesi gerektiğini belirterek bu öğeyi, İlerleme Zaman Çizelgesi'nin belirli bir bölümüne de bağlayabilirsiniz. Örneğin, bu durum yalnızca özne kaydırma çubuğuna girerken geçerli olabilir. Aşağıdaki görselleştirmede, konu kaydırma kapsayıcısına girdiğinde ilerleme% 0'dan başlayarak artar ancak tamamen kesiştiği anda% 100'e ulaşır.

Hedefleyebileceğiniz olası Zaman Çizelgesi'ni Görüntüleme aralıkları cover, contain, entry, exit, entry-crossing ve exit-crossing'dır. Bu aralıklar, bu codelab'in ilerleyen bölümlerinde açıklanmaktadır. Ancak beklemek istemiyorsanız her aralığın neyi temsil ettiğini görmek için https://goo.gle/view-timeline-range-tool adresindeki aracı kullanın.

4. Paralaks arka plan efekti oluşturma

Sayfaya eklenecek ilk efekt, ana arka plan resminde kullanılan paralaks arka plan efektidir. Sayfayı aşağı kaydırdığınızda arka plan resmi farklı bir hızda da olsa hareket etmelidir. Bunun için kaydırma ilerleme durumu zaman çizelgesini kullanırsınız.

Bunu uygulamak için iki adım vardır:

1. Arka plan resminin konumunu değiştiren bir animasyon oluşturun.
2. Animasyonu dokümanın kaydırma ilerlemesine bağlayın.

Animasyonu oluşturma

1. Animasyonu oluşturmak için normal bir animasyon kareleri grubu kullanın. Arka plan konumunu dikey olarak% 0'dan %100'e taşıyın:

src/styles.css

@keyframes move-background {
  from {
    background-position: 50% 0%;
  }
  to {
    background-position: 50% 100%;
  }
}

2. Şimdi bu animasyon karelerini gövde öğesine ekleyin:

src/styles.css

body {
  animation: 1s linear move-background;
}

Bu kodla move-background animasyonu gövde öğesine eklenir. animation-duration özelliği bir saniyeye ayarlanmış ve linear yumuşak geçiş kullanıyor.

Not: CSS dosyasını kaydedip siteyi tarayıcınızda kontrol ederseniz sayfa yüklendiğinde arka planın hareket ettiğini görürsünüz. Henüz bir Kaydırma Zaman Çizelgesi eklemediğiniz için bu beklenen bir durumdur. Animasyon, varsayılan belge zaman çizelgesinde çalışır.

Anonim bir kaydırma ilerleme zaman çizelgesi kullanarak animasyonu kökün kaydırma ilerlemesine bağlayın.

Kaydırma ilerleme durumu zaman çizelgesi oluşturmanın en kolay yolu scroll() işlevini kullanmaktır. Bu işlem, animation-timeline özelliği için değer olarak ayarlayabileceğiniz anonim bir Kaydırma İlerlemesi Zaman Çizelgesi oluşturur.

scroll() işlevi, <scroller> ve <axis> bağımsız değişkenlerini kabul eder.

<scroller> bağımsız değişkeni için kabul edilen değerler şunlardır:

• nearest. En yakın üst öğe kaydırma kapsayıcısını kullanır (varsayılan).
• root. Kaydırma kapsayıcısı olarak doküman görüntü alanını kullanır.
• self. Kaydırma kapsayıcısı olarak öğenin kendisini kullanır.

<axis> bağımsız değişkeni için kabul edilen değerler şunlardır:

• block. Kaydırma kapsayıcısının blok ekseni boyunca ilerleme ölçüsünü kullanır (varsayılan).
• inline. Kaydırma kapsayıcısının satır içi ekseni boyunca ilerleme ölçüsünü kullanır.
• y. Kaydırma kapsayıcısının y ekseni boyunca ilerleme ölçüsünü kullanır.
• x. Kaydırma kapsayıcısının x ekseni boyunca ilerleme ölçüsünü kullanır.

Animasyonu blok eksenindeki kök kaydırıcıya bağlamak için scroll() içine iletilecek değerler root ve block'dir. Bir araya getirildiğinde değer scroll(root block) olur.

• scroll(root block) öğesini gövdedeki animation-timeline özelliğinin değeri olarak ayarlayın.
• Ayrıca, saniye cinsinden ifade edilen bir animation-duration anlamsız olduğundan süreyi auto olarak ayarlayın. animation-duration belirtmezseniz varsayılan olarak auto olur.

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(root block);
}

Kök kaydırıcı aynı zamanda gövde öğesinin en yakın üst kaydırıcısı olduğundan nearest değerini de kullanabilirsiniz:

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll(nearest block);
}

nearest ve block varsayılan değerler olduğundan bunları atlamayı da seçebilirsiniz. Bu durumda kod şu şekilde basitleştirilebilir:

src/styles.css

body {
  animation: linear move-background;
  animation-duration: auto;
  animation-timeline: scroll();
}

Değişikliklerinizi doğrulama

Her şey yolunda gittiyse artık şunlara sahip olmalısınız:

Uygulamadıysanız kodun solution-step-1 dalına göz atın.

5. Resim galerisi için ilerleme çubuğu oluşturma

Sayfada, şu anda hangi fotoğrafı görüntülediğinizi belirtmek için ilerleme çubuğu gereken yatay bir rulo var.

Carousel'ın işaretlemesi şu şekilde görünür:

src/index.html

<div class="gallery">
  <div class="gallery__scrollcontainer" style="--num-images: 3;">
    <div class="gallery__progress"></div>
    <div class="gallery__entry">
      ...
    </div>
    <div class="gallery__entry">
      ...
    </div>
    <div class="gallery__entry">
      ...
    </div>
  </div>
</div>

İlerleme çubuğunun anahtar kareleri zaten yerinde ve şu şekilde görünüyor:

src/styles.css

@keyframes adjust-progress {
  from {
    transform: scaleX(calc(1 / var(--num-images)));
  }
  to {
    transform: scaleX(1);
  }
}

Not: Bu animasyon karesi grubunun başlangıcı, .gallery__scrollcontainer öğesinin içerdiği .gallery__entry öğelerinin sayısına göre belirlenen bir scaleX() değerine sahiptir. Bu değer, kaydırılabilir alanın stil özelliğindeki --num-children özel nitelik tarafından sağlanır. Bu, kaydırma çubuğunun animasyonun başında belirli bir genişliğe sahip olmasını sağlar. Örneğin, kaydırma kapsayıcısında dört öğe varsa ilerleme çubuğunun başlangıç genişliği %25 olmalıdır.

Bu animasyon, .Kaydırma İlerleme Durumu Zaman Çizelgesi içeren gallery__progress öğesi. Önceki adımda gösterildiği gibi, scroll() işlevini kullanarak anonim bir kaydırma ilerleme durumu zaman çizelgesi oluşturarak bunu sağlayabilirsiniz:

src/styles.css

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  animation-timeline: scroll(nearest inline);
}

Bu kod parçası çalışacak gibi görünse de nearest kullanılarak yapılan otomatik kaydırma kapsayıcısı aramalarının çalışma şekli nedeniyle çalışmaz. En yakın kaydırılabilir alan aranırken öğe yalnızca konumunu etkileyebilecek öğeleri dikkate alır. .gallery__progress öğesi mutlak olarak konumlandırıldığından, konumunu belirleyecek ilk üst öğe, position: relative uygulandığı için .gallery öğesidir. Bu, hedeflenmesi gereken kaydırılabilir alan olan .gallery__scrollcontainer öğesinin bu otomatik arama sırasında hiç dikkate alınmadığı anlamına gelir.

Bu sorunu çözmek için .gallery__scrollcontainer öğesinde adlandırılmış bir kaydırma ilerleme zaman çizelgesi oluşturun ve .gallery__progress öğesini bu adı kullanarak zaman çizelgesine bağlayın.

Adlandırılmış bir kaydırma ilerleme zaman çizelgesi oluşturma ve bağlama

Bir öğede adlandırılmış bir kaydırma ilerleme zaman çizelgesi oluşturmak için kaydırma kapsayıcısında scroll-timeline-name CSS özelliğini istediğiniz bir değere ayarlayın. Değer -- ile başlamalıdır.

Galeri yatay olarak kaydırıldığından scroll-timeline-axis özelliğini de ayarlamanız gerekir. İzin verilen değerler, scroll() işlevinin <axis> bağımsız değişkeniyle aynıdır.

Son olarak, animasyonu kaydırma ilerleme durumu zaman çizelgesine bağlamak için animasyon uygulanması gereken öğedeki animation-timeline özelliğini, scroll-timeline-name için kullanılan tanımlayıcıyla aynı değere ayarlayın.

• styles.css dosyasını aşağıdakileri içerecek şekilde değiştirin:

src/styles.css

.gallery__scrollcontainer {
  /* Create the gallery-is-scrolling timeline */
  scroll-timeline-name: --gallery-is-scrolling;
  scroll-timeline-axis: inline;
}

.gallery__progress {
  animation: linear adjust-progress;
  animation-duration: auto;
  /* Set gallery-is-scrolling as the timeline */
  animation-timeline: --gallery-is-scrolling;
}

Değişikliklerinizi doğrulama

Her şey yolunda gittiyse artık şunlara sahip olmalısınız:

Uygulamadıysanız kodun solution-step-2 dalına göz atın.

6. Galeri resimlerini kaydırma alanına girip çıkarken animasyonlu hâle getirme

Galeri resimlerini yavaş yavaş gösterme

Anonim görünüm ilerleme zaman çizelgesi oluşturma

Ekleyebileceğiniz güzel bir efekt, galeri resimlerini görünüme girerken soldurarak göstermektir. Bunun için bir ilerleme durumu zaman çizelgesi kullanabilirsiniz.

Görüntüleme ilerleme durumu zaman çizelgesi oluşturmak için view() işlevini kullanabilirsiniz. Kabul edilen bağımsız değişkenleri <axis> ve <view-timeline-inset>'dir.

• <axis>, kaydırma ilerleme zaman çizelgesindekiyle aynıdır ve hangi eksenin izleneceğini tanımlar.
• <view-timeline-inset> ile, bir öğenin görünür olup olmadığı değerlendirilirken sınırları ayarlamak için bir ofset (pozitif veya negatif) belirtebilirsiniz.

Not: Bir Görünüm Zaman Çizelgesi'nin <scroller> değerini belirlemek mümkün değildir. Çünkü bu değer, her zaman en yakın üst kaydırma alanındaki öğeyi izler.

• Animasyon kareleri zaten mevcut olduğundan bunları yalnızca eklemeniz gerekir. Bunun için her .gallery__entry öğesinde bir görünüm ilerleme durumu zaman çizelgesi oluşturun.

src/styles.css

@keyframes animate-in {
  from {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
  to {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
}

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
}

Not: view() simgesini kullanarak anonim bir İzleme İlerlemesi Zaman Çizelgesi oluşturursunuz. Adlandırılmış bir kaydırma ilerleme durumu zaman çizelgesi oluşturmaya benzer şekilde, adlandırılmış bir görüntüleme ilerleme durumu zaman çizelgesi de oluşturabilirsiniz. Bunun için özel özellikler kullanmanız gerekir. Özellikler view-timeline-name ve view-timeline-axis'dir. Bunlar, scroll-timeline-* benzerleriyle aynı şekilde çalışır.

Görüntüleme ilerleme durumunun zaman çizelgesinin aralığını sınırlama

CSS'yi kaydedip sayfayı yüklerseniz öğelerin belirdiğini görürsünüz ancak bir sorun var gibi görünür. Öğeler, tamamen görünüm dışındayken 0 opaklığıyla başlar ve tamamen çıktıktan sonra 1 opaklığıyla sona erer.

Bunun nedeni, bir Görünüm İlerleme Zaman Çizelgesi'nin varsayılan aralığının tam aralık olmasıdır. Bu, cover aralığı olarak bilinir.

1. Yalnızca konunun entry aralığını hedeflemek için animasyonun ne zaman çalışması gerektiğini sınırlamak üzere animation-range CSS özelliğini kullanın.

src/styles.css

.gallery__entry {
  animation: linear fade-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry 0% entry 100%;
}

Animasyon artık entry 0% (konu, kaydırma alanına girmek üzere) ile entry 100% (konu, kaydırma alanına tamamen girdi) arasında çalışıyor.

Olası Zaman Çizelgesi Görüntüleme Aralığı seçenekleri şunlardır:

• cover. Görünüm ilerleme durumu zaman çizelgesinin tamamını gösterir.
• entry. Ana kutunun görünüm ilerlemesi görünürlük aralığına girdiği aralığı gösterir.
• exit. Asıl kutunun görünüm ilerleme görünürlük aralığından çıktığı aralığı gösterir.
• entry-crossing. Ana kutunun uç kenarlığını geçtiği aralığı gösterir.
• exit-crossing. Ana kutunun başlangıç kenarlığını geçtiği aralığı gösterir.
• contain. Ana kutunun, kaydırma bağlantı noktasındaki görünüm ilerlemesi görünürlük aralığı tarafından tamamen kapsandığı veya bu aralığı tamamen kapladığı aralığı gösterir. Bu, öznenin kaydırılabilir alandan daha uzun veya daha kısa olmasına bağlıdır.

Her aralığın neyi temsil ettiğini ve yüzdelerin başlangıç ve bitiş konumlarını nasıl etkilediğini görmek için https://goo.gle/view-timeline-range-tool adresindeki aracı kullanın.

Not: Başlangıç ve bitiş animation-range için farklı aralıkları hedeflemek mümkündür.

2. Burada başlangıç ve bitiş aralıkları aynı olduğundan ve varsayılan uzaklıklar kullanıldığından, animation-range öğesini tek bir animasyon aralığı adına basitleştirin:

src/styles.css

.gallery__entry {
  animation: linear animate-in;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry;
}

Galeri resimlerini soldurma

• Resimler kaydırma alanından çıkarken solmalarını sağlamak için giriş animasyonuyla aynı işlemi yapabilir ancak farklı bir aralığı hedefleyebilirsiniz.

src/styles.css

@keyframes animate-out {
  from {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
  to {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
}

.gallery__entry {
  animation: linear animate-in, linear animate-out;
  animation-duration: auto;
  animation-timeline: view(inline);
  animation-range: entry, exit;
}

animate-in animasyon kareleri entry aralığına, animate-out animasyon kareleri ise exit aralığına uygulanır.

Değişikliklerinizi doğrulama

Her şey yolunda gittiyse artık şunlara sahip olmalısınız:

Uygulamadıysanız kodun solution-step-3 dalına göz atın.

7. Bir dizi anahtar kare kullanarak galeri resimlerinin kaydırma alanına girip çıkarken animasyonlu olmasını sağlama

Bir grup anahtar kare için durum

İki animasyonu farklı aralıklara eklemek yerine, aralık bilgilerini içeren bir anahtar kare grubu oluşturabilirsiniz.

Animasyon karelerinin şekli şu şekildedir:

@keyframes keyframes-name {
  range-name range-offset {
    ...
  }
  range-name range-offset {
    ...
  }
}

1. Açılma ve kapanma animasyon karelerini şu şekilde birleştirin:

src/styles.css

@keyframes animate-in-and-out {
  entry 0% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
  entry 90% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }

  exit 10% {
    opacity: 1;
    clip-path: inset(0% 0% 0% 0%);
  }
  exit 100% {
    opacity: 0;
    clip-path: inset(50% 0% 50% 0%);
  }
}

2. Aralık bilgisi anahtar karelerde mevcut olduğunda artık animation-range değerini ayrı olarak belirtmeniz gerekmez. Animasyon karelerini animation özelliği olarak ekleyin.

src/styles.css

.gallery__entry {
  animation: linear animate-in-and-out both;
  animation-duration: auto;
  animation-timeline: view(inline);
}

Değişikliklerinizi doğrulama

Her şey yolunda gittiyse önceki adımdakiyle aynı sonucu elde etmeniz gerekir. Uygulamadıysanız kodun solution-step-4 dalına göz atın.

8. Tebrikler!

Bu codelab'i tamamladınız ve artık CSS'de kaydırma ilerleme zaman çizelgeleri ve görüntüleme ilerleme zaman çizelgeleri oluşturmayı biliyorsunuz.

Daha Fazla Bilgi

Kaynaklar:

• Kaydırmaya bağlı animasyonlarla kaydırma sırasında öğelere animasyon ekleme
• Zaman Çizelgesi Aralığı Görselleştiricisi'ni görüntüleme
• Web Animasyonları'ndaki yenilikler (Google I/O 2023)