Kaydırma odaklı animasyonlarla, kaydırma sırasında öğeleri canlandırın

Kaydırmaya dayalı animasyonları bildirimli bir şekilde oluşturmak için kaydırma Zaman Çizelgeleri ve Zaman Çizelgeleri ile nasıl çalışacağınızı öğrenin.

Bramus

Kaydırma odaklı animasyonlar

Tarayıcı Desteği

  • Chrome: 115..
  • Kenar: 115..
  • Firefox: Bir bayrağın arkasında.
  • Safari: desteklenmez..

Kaynak

Kaydırmaya dayalı animasyonlar, web'de yaygın olarak kullanılan bir kullanıcı deneyimi kalıbıdır. Kaydırmaya dayalı animasyon, bir kaydırma kapsayıcısının kaydırma konumuna bağlıdır. Yani siz yukarı veya aşağı kaydırdıkça bağlantılı animasyon doğrudan yanıtta ileri veya geri sarar. Siz kaydırdıkça hareket eden paralaks arka plan resimleri veya okuma göstergeleri gibi efektler buna örnek olarak gösterilebilir.

Sayfanın üzerinde, kaydırmanın etkisiyle gösterilen bir okuma göstergesi.

Kaydırmaya dayalı animasyona benzer bir tür olan, bir öğenin kaydırma kapsayıcısı içindeki konumuna bağlanan bir animasyondur. Örneğin, bu özellikte öğeler göründüklerinde kaybolabilir.

Bu sayfadaki resimler göründüklerinde soluklaşır.

Bu tür efektleri gerçekleştirmenin klasik yolu, ana iş parçacığında kaydırma etkinliklerine yanıt vermektir. Bu da iki temel soruna yol açar:

  • Modern tarayıcılar, kaydırma işlemini ayrı bir işlem üzerinde gerçekleştirir ve bu nedenle kaydırma etkinliklerini eşzamansız olarak sunar.
  • Ana iş parçacığı animasyonları jant'a tabidir.

Bu, kaydırmayla senkronize olan, kaydırmaya dayalı, yüksek performans gösteren animasyonların oluşturulmasını imkansız veya çok zor hale getirir.

Chrome sürüm 115'ten itibaren bildirime dayalı kaydırmaya dayalı animasyonları etkinleştirmek için kullanabileceğiniz yeni bir dizi API ve kavram bulunmaktadır: Kaydırma Zaman Çizelgeleri ve Zaman Çizelgelerini Görüntüleme.

Bu yeni kavramlar, mevcut Web Animations API (WAAPI) ve CSS Animations API ile entegre olarak mevcut API'lerin sunduğu avantajları devralmalarını sağlar. Bu, kaydırmaya dayalı animasyonların ana iş parçacığında çalıştırılmasını da içerir. Evet, bunu doğru okuyun: Artık yalnızca birkaç satır ek kodla ana iş parçacığının ilerlemesiyle kaydırmayla yönlendirilen ve sorunsuz animasyonlara sahip olabilirsiniz. Neleri beğenmedim?

Web'deki animasyonlar, küçük bir özet

CSS ile web'de animasyonlar

CSS'de animasyon oluşturmak için @keyframes kuralını kullanarak animasyon kareleri grubu tanımlayın. animation-name özelliğini kullanarak öğeyi bir öğeye bağlarken animasyonun ne kadar süreceğini belirlemek için animation-duration ayarlayın. Daha fazla animation-* uzun süreli özellik (animation-easing-function ve animation-fill-mode) mevcuttur. Bunların tümü animation kısaltması ile birleştirilebilir.

Örneğin, burada X eksenindeki bir öğeyi ölçeklendirirken arka plan rengini de değiştiren bir animasyon görebilirsiniz:

@keyframes scale-up {
  from {
    background-color: red;
    transform: scaleX(0);
  }
  to {
    background-color: darkred;
    transform: scaleX(1);
  }
}

#progressbar {
  animation: 2.5s linear forwards scale-up;
}
.

JavaScript ile web'de animasyonlar

JavaScript'te Web Animations API, aynısını elde etmek için kullanılabilir. Bunu yeni Animation ve KeyFrameEffect örnekleri oluşturarak veya çok daha kısa Element animate() yöntemini kullanarak yapabilirsiniz.

document.querySelector('#progressbar').animate(
  {
    backgroundColor: ['red', 'darkred'],
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    duration: 2500,
    fill: 'forwards',
    easing: 'linear',
   }
);

Yukarıdaki JavaScript snippet'inin bu görsel sonucu, önceki CSS sürümüyle aynı.

Animasyon zaman çizelgeleri

Bir öğeye eklenen animasyon, varsayılan olarak doküman zaman çizelgesinde yayınlanır. Başlangıç zamanı, sayfa yüklendiğinde 0'dan başlar ve saat ilerledikçe ileriye doğru akmaya başlar. Bu, varsayılan animasyon zaman çizelgesidir ve şu ana kadar erişebildiğiniz tek animasyon zaman çizelgesidir.

Kaydırma Odaklı Animasyonlar Spesifikasyonu, kullanabileceğiniz iki yeni zaman çizelgesi türü tanımlar:

  • Kaydırma İlerleme Zaman Çizelgesi: Bir kaydırma kapsayıcısının belirli bir eksendeki kaydırma konumuna bağlı zaman çizelgesi.
  • İlerleme Zaman Çizelgesini Görüntüleme: Belirli bir öğenin kaydırma kapsayıcısı içindeki göreli konumuna bağlı bir zaman çizelgesi.

Kaydırma İlerlemesi Zaman Çizelgesi

Kaydırma İlerleme Zaman Çizelgesi, belirli bir eksende bir kaydırma kapsayıcısının (scrollport veya scroller olarak da adlandırılır) kaydırma konumundaki ilerlemeye bağlı bir animasyon zaman çizelgesidir. Kaydırma aralığındaki bir konumu 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ı yukarıdan aşağıya doğru kaydırdığınızda ilerlemenin% 0'dan% 100'e çıktığını görebilirsiniz.

Kaydırma İlerlemesi Zaman Çizelgesinin görselleştirilmesi. Kaydırma çubuğunun en altına doğru ilerledikçe ilerleme değeri% 0'dan %100'e doğru sayılır.

✨ Kendiniz deneyin

Kaydırma İlerleme Zaman Çizelgesi, genellikle "Kaydırma Zaman Çizelgesi" şeklinde kısaltılır.

İ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ü izleyebilen IntersectionObserver özelliğinin işleyişine biraz benzer. Öğ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 konu, kaydırma kapsayıcıdan ayrıldığı anda% 100'e ulaştığını görebilirsiniz.

Görüntüleme İlerleme Zaman Çizelgesinin görselleştirilmesi. Konu (yeşil kutu) kaydırıcıyı geçtiğinde ilerleme% 0'dan% 100'e kadar artar.

✨ Kendiniz deneyin

Görüntüleme İlerleme Zaman Çizelgesi, genellikle "Zaman Çizelgesini Görüntüle" şeklinde kısaltılır. Görünüm Zaman Çizelgesi'nin belirli bölümlerini öznenin boyutuna göre hedeflemek mümkündür, ancak daha sonra bu işlevle ilgili daha fazla bilgi verilebilir.

Kaydırma İlerleme Zaman Çizelgeleri ile pratik yapma

CSS'de anonim Kaydırma İlerleme Zaman Çizelgesi oluşturma

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

Örnek:

@keyframes animate-it { … }

.subject {
  animation: animate-it linear;
  animation-timeline: scroll(root block);
}
.

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 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.

Örneğin, bir animasyonu blok eksenindeki kök kaydırma çubuğuna bağlamak için scroll() öğesine aktarılacak değerler root ve block'dir. Toplanan değer scroll(root block) olur.

Demo: Okuma ilerleme durumu göstergesi

Bu demoda, görüntü alanının üst kısmına sabitlenmiş bir okuma ilerleme durumu göstergesi vardır. Siz sayfayı aşağı kaydırdıkça, dokümanın sonuna ulaştığında ilerleme çubuğu tam görüntü alanı genişliğini kaplayana kadar büyür. Animasyonu yürütmek için anonim bir Kaydırma İlerleme Zaman Çizelgesi kullanılıyor.

Demo: Okuma ilerleme göstergesi.

✨ Kendiniz deneyin

Okuma ilerleme durumu göstergesi, sabit konum kullanılarak sayfanın üst kısmına yerleştirilir. Birleştirilmiş animasyonlardan yararlanmak için width canlandırılmaz ancak öğe, transform kullanılarak x ekseninde küçültülür.

<body>
  <div id="progress"></div>
  …
</body>

@keyframes grow-progress {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

#progress {
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 1em;
  background: red;

  transform-origin: 0 50%;
  animation: grow-progress auto linear;
  animation-timeline: scroll();
}

#progress öğesindeki grow-progress animasyonunun zaman çizelgesi, scroll() kullanılarak oluşturulan anonim bir zaman çizelgesine ayarlanır. scroll() için bağımsız değişken kullanılmadığından varsayılan değerleri kullanılır.

İzlenecek varsayılan kaydırma çubuğu nearest, varsayılan eksen ise block. Bu işlem, blok yönünü izlerken #progress öğesinin en yakın kaydırıcısı olan kök kaydırma çubuğunu etkili bir şekilde hedefler.

CSS'de adlandırılmış Kaydırma İlerleme Zaman Çizelgesi oluşturma

Kaydırma İlerleme Zaman Çizelgesi'ni tanımlamanın alternatif bir yolu, adlandırılmış bir zaman çizelgesi kullanmaktır. Biraz daha ayrıntılı olsa da bir üst kaydırıcıyı veya kök kaydırıcıyı hedeflemediğinizde, sayfada birden fazla zaman çizelgesi kullandığında ya da otomatik aramalar çalışmadığında kullanışlı olabilir. Bu şekilde, Kaydırma İlerleme Zaman Çizelgesi'ni ona verdiğiniz ada göre tanımlayabilirsiniz.

Bir öğede adlandırılmış Kaydırma İlerleme Zaman Çizelgesi'ni oluşturmak için kaydırma kapsayıcısındaki scroll-timeline-name CSS özelliğini istediğiniz bir tanımlayıcıya ayarlayın. Değer -- ile başlamalıdır.

Hangi eksenin izleneceğini ayarlamak için ayrıca scroll-timeline-axis özelliğini de bildirin. İ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.

Kod Örneği:

@keyframes animate-it { … }

.scroller {
  scroll-timeline-name: --my-scroller;
  scroll-timeline-axis: inline;
}

.scroller .subject {
  animation: animate-it linear;
  animation-timeline: --my-scroller;
}

Dilerseniz scroll-timeline-name ve scroll-timeline-axis ile scroll-timeline kısalarını birleştirebilirsiniz. Örneğin:

scroll-timeline: --my-scroller inline;
.

Bu demoda, her bir resim bandının üzerinde bir adım göstergesi bulunur. Bir bant üç resim içerdiğinde, gösterge çubuğu% 33 genişlikten başlar ve o anda üç resimden birincisine baktığınızı belirtir. Son resim görünümde olduğunda (kaydırıcının sonuna kadar kaydırması tarafından belirlendiğinde), gösterge kaydırıcının tam genişliğini kaplar. Animasyonu yürütmek için adlandırılmış bir Kaydırma İlerleme Zaman Çizelgesi kullanılır.

Demo: Yatay bant adım göstergesi.

✨ Kendiniz deneyin

Bir galerinin temel işaretleme şu şekildedir:

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

.gallery__progress öğesi, kesinlikle .gallery sarmalayıcı öğesinin içinde bulunuyor. İlk boyutu, --num-images özel özelliği tarafından belirlenir.

.gallery {
  position: relative;
}


.gallery__progress {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 1em;
  transform: scaleX(calc(1 / var(--num-images)));
}

.gallery__scrollcontainer, içerdiği .gallery__entry öğelerini yatay olarak düzenler ve kayan öğedir. Kaydırma konumu izlendiğinde .gallery__progress canlandırılır. Bu işlem, "Kaydırma İlerlemesi Zaman Çizelgesi" adlı --gallery__scrollcontainer kullanılarak yapılır.

@keyframes grow-progress {
  to { transform: scaleX(1); }
}

.gallery__scrollcontainer {
  overflow-x: scroll;
  scroll-timeline: --gallery__scrollcontainer inline;
}
.gallery__progress {
  animation: auto grow-progress linear forwards;
  animation-timeline: --gallery__scrollcontainer;
}
.

JavaScript ile Kaydırma İlerlemesi Zaman Çizelgesi Oluşturma

JavaScript'te Kaydırma Zaman Çizelgesi oluşturmak için ScrollTimeline sınıfının yeni bir örneğini oluşturun. Takip etmek istediğiniz source ve axis ile bir mülk çantasını geçin.

  • source: Kaydırıcısını izlemek istediğiniz öğeye referans. Kök kaydırıcıyı hedeflemek için document.documentElement kullanın.
  • axis: Hangi eksenin izleneceğini belirler. CSS varyantına benzer şekilde block, inline, x ve y değerleri kabul edilir.
const tl = new ScrollTimeline({
  source: document.documentElement,
});

Etiketi bir Web Animasyonuna eklemek için timeline özelliği olarak iletin ve varsa duration özelliğini atlayın.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
});

Demo: Okuma ilerleme durumu göstergesi, yeniden ziyaret edildi

Aynı işaretlemeyi kullanırken okuma ilerleme durumu göstergesini JavaScript ile yeniden oluşturmak için aşağıdaki JavaScript kodunu kullanın:

const $progressbar = document.querySelector('#progress');

$progressbar.style.transformOrigin = '0% 50%';
$progressbar.animate(
  {
    transform: ['scaleX(0)', 'scaleX(1)'],
  },
  {
    fill: 'forwards',
    timeline: new ScrollTimeline({
      source: document.documentElement,
    }),
  }
);

Görsel sonuç, CSS sürümünde aynıdır: Oluşturulan timeline, kök kaydırıcıyı izler ve siz sayfayı kaydırırken #progress eksenini x ekseninde% 0'dan% 100'e ölçeklendirir.

✨ Kendiniz deneyin

İlerleme Zaman Çizelgesini Görüntüleme ile pratik yapma

CSS'de Anonim Görüntüleme İlerleme Zaman Çizelgesi Oluşturma

İlerleme Zaman Çizelgesini Görüntüleme oluşturmak için view() işlevini kullanın. 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. Varsayılan değer block değeridir.
  • <view-timeline-inset> ile bir öğenin görünümde olup olmadığı düşünüldüğünde sınırları ayarlamak için bir ofset (pozitif veya negatif) belirtebilirsiniz. Bu değer bir yüzde veya auto olup auto varsayılan değer olmalıdır.

Örneğin, bir animasyonu blok ekseninde kaydırıcıyla kesişen bir öğeye bağlamak için view(block) işlevini kullanın. scroll() özelliğine benzer şekilde, bunu animation-timeline özelliğinin değeri olarak ayarlayın ve animation-duration özelliğini auto olarak ayarlamayı unutmayın.

Aşağıdaki kodu kullandığınızda, siz sayfayı kaydırırken her img görüntü alanından geçerken kararır.

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

img {
  animation: reveal linear;
  animation-timeline: view();
}
.

Intermezzo: Zaman Çizelgesi aralıklarını görüntüleyin

Varsayılan olarak, Zaman Çizelgesi Görünümü'ne bağlı bir animasyon, zaman çizelgesi aralığının tamamına eklenir. Bu işlem, konu kaydırma bağlantı noktasına girmek üzere olduğu anda başlar ve konu kaydırma bağlantı noktasından tamamen ayrıldığında sona erer.

Eklenmesi gereken aralığı belirterek zaman çizelgesini Görünüm 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.

Konunun giriş aralığını takip etmek için ayarlanmış zaman çizelgesi görünümü. Animasyon yalnızca konu kaydırma alanına girerken çalışır.

Hedefleyebileceğiniz olası Zaman Çizelgesi görüntüleme aralıkları şunlardır:

  • cover: Görüntüleme ilerleme zaman çizelgesinin tüm aralığını gösterir.
  • entry: Ana hesap kutusunun, görüntüleme ilerleme durumu görünürlük aralığına girdiği aralığı gösterir.
  • exit: Ana hesap kutusunun, görüntüleme ilerleme durumu görünürlük aralığından çıktığı aralığı gösterir.
  • entry-crossing: Ana kutunun son kenarlık kenarını geçtiği aralığı gösterir.
  • exit-crossing: Ana kutunun başlangıç kenarlığı kenarını geçtiği aralığı gösterir.
  • contain: Ana hesap kutusunun, kaydırma bağlantı noktası içindeki görüntüleme ilerleme durumu görünürlük aralığı kapsamında 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.

Bir aralık tanımlamak için aralık-başlangıç ve aralık-sonu ayarlamanız gerekir. Her biri aralık adı (yukarıdaki listeye bakın) ve söz konusu aralık adı içindeki konumu belirlemek için bir aralık uzaklığından oluşur. Aralık uzaklığı genellikle 0% - 100% aralığında bir yüzdedir, ancak 20em gibi sabit bir uzunluk da belirtebilirsiniz.

Örneğin, konu girildiği andan itibaren bir animasyon çalıştırmak istiyorsanız aralık başlangıcı olarak entry 0% öğesini seçin. Görevin konu girildiği sırada tamamlanması için aralık sonu değeri olarak entry 100%'yi seçin.

CSS'de bunu animation-range özelliğini kullanarak ayarlarsınız. Örnek:

animation-range: entry 0% entry 100%;

JavaScript'te rangeStart ve rangeEnd özelliklerini kullanın.

$el.animate(
  keyframes,
  {
    timeline: tl,
    rangeStart: 'entry 0%',
    rangeEnd: 'entry 100%',
  }
);

Her bir aralık adının neyi temsil ettiğini ve yüzdelerin başlangıç ve bitiş konumlarını nasıl etkilediğini görmek için aşağıda yerleşik olan aracı kullanın. Animasyon sonucunu görmek için aralığın başlangıcını entry 0% ve aralık sonunu cover 50% olarak ayarlamayı deneyin, ardından kaydırma çubuğunu sürükleyin.

Zaman Çizelgesi Aralıkları Görselleştirici'yi https://goo.gle/view-timeline-range-tool adresinde bulabilirsiniz

Kaydı izleme

Bu Zaman Çizelgesi Aralıkları Görünümü aracıyla oynarken de fark edebileceğiniz gibi, bazı aralıklar iki farklı aralık adı + aralık-ofset kombinasyonuyla hedeflenebilir. Örneğin, entry 0%, entry-crossing 0% ve cover 0% aynı alanı hedefliyor.

Aralık başlangıcı ve aralık sonu aynı aralık adını hedefliyorsa ve% 0'dan %100'e kadar aralığın tamamını kapsıyorsa değeri yalnızca aralık adını içerecek şekilde kısaltabilirsiniz. Örneğin, animation-range: entry 0% entry 100%; çok daha kısa olan animation-range: entry olarak yeniden yazılabilir.

Demo: Resim gösterme

Bu demo, resimler kaydırma noktasına girdiklerinde görünür hale gelir. Bu işlem, Anonim Görünüm Zaman Çizelgesi kullanılarak yapılır. Animasyon aralığı, her bir resim kaydırıcının yarısına gelindiğinde tam opaklığa sahip olacak şekilde ayarlandı.

Demo: Resmin açıklanması

✨ Kendiniz deneyin

Genişletme efekti, animasyonlu bir klip yolu kullanılarak elde edilir. Bu efekt için kullanılan CSS:

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

.revealing-image {
  animation: auto linear reveal both;
  animation-timeline: view();
  animation-range: entry 25% cover 50%;
}

CSS'de adlandırılmış bir ilerleme durumunu görüntüleme zaman çizelgesini görüntüleme

Kaydırma Zaman Çizelgeleri'nin adlandırılmış sürümleri olmasına benzer şekilde, adlandırılmış Zaman Çizelgeleri de oluşturabilirsiniz. scroll-timeline-* özellikleri yerine view-timeline- ön ekini (view-timeline-name ve view-timeline-axis) taşıyan varyantları kullanıyorsunuz.

Aynı tür değerler geçerlidir ve adlandırılmış bir zaman çizelgesini aramak için aynı kurallar geçerlidir.

Demo: Resmin ortaya çıkarılması, yeniden ziyaret edildi

Önceki resmin gösterilmesi için verilen demo yeniden düzenlendiğinde, revize edilen kod aşağıdaki gibi görünür:

.revealing-image {
  view-timeline-name: --revealing-image;
  view-timeline-axis: block;

  animation: auto linear reveal both;
  animation-timeline: --revealing-image;
  animation-range: entry 25% cover 50%;
}

view-timeline-name: revealing-image kullanılarak öğe, en yakındaki kaydırma çubuğunda izlenir. Daha sonra aynı değer, animation-timeline özelliğinin değeri olarak kullanılır. Görsel çıkış öncekiyle tam olarak aynıdır.

✨ Kendiniz deneyin

JavaScript'te Görüntüleme İlerleme Zaman Çizelgesi Oluşturma

JavaScript'te Görünüm Zaman Çizelgesi oluşturmak için ViewTimeline sınıfının yeni bir örneğini oluşturun. Takip etmek istediğiniz subject, axis ve inset çantalarını ekleyin.

  • subject: Kendi kaydırma çubuğunda izlemek istediğiniz öğeye referans.
  • axis: İzlenecek eksen. CSS varyantına benzer şekilde block, inline, x ve y değerleri kabul edilir.
  • inset: Kutunun görünür durumda olup olmadığı belirlenirken kaydırma noktasının ek (pozitif) veya dışa dönük (negatif) düzenlemesi.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Etiketi bir Web Animasyonuna eklemek için timeline özelliği olarak iletin ve varsa duration özelliğini atlayın. İsterseniz rangeStart ve rangeEnd özelliklerini kullanarak aralık bilgilerini aktarabilirsiniz.

$el.animate({
  opacity: [0, 1],
}, {
  timeline: tl,
  rangeStart: 'entry 25%',
  rangeEnd: 'cover 50%',
});

✨ Kendiniz deneyin

Deneyebileceğiniz diğer şeyler

Bir animasyon karesi grubu içeren birden fazla Zaman Çizelgesi Görünümü aralığına ekleme

Liste girişlerinin animasyonlu olduğu bu kişi listesi demosuna bakalım. Bir liste girişi, kaydırma alanına alttan girdikçe kayarak içeri girer ve üstteki kaydırma noktasından çıktığında kayarak kaybolur.

Demo: Kişi listesi

✨ Kendiniz deneyin

Bu demoda her öğe, kaydırma bağlantı noktasından geçerken izleyen bir Görünüm Zaman Çizelgesi ile dekore edilmiştir ancak kaydırmaya dayalı iki animasyon buna eklenmiştir. animate-in animasyonu, zaman çizelgesinin entry aralığına ve animate-out animasyonu zaman çizelgesinin exit aralığına ekli.

@keyframes animate-in {
  0% { opacity: 0; transform: translateY(100%); }
  100% { opacity: 1; transform: translateY(0); }
}
@keyframes animate-out {
  0% { opacity: 1; transform: translateY(0); }
  100% { opacity: 0; transform: translateY(-100%); }
}

#list-view li {
  animation: animate-in linear forwards,
             animate-out linear forwards;
  animation-timeline: view();
  animation-range: entry, exit;
}

İki farklı aralığa ekli iki farklı animasyon çalıştırmak yerine, aralık bilgilerini zaten içeren bir animasyon karesi grubu oluşturmak da mümkündür.

@keyframes animate-in-and-out {
  entry 0%  {
    opacity: 0; transform: translateY(100%);
  }
  entry 100%  {
    opacity: 1; transform: translateY(0);
  }
  exit 0% {
    opacity: 1; transform: translateY(0);
  }
  exit 100% {
    opacity: 0; transform: translateY(-100%);
  }
}

#list-view li {
  animation: linear animate-in-and-out;
  animation-timeline: view();
}

Animasyon kareleri aralık bilgilerini içerdiğinden animation-range öğesini belirtmeniz gerekmez. Sonuç, öncekiyle tam olarak aynıdır.

✨ Kendiniz deneyin

Üst öğe olmayan Kaydırma Zaman Çizelgesi'ne ekleme

Adlandırılmış Kaydırma Zaman Çizelgeleri ve adlandırılmış Zaman Çizelgeleri için arama mekanizması, yalnızca üst öğelerin kaydırılmasıyla sınırlıdır. Bununla birlikte, animasyon eklenmesi gereken öğe genellikle izlenmesi gereken kaydırıcının alt öğesi değildir.

Bunun işe yaraması için timeline-scope özelliği devreye girer. Bu özelliği, gerçekten oluşturmadan bu adla bir zaman çizelgesi bildirmek için kullanırsınız. Böylece bu ada sahip olan takvim daha geniş kapsamlı olur. Pratikte, bir alt kaydırma çubuğunun zaman çizelgesinin bu öğeye eklenebilmesi için paylaşılan bir üst öğede timeline-scope özelliğini kullanırsınız.

Örneğin:

.parent {
  timeline-scope: --tl;
}
.parent .scroller {
  scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
  animation: animate linear;
  animation-timeline: --tl;
}

Bu snippet'te:

  • .parent öğesi, --tl adlı bir zaman çizelgesi bildiriyor. Herhangi bir alt öğesi bunu bulabilir ve animation-timeline özelliğinin değeri olarak kullanabilir.
  • .scroller öğesi aslında --tl adlı bir Kaydırma Zaman Çizelgesini tanımlar. Varsayılan olarak yalnızca alt öğeleri tarafından görülebilir, ancak .parent, scroll-timeline-root olarak ayarlandığı için bu öğeye eklenir.
  • .subject öğesi, --tl zaman çizelgesini kullanır. Ata ağacında yürür ve .parent üzerinde --tl bulunur. .parent üzerindeki --tl öğesi .scroller öğesinin --tl öğesini gösterdiğinde .subject aslında .scroller için kaydırma ilerleme durumu zaman çizelgesini izler.

Farklı bir şekilde ifade edersek, zaman çizelgesini üst öğeye doğru taşımak (kaldırma) için timeline-root kullanabilirsiniz. Böylece üst öğe, tüm alt öğeleri bu öğeye erişebilir.

timeline-scope özelliği hem Kaydırma Zaman Çizelgeleri hem de Zaman Çizelgeleri ile kullanılabilir.

Diğer demolar ve kaynaklar

Bu makalede ele alınan tüm demolar Scroll-based-animations.style mini-sitesinde görüntülenebilir. Web sitesinde, kaydırmaya dayalı animasyonlarla neler yapılabileceğini vurgulayan çok daha fazla demo bulunuyor.

Ek demolardan biri de albüm kapaklarının yer aldığı listedir. Her kapak merkezdeki sahneyi alırken 3D olarak döner.

Demo: Kapanış Akışı

✨ Kendiniz deneyin

Ayrıca, position: sticky kullanan deste kartları demosu da buna dahildir. Kartlar yığıldıkça, zaten takılı kalan kartlar küçülüp güzel bir derinlik efekti oluşturur. Sonunda, tüm grup grup halinde görünümden çıkar.

Demo: Yığılmış kartlar.

✨ Kendiniz deneyin

Ayrıca scroll-through-animations.style, bu yayının başlarında yer alan "Zaman Çizelgesi Aralığı İlerlemesini Göster" görselleştirmesi gibi araçlardan oluşan bir koleksiyona da yer verilmiştir.

Kaydırma odaklı animasyonlar, Google I/O 2023'te Web Animasyonlarındaki Yenilikler bölümünde de ele alınmıştır.