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

1. Başlamadan önce

Kaydırma odaklı animasyonlar, bir animasyonun oynatılmasını kaydırma kapsayıcısının kaydırma konumuna göre kontrol etmenizi sağlar. Yani siz yukarı veya aşağı kaydırdıkça animasyon ileri veya geri sarar. Buna ek olarak, kaydırmaya dayalı animasyonlarla bir öğenin kaydırma kapsayıcısı içindeki konumuna göre bir animasyonu da kontrol edebilirsiniz. Bu şekilde paralaks arka plan resmi, kaydırma ilerleme çubukları ve görüntüye yansıyan resimler gibi ilginç efektler oluşturabilirsiniz.

Chrome 115'teki yeni özellik, bildirim temelli kaydırmaya dayalı animasyonları kolayca oluşturmanızı sağlayan bir dizi JavaScript sınıfı ve CSS özelliği için destek sunar. Bu yeni API'ler, mevcut Web Animasyonları ve CSS Animasyonları API'leriyle birlikte çalışır.

Bu codelab'de, CSS kullanarak kaydırmaya dayalı animasyonların nasıl oluşturulacağı açıklanmaktadır. Bu codelab'i tamamlayarak bu heyecan verici özelliğin sunduğu scroll-timeline, view-timeline, animation-timeline ve animation-range gibi yeni CSS özelliklerini öğrendiniz.

Not: Kaydırma odaklı animasyonlar spesifikasyonu tarafından sağlanan JavaScript eşdeğeri, bu codelab'in kapsamında değildir.

Neler öğreneceksiniz?

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

Gerekenler

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

• ChromeOS, macOS veya Windows'da Chrome'un (115 veya sonraki sürümleri) "Deneysel Web Platformu Özellikleri"ne sahip yeni bir sürümü bayrağı etkin olarak ayarlandı.
• Temel HTML bilgileri
• CSS'ye, özellikle de CSS'deki animasyonlara dair temel bir anlayış

2. Hazırlanın

Bu proje için ihtiyacınız olan her şeyi GitHub deposunda bulabilirsiniz. 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 edinin

Bir öğeye eklenen animasyon, varsayılan olarak Doküman Zaman Çizelgesi'nde çalıştırılır. Bu durum, sayfa yüklendiğinde zaman ilerledikçe animasyonun ileri doğru kıvrılacağı anlamına gelir. Bu, varsayılan animasyon zaman çizelgesidir ve şu ana kadar erişebildiğiniz tek animasyon zaman çizelgesidir.

Kaydırmaya dayalı animasyonlarla, iki yeni zaman çizelgesi türüne erişim elde edersiniz:

• Kaydırma İlerlemesi Zaman Çizelgesi
• İlerleme Zaman Çizelgesini Göster

Bu zaman çizelgeleri, CSS'de animation-timeline özelliği kullanılarak bir animasyona eklenebilir. Bu yeni zaman çizelgelerinin ne anlama geldiğine ve birbirlerinden farklarına göz atın.

Kaydırma İlerlemesi Zaman Çizelgesi

Kaydırma İlerleme Zaman Çizelgesi, belirli bir eksende bir kaydırma kapsayıcısının (kaydırma noktası veya kaydırıcı olarak da bilinir) 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 ilerleme durumunu, bitiş kaydırma konumu ise% 100 ilerleme durumunu temsil eder. Aşağıdaki görselleştirmede, kaydırıcıyı aşağı kaydırdığınızda ilerlemenin% 0'dan% 100'e doğru çıktığına dikkat edin.

İlerleme Zaman Çizelgesini Göster

Bu zaman çizelgesi türü, bir öğenin kaydırma kapsayıcısı içindeki göreli ilerlemesiyle bağlantılıdır. Kaydırma İlerleme Zaman Çizelgesi'nde olduğu gibi, kaydırıcının kaydırma ofseti de izlenir. Kaydırma İlerleme Zaman Çizelgesi'nin aksine, ilerlemeyi belirleyen, öznenin ilgili kaydırma çubuğu içindeki göreli konumudur. Bu, bir öğenin kaydırıcıda ne kadar göründüğünü izleyen IntersectionObserver ile benzerdir. Öğe, kaydırıcıda görünmüyorsa kesişmiyordur. Kaydırma çubuğunun içinde görünüyorsa (en küçük kısmı olsa bile) kesişiyordur.

İlerleme Zaman Çizelgesi, öznenin kaydırıcıyla kesişmeye başladığı andan itibaren başlar ve konu kaydırıcıyla kesişmeyi bıraktığında sona erer. Aşağıdaki görselleştirmede, konu kaydırma kapsayıcısına girdiğinde ilerlemenin% 0'dan itibaren sayılmaya başladığını ve kaydırma kapsayıcısından ayrıldığında% 100'e ulaştığını unutmayın.

Varsayılan olarak, İlerleme Zaman Çizelgesini Görüntüleme Zaman Çizelgesi'ne bağlı bir animasyon, animasyon aralığının tamamına eklenir. Bu, konunun kaydırma bağlantı noktasına girdiği anda başlar ve konu kaydırma bağlantı noktasından ayrıldığında sona erer.

Eklenmesi gereken aralığı belirterek bu verileri Görüntüleme İlerleme Zaman Çizelgesi'nin belirli bir bölümüne bağlamak da mümkündür. Örneğin, bu yalnızca konu kaydırıcıya girerken olabilir. Aşağıdaki görselleştirmede, konu kaydırma kapsayıcısına girdiğinde ilerleme% 0'dan itibaren sayılmaya başlar ancak tamamen kesiştiği andan itibaren% 100'e ulaşır.

Hedefleyebileceğiniz olası Zaman Çizelgesi Görünüm aralıkları: cover, contain, entry, exit, entry-crossing ve exit-crossing. İlgili aralıklar, bu codelab'de sonraki bölümde açıklanmıştır. Ancak henüz öğrenmek istemiyorsanız https://goo.gle/view-timeline-range-tool adresinde bulunan aracı kullanarak her bir aralığın neleri temsil ettiğini görebilirsiniz.

4. Paralaks arka plan efekti oluşturma

Sayfaya eklenecek ilk efekt, ana arka plan resmine paralaks arka plan efekti eklemektir. Sayfayı aşağı kaydırdığınızda, arka plan resmi farklı bir hızda hareket eder. Bunun için Kaydırma İlerleme Zaman Çizelgesi'ni kullanırsınız.

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

1. Arka plan resminin konumunu hareket ettiren 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 karesi grubu kullanın. İçinde, 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 body öğ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 saniye olarak 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 Kaydırma Zaman Çizelgesi'ne henüz bir Kaydırma Zaman Çizelgesi eklemediğiniz için bu, beklenen bir durumdur. Animasyon, varsayılan Doküman Zaman Çizelgesi'nde çalıştırılır.

Anonim bir Kaydırma İlerleme Zaman Çizelgesi kullanarak animasyonu kökün kaydırma ilerlemesine bağlayın

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

scroll() işlevi, <scroller> ve <axis> bağımsız değişkenini 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 Doküman görüntü alanını kaydırma kapsayıcısı olarak kullanır.
• self Öğenin kendisini kaydırma kapsayıcısı olarak 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 ekseninde 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 ekseninde 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 ekseninde kök kaydırma çubuğuna bağlamak için scroll() öğesine aktarılacak değerler root ve block olur. Toplanan değer scroll(root block) olur.

• Gövdedeki animation-timeline özelliğinin değeri olarak scroll(root block) değerini ayarlayın.
• Ayrıca, saniye cinsinden ifade edilen animation-duration değeri anlamlı olmadığından 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 öğesi için en yakın üst kaydırma çubuğu 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ı çıkarabilirsiniz. Bu durumda, kod şu şekilde basitleştirilmiştir:

src/styles.css

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

Yaptığınız değişiklikleri doğrulayın

Her şey yolunda gittiyse şu ekranı görürsünüz:

Yoksa kodun solution-step-1 dalını kontrol edin.

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

Sayfada, o anda hangi fotoğrafı görüntülediğinizi belirtmek için ilerleme çubuğunun bulunması gereken yatay bir bant bulunmaktadır.

Bant için işaretleme şöyle 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ğu için animasyon kareleri zaten mevcuttur ve şöyle görünür:

src/styles.css

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

Not: Bu animasyon karesi grubunun, .gallery__scrollcontainer içerdiği .gallery__entry öğelerinin sayısına bağlı olarak başlangıç scaleX() ayarı vardır. Bu değer, kaydırıcının stil özelliğindeki --num-children özel özelliği tarafından sağlanır. Bu, kaydırma çubuğunun animasyonun başlangıcında belirli bir genişliği almasına olanak tanır. Örneğin, kaydırma kapsayıcısında dört öğe varsa ilerleme çubuğunun başlangıç genişliği, 4 resim içinden 1. resimde görüldüğü gibi %25 olmalıdır.

Bu animasyonunKaydırma İlerleme Zaman Çizelgesi içeren gallery__progress öğesi. Önceki adımda gösterildiği gibi, bunu scroll() işleviyle anonim bir Kaydırma İlerleme Zaman Çizelgesi oluşturarak yapabilirsiniz:

src/styles.css

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

Bu kod parçası çalışıyor gibi görünse de nearest kullanan otomatik kaydırma kapsayıcısı aramalarının çalışma şeklinden kaynaklanmıyor. Öğe, en yakındaki kaydırma çubuğunu ararken yalnızca konumunu etkileyebilecek öğeleri dikkate alır. .gallery__progress mutlak bir şekilde konumlandırıldığından konumunu belirleyecek ilk üst öğe, position: relative uygulandığından .gallery öğesidir. Yani, hedeflenmesi gereken kaydırıcı olan .gallery__scrollcontainer öğesi bu otomatik arama sırasında hiç dikkate alınmaz.

Bu sorunu çözmek için .gallery__scrollcontainer öğesinde adlandırılmış bir Kaydırma İlerleme Zaman Çizelgesi oluşturun ve .gallery__progress öğesini bu adı kullanarak ona bağlayın.

Adlandırılmış Kaydırma İlerleme Zaman Çizelgesi oluşturma ve bağlama

Bir öğede adlandırılmış Kaydırma İlerleme Zaman Çizelgesi oluşturmak için kaydırma kapsayıcısındaki 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ı.

Son olarak, animasyonu Kaydırma İlerleme Zaman Çizelgesi'ne bağlamak için öğenin üzerindeki 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;
}

Yaptığınız değişiklikleri doğrulayın

Her şey yolunda gittiyse şu ekranı görürsünüz:

Yoksa kodun solution-step-2 dalını kontrol edin.

6. Kaydırma alanına girip çıktıkları sırada galeri resimlerini canlandırın

Galeri resimlerine geçiş yapma

Anonim bir İlerleme Zaman Çizelgesini Görüntüleme oluşturma

Eklenen güzel bir efekt, galeri resimleri görüntüye girdikçe bunların şeffaf bir şekilde belirmesidir. Bunun için İlerleme Durumu Zaman Çizelgesini kullanabilirsiniz.

İlerleme Zaman Çizelgesini Görüntüleme oluşturmak için view() işlevini kullanabilirsiniz. Kabul edilen bağımsız değişkenleri <axis> ve <view-timeline-inset> şeklindedir.

• <axis>, Kaydırma İlerleme Zaman Çizelgesi'ndeki ile aynıdır ve hangi eksenin izleneceğini tanımlar.
• <view-timeline-inset> ile bir öğenin görünümde olup olmadığı düşünüldüğünde sınırları ayarlamak için ofset (pozitif veya negatif) belirtebilirsiniz.

Not: Görüntüleme Zaman Çizelgesi'nin <scroller> öğesi, konuyu her zaman en yakındaki üst kaydırma aracında takip ettiği için belirlemek mümkün değildir.

• Animasyon kareleri zaten oluşturulduğundan bunları eklemeniz yeterlidir. Bunu yapmak için her .gallery__entry öğesinde bir İlerleme Zaman Çizelgesini Görüntüleme 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() kullandığınızda, anonim bir şekilde ilerleme durumu zaman çizelgesini görüntüleme izni vermiş olursunuz. Adlandırılmış Kaydırma İlerleme Zaman Çizelgesi oluşturmaya benzer şekilde, İlerleme Zaman Çizelgesini görüntüleme için özel özellikler kullanarak adlandırılmış bir İlerleme Zaman Çizelgesi oluşturabilirsiniz. Özellikler view-timeline-name ve view-timeline-axis şeklindedir. Bunlar, scroll-timeline-* rakiplerine benzer.

İlerleme Zaman Çizelgesini Görüntüleme Zaman Çizelgesinin aralığını sınırlama

CSS'yi kaydedip sayfayı yüklerseniz öğelerin kaybolduğunu görürsünüz ancak bir şeyler ters gider. Tamamen görünüm dışında olduklarında 0 opaklığında başlar ve tamamen çıktıklarında yalnızca 1 opaklığında sona ererler.

Bunun nedeni, Görüntüleme İlerleme Zaman Çizelgesi için varsayılan aralığın tam aralık olmasıdır. Bu, cover aralığı olarak bilinir.

1. Konunun yalnızca entry aralığını hedeflemek istiyorsanız animasyonun ne zaman yayınlanması gerektiğini sınırlamak için 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% sayfasından (konu, kaydırıcıya girmek üzere) entry 100% konumuna (konu, kaydırma çubuğuna tamamen girmiştir).

Olası Zaman Çizelgesi Görüntüleme Aralıkları şunlardır:

• cover Görüntüleme ilerleme zaman çizelgesinin tüm aralığını temsil eder.
• entry Ana hesap kutusunun, görüntüleme ilerleme durumu görünürlük aralığına girdiği aralığı temsil eder.
• exit Ana hesap kutusunun, görüntüleme ilerleme durumu görünürlük aralığından çıktığı aralığı temsil eder.
• entry-crossing Ana kutunun son kenarlık kenarını geçtiği aralığı temsil eder.
• exit-crossing Ana kutunun başlangıç kenarlığı kenarını geçtiği aralığı gösterir.
• contain Ana alan kutusunun, kaydırma bağlantı noktası içindeki görüntüleme ilerleme durumu görünürlük aralığı tarafından tam olarak yer aldığı veya tamamen kapladığı aralığı temsil eder. Bu, öznenin kaydırıcıdan uzun mu yoksa kısa mı olduğuna bağlıdır.

Her bir 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 adresinde bulunan aracı kullanın.

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

2. Başlangıç ve bitiş aralıkları burada aynı olduğundan ve varsayılan ofsetler kullanıldığından animation-range öğesini tek bir animasyon aralığı adına dönüştürün:

src/styles.css

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

Galeri resimlerini soluklaştırma

• Resimleri, kaydırıcıdan çıktıklarında şeffaflaştırmak için animasyonlu animasyonla 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 ve animate-out animasyon kareleri exit aralığına uygulanacak.

Yaptığınız değişiklikleri doğrulayın

Her şey yolunda gittiyse şu ekranı görürsünüz:

Yoksa kodun solution-step-3 dalını kontrol edin.

7. Kaydırma alanına giren ve çıkan galeri resimlerini bir animasyon karesi grubu kullanarak canlandırın

Bir animasyon karesi grubunun durumu

Farklı aralıklara iki animasyon eklemek yerine, aralık bilgilerini zaten içeren bir animasyon karesi grubu oluşturulabilir.

Animasyon karelerinin şekli şöyle görünür:

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

1. Şeffaflaştırma ve kararma 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. Animasyon karelerinde aralık bilgisi olduğunda artık animation-range öğesini ayrıca 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);
}

Yaptığınız değişiklikleri doğrulayın

Her şey yolunda gittiyse önceki adımla aynı sonucu alırsınız. Yoksa kodun solution-step-4 dalını kontrol edin.

8. Tebrikler!

Bu codelab'i tamamladınız ve artık CSS'de Kaydırma İlerleme Zaman Çizelgeleri oluşturmayı ve İlerleme Zaman Çizelgelerini görüntülemeyi biliyorsunuz.

Daha Fazla Bilgi

Kaynaklar:

• Kaydırmaya dayalı animasyonlarla kaydırma sırasında öğelere animasyon ekleme
• Zaman Çizelgesi Aralığı Görselleştirici'yi göster
• Web Animasyonlarındaki yenilikler (Google I/O '23)