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

Kaydırma odaklı animasyonlar oluşturmak için Kaydırma Zaman Çizelgeleri ve Görünüm Zaman Çizelgeleri ile nasıl çalışacağınızı öğrenin.

Bramus

Yayınlanma tarihi: 5 Mayıs 2023

Kaydırmayla çalışan animasyonlar

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: not supported.

Source

Kaydırmayla çalışan animasyonlar, web'de yaygın olarak kullanılan bir kullanıcı deneyimi modelidir. Kaydırma odaklı animasyon, kaydırma kapsayıcısının kaydırma konumuna bağlıdır. Bu, siz yukarı veya aşağı kaydırırken bağlı animasyonun doğrudan yanıt olarak ileri veya geri sarmaladığı anlamına gelir. Paralaks arka plan resimleri veya siz kaydırırken hareket eden okuma göstergeleri gibi efektler buna örnek gösterilebilir.

Kaydırmayla çalışan, belgenin üst kısmındaki okuma göstergesi.

Kaydırma odaklı animasyona benzer bir tür de öğenin kaydırma kapsayıcısındaki konumuna bağlı bir animasyondur. Örneğin, öğeler görüntüye girerken yavaşça görünebilir.

Bu sayfadaki resimler görüntüye geldikçe yavaş yavaş görünür hale gelir.

Bu tür efektleri elde etmenin klasik yolu, ana mesaj dizisindeki 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şlemde gerçekleştirir ve bu nedenle kaydırma etkinliklerini eşzamansız olarak yayınlar.
  • Ana iş parçacığı animasyonları takılmalara tabidir.

Bu durum, kaydırmayla senkronize çalışan ve yüksek performanslı kaydırma animasyonlarının oluşturulmasını imkansız veya çok zor hale getirir.

Chrome 115 sürümünden itibaren, açıklayıcı kaydırma odaklı animasyonları etkinleştirmek için kullanabileceğiniz yeni bir API ve kavram grubu vardır: Kaydırma Zaman Çizelgeleri ve Zaman Çizelgelerini Görüntüleme.

Bu yeni kavramlar, mevcut Web Animasyonları API'si (WAAPI) ve CSS Animasyonları API'si ile entegre olur. Böylece, mevcut API'lerin sunduğu avantajlardan yararlanabilirler. Kaydırmayla çalışan animasyonların ana iş parçacığında çalıştırılmasına olanak tanır. Evet, doğru okudunuz: Artık yalnızca birkaç satır ek kodla kaydırmayla çalışan, ana iş parçacığında çalışan, son derece akıcı animasyonlar oluşturabilirsiniz. Neleri beğenmeyebilirsiniz?

Web'deki animasyonlar hakkında kısa bir özet

CSS ile web'de animasyonlar

CSS'de animasyon oluşturmak için @keyframes at-kuralı kullanarak bir animasyon karesi grubu tanımlayın. animation-name mülkünü kullanarak bir öğeye bağlayın ve animasyonun ne kadar süreceğini belirlemek için bir animation-duration ayarlayın. animation-* uzun biçimli özelliklerinin (animation-easing-function ve animation-fill-mode bunlardan birkaçı) tümü animation kısa biçiminde birleştirilebilir.

Örneğin, aşağıdaki animasyonda X eksenindeki bir öğe büyütülürken arka plan rengi de değiştirilmektedir:

@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;
}
başlıklı makaleyi inceleyin.

JavaScript ile web'de animasyonlar

JavaScript'te, tam olarak aynı sonucu elde etmek için Web Animasyonları API'si kullanılabilir. Bunu yeni Animation ve KeyFrameEffect örnekleri oluşturarak veya çok daha kısa olan 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ıdır.

Animasyon zaman çizelgeleri

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

Kaydırmayla çalışan animasyon spesifikasyonu, kullanabileceğiniz iki yeni zaman çizelgesi türünü tanımlar:

  • Kaydırma ilerleme zaman çizelgesi: Belirli bir eksen boyunca kaydırma kapsayıcısının kaydırma konumuna bağlı bir zaman çizelgesi.
  • İlerleme Zaman Çizelgesini Görüntüle: Belirli bir öğenin kaydırma kapsayıcısındaki göreceli konumuna bağlı bir zaman çizelgesi.

İlerleme zaman çizelgesini kaydırın

Kaydırma ilerleme zaman çizelgesi, belirli bir eksen boyunca kaydırma alanı veya kaydırma çubuğu olarak da adlandırılan kaydırma kapsayıcısının kaydırma konumundaki ilerlemeyle bağlantı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 ilerlemeyi, bitiş kaydırma konumu ise% 100 ilerlemeyi temsil eder. Aşağıdaki görselde, kaydırma çubuğunu yukarıdan aşağıya doğru kaydırdığınızda ilerlemenin% 0'dan% 100'e kadar sayıldığını görebilirsiniz.

Kaydırma ilerleme zaman çizelgesinin görselleştirmesi. Kaydırma çubuğunun en altına doğru ilerledikçe ilerleme değeri% 0'dan %100'e doğru artar.

✨ Kendiniz deneyin

Kaydırma ilerleme zaman çizelgesi genellikle "Kaydırma zaman çizelgesi" olarak kısaltılır.

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

Bu zaman çizelgesi türü, kaydırma kapsayıcısındaki belirli bir öğenin göreceli ilerleme durumuna bağlıdır. Kaydırma ilerleme zaman çizelgesi gibi, kaydırma çubuğunun kaydırma ofseti de izlenir. Kaydırma ilerleme zaman çizelgesinin aksine, ilerlemeyi belirleyen şey, bir öznenin kaydırma çubuğundaki göreli konumudur.

Bu, bir öğenin kaydırma çubuğunda ne kadar görünür olduğunu izleyebilen IntersectionObserver işlevinin işleyiş şekline benzer. Öğe kaydırma çubuğunda görünmüyorsa kesişme yoktur. Kaydırma çubuğunun içinde görünüyorsa (en küçük parça bile olsa) kesişiyor demektir.

Görüntüleme İlerleme Zaman Çizelgesi, bir öznenin kaydırma çubuğuyla kesişmeye başladığı andan başlar ve öznenin kaydırma çubuğuyla kesişmeyi bıraktığı anda sona erer. Aşağıdaki görselde, özne kaydırma kapsayıcısına girdiğinde ilerlemenin% 0'dan saymaya başladığını ve özne kaydırma kapsayıcısından çıktığı anda% 100'e ulaştığını görebilirsiniz.

Görüntüleme İlerleme Zaman Çizelgesi'nin görselleştirmesi. Özne (yeşil kutu) kaydırma çubuğunu geçerken ilerleme durumu% 0'dan% 100'e kadar sayar.

✨ Kendiniz deneyin

Görüntüleme ilerleme zaman çizelgesi genellikle "Görüntüleme zaman çizelgesi" olarak kısaltılır. Görüntüleme zaman çizelgesinin belirli bölümlerini öznenin boyutuna göre hedeflemek mümkündür ancak bu konu hakkında daha sonra daha fazla bilgi verilecektir.

Kaydırma ilerleme zaman çizelgelerini kullanma

CSS'de anonim bir kaydırma ilerleme 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 mülkünün 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 bir <scroller> ve bir <axis> bağımsız değişkeni 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 belge 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çümünü kullanır (varsayılan).
  • inline: Kaydırma kapsayıcının satır içi ekseni boyunca ilerleme ölçümünü kullanır.
  • y: Kaydırma kapsayıcının y ekseni boyunca ilerleme ölçümünü kullanır.
  • x: Kaydırma kapsayıcının x ekseni boyunca ilerleme ölçümünü kullanır.

Örneğin, bir animasyonu blok eksenindeki kök kaydırma çubuğuna bağlamak için scroll() parametresine root ve block değerleri gönderilir. Bu değerlerin toplamı scroll(root block)'tür.

Demo: Okuma ilerleme göstergesi

Bu demoda, görüntü alanının üst kısmına sabitlenmiş bir okuma ilerleme göstergesi vardır. Sayfayı aşağı kaydırdığınızda ilerleme çubuğu, dokümanın sonuna ulaştığında görüntü alanının tamamını kaplayacak şekilde büyür. Animasyonu yönlendirmek için anonim bir Kaydırma İlerleme Zaman Çizelgesi kullanılır.

Demo: Okuma ilerleme göstergesi.

✨ Kendiniz deneyin

Okuma ilerleme göstergesi, sabit konum kullanılarak sayfanın en üstüne yerleştirilir. Kompozit animasyonlardan yararlanmak için width değil, öğe bir 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() bağımsız değişkenine bağımsız değişken verilmediğinden varsayılan değerlerine geri döner.

İzlenecek varsayılan kaydırma çubuğu nearest, varsayılan eksen ise block'dur. Bu, #progress öğesine en yakın kaydırma çubuğu olduğu için kök kaydırma çubuğunu etkili bir şekilde hedefler ve blok yönünü izler.

CSS'de adlandırılmış bir kaydırma ilerleme zaman çizelgesi oluşturma

Kaydırma ilerleme zaman çizelgesi tanımlamanın alternatif bir yolu, adlandırılmış bir zaman çizelgesi kullanmaktır. Bu yöntem biraz daha ayrıntılı olsa da üst kaydırma çubuğunu veya kök kaydırma çubuğunu hedeflemediğiniz, sayfanın birden fazla zaman çizelgesi kullandığı veya otomatik aramaların çalışmadığı durumlarda yararlı olabilir. Bu sayede, kaydırma ilerleme zaman çizelgesini verdiğiniz adla tanımlayabilirsiniz.

Bir öğede adlandırılmış bir kaydırma ilerleme zaman çizelgesi oluşturmak için kaydırma kapsayıcısındaki scroll-timeline-name CSS mülkünü istediğiniz tanımlayıcıya ayarlayın. Değer -- ile başlamalıdır.

Hangi eksenin izleneceğini ayarlamak için scroll-timeline-axis mülkünü de belirtin. İzin verilen değerler, scroll() işlevinin <axis> bağımsız değişkeniyle aynıdır.

Son olarak, animasyonu Kaydırma İlerleme Zaman Çizelgesi'ne bağlamak için animasyon uygulanması gereken öğedeki animation-timeline mülkünü, 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;
}

İsterseniz scroll-timeline-name ve scroll-timeline-axis kısaltmalarını scroll-timeline kısaltmasında birleştirebilirsiniz. Örneğin:

scroll-timeline: --my-scroller inline;

Bu demoda, her resim bandının üzerinde bir adım göstergesi gösterilmektedir. Bir bant üç resim içeriyorsa gösterge çubuğu, şu anda üç resimden birine baktığınızı belirtmek için% 33 genişlikte başlar. Son resim görüntüdeyken (kaydırma çubuğunun sona kaydırılmasına göre belirlenir) gösterge, kaydırma çubuğunun tüm genişliğini kaplar. Animasyonu yönlendirmek 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şaretlemesi ş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, .gallery sarmalayıcı öğesi içinde mutlak olarak konumlandırılmıştır. Başlangıç boyutu, --num-images özel mülküne göre 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 kaydırılan öğedir. Kaydırma konumu izlenerek .gallery__progress animasyonuna başlanır. Bu işlem, adlandırılmış Kaydırma İlerleme Zaman Çizelgesi --gallery__scrollcontainer'ne başvurarak 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 İlerleme 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. İzlemek istediğiniz source ve axis öğelerini içeren bir mülk çantası gönderin.

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

Bir web animasyonuna eklemek için timeline mülkü olarak iletin ve varsa duration öğelerini çıkarın.

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

Demo: Okuma ilerleme göstergesi, yeniden ziyaret edildi

Aynı işaretlemeyi kullanarak okuma ilerleme 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ırma çubuğunu izler ve sayfayı kaydırırken #progress'yi x ekseninde% 0'dan% 100'e kadar ölçeklendirir.

✨ Kendiniz deneyin

İlerleme Zaman Çizelgesi'ni kullanarak pratik bilgiler

CSS'de anonim görüntüleme ilerleme zaman çizelgesi oluşturma

İlerleme durumunu görüntüleme zaman çizelgesi oluşturmak için view() işlevini kullanın. Kabul edilen bağımsız değişkenleri <axis> ve <view-timeline-inset>'dır.

  • <axis>, Kaydırma İlerleme Zaman Çizelgesi'ndekiyle aynıdır ve hangi eksenin izleneceğini tanımlar. Varsayılan değer: block.
  • <view-timeline-inset> ile, bir öğenin görünümde olup olmadığını belirlemek için sınırları ayarlamak üzere bir ofset (pozitif veya negatif) belirtebilirsiniz. Değer, yüzde veya auto olmalıdır. auto varsayılan değerdir.

Örneğin, bir animasyonu blok ekseninde kaydırma çubuğuyla kesişen bir öğeye bağlamak için view(block) öğesini kullanın. scroll()'e benzer şekilde, bunu animation-timeline mülkünün değeri olarak ayarlayın ve animation-duration değerini auto olarak ayarlamayı unutmayın.

Aşağıdaki kodu kullanarak, siz kaydırırken her img, görüntü alanını geçerken yavaşça görünür hale gelir.

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

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

Ara: Zaman çizelgesi aralıklarını görüntüleme

Görüntüleme zaman çizelgesine bağlı bir animasyon, varsayılan olarak zaman çizelgesi aralığının tamamına eklenir. Bu etkinlik, öznenin kaydırma çubuğuna girmek üzere olduğu andan başlar ve özne kaydırma çubuğundan tamamen çıktığında sona erer.

Ayrıca, ekleneceği aralığı belirterek Görüntüleme Zaman Çizelgesi'nin belirli bir bölümüne bağlayabilirsiniz. Örneğin, bu durum yalnızca özne kaydırma çubuğuna girerken olabilir. Aşağıdaki görselleştirmede, özne kaydırma kapsayıcısına girdiğinde ilerleme% 0'dan saymaya başlar ancak tamamen kesiştiği andan itibaren% 100'e ulaşır.

Konunun giriş aralığını izlemek için ayarlanmış bir görüntüleme zaman çizelgesi. Animasyon yalnızca özne kaydırma alanına girerken çalışır.

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

  • cover: Görüntüleme ilerleme zaman çizelgesinin tamamını gösterir.
  • entry: Ana kutunun görüntüleme ilerleme durumu görünürlük aralığına girdiği aralığı temsil eder.
  • exit: Ana kutunun, görüntüleme ilerleme durumunun görünürlük aralığından çıktığı aralığı temsil eder.
  • entry-crossing: Ana kutunun uç kenarlığıyla kesiştiği aralığı temsil eder.
  • exit-crossing: Ana kutunun başlangıç kenarlık kenarını geçtiği aralığı temsil eder.
  • contain: Ana kutunun, kaydırma alanındaki görüntüleme ilerleme görünürlük aralığının tamamını kapladığı veya bu aralığın tamamına sığdığı aralığı temsil eder. Bu, öznenin kaydırma çubuğundan daha uzun veya daha kısa olmasına bağlıdır.

Bir aralık tanımlamak için aralık başlangıcı ve aralık sonu ayarlamanız gerekir. Her biri, aralık adı (yukarıdaki listeye bakın) ve bu aralık adı içindeki konumu belirlemek için bir aralık ofsetinden oluşur. Aralık ofseti genellikle 0% ile 100% arasında değişen bir yüzdedir ancak 20em gibi sabit bir uzunluk da belirtebilirsiniz.

Örneğin, bir öznenin girdiği andan itibaren animasyon çalıştırmak istiyorsanız aralık başlangıcı olarak entry 0% seçeneğini belirleyin. Konunun girdiği zamana kadar bitmesini istiyorsanız aralık sonu değeri olarak entry 100% seçeneğini belirleyin.

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 aralık adının neyi temsil ettiğini ve yüzdelerin başlangıç ile bitiş konumlarını nasıl etkilediğini görmek için aşağıda yerleştirilmiş aracı kullanın. Başlangıç aralığını entry 0%, bitiş aralığını cover 50% olarak ayarlayıp animasyon sonucunu görmek için kaydırma çubuğunu sürükleyin.

Zaman Çizelgesi Aralıklarını Görüntüleme Görselleştiricisi (https://goo.gle/view-timeline-range-tool adresinde kullanılabilir)

Kayıt izleme

Zaman çizelgesi aralıklarını görüntüleme araçlarını kullanırken fark edebileceğiniz gibi, bazı aralıklar iki farklı aralık adı + aralık ofseti kombinasyonuyla hedeflenebilir. Örneğin, entry 0%, entry-crossing 0% ve cover 0% aynı bölgeyi hedefler.

range-start ve range-end aynı range-name değerini hedeflediğinde ve% 0 ile %100 arasındaki tüm aralığı kapladığında değeri yalnızca range-name olarak 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 demoda, kaydırma bölmesine giren resimler yavaş yavaş görünür hale gelir. Bu işlem, anonim görüntüleme zaman çizelgesi kullanılarak yapılır. Animasyon aralığı, kaydırma çubuğunun ortasına ulaşıldığında her bir resmin tam opaklıkta olması için değiştirildi.

Demo: Resim gösterme

✨ Kendiniz deneyin

Genişleme efekti, animasyonlu bir clip-path kullanılarak elde edilir. Bu efekt için kullanılan CSS şu şekildedir:

@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 görüntüleme ilerleme zaman çizelgesi oluşturma

Kaydırma zaman çizelgelerinin adlandırılmış sürümlerine benzer şekilde, adlandırılmış görüntüleme zaman çizelgeleri de oluşturabilirsiniz. scroll-timeline-* özellikleri yerine view-timeline- önekini taşıyan varyantları (view-timeline-name ve view-timeline-axis) kullanırsınız.

Aynı tür değerler ve adlandırılmış zaman çizelgesini aramayla ilgili aynı kurallar geçerlidir.

Demo: Resim gösterme, yeniden ziyaret

Daha önceki resim gösterme demosunu yeniden çalışarak düzeltilen kod şu şekilde 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ıldığında öğe, en yakın kaydırma çubuğunda izlenir. Ardından, aynı değer animation-timeline mülkü için değer olarak kullanılır. Görsel çıkış, öncekiyle aynıdır.

✨ Kendiniz deneyin

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

JavaScript'te Görüntüleme Zaman Çizelgesi oluşturmak için ViewTimeline sınıfının yeni bir örneğini oluşturun. İzlemek istediğiniz subject, axis ve inset öğelerini içeren bir mülk çantası gönderin.

  • subject: Kendi kaydırma çubuğunda izlemek istediğiniz öğeye referans verir.
  • axis: İzlenecek eksen. CSS varyantına benzer şekilde, kabul edilen değerler block, inline, x ve y'dır.
  • inset: Kutunun görünümde olup olmadığını belirlerken kaydırma çubuğunun içe (pozitif) veya dışa (negatif) ayarlaması.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Bir web animasyonuna eklemek için timeline mülkü olarak iletin ve varsa duration öğelerini çıkarın. İsteğe bağlı olarak rangeStart ve rangeEnd özelliklerini kullanarak aralık bilgilerini iletin.

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

✨ Kendiniz deneyin

Deneyebileceğiniz diğer özellikler

Tek bir animasyon karesi grubuyla birden fazla görüntüleme zaman çizelgesi aralığına ekleme

Liste girişlerinin animasyonlu olduğu bu kişi listesi demosuna göz atalım. Bir liste girişi kaydırma çubuğuna alttan girerken kaydırılır ve kaybolur, kaydırma çubuğundan üstten çıkarken kaydırılır ve kaybolur.

Demo: İletişim listesi

✨ Kendiniz deneyin

Bu demoda her öğe, kaydırma görüntü alanını geçerken öğeyi izleyen bir görüntüleme zaman çizelgesiyle süslenir ve öğeye iki kaydırma odaklı animasyon eklenir. animate-in animasyonu, zaman çizelgesinin entry aralığına, animate-out animasyonu ise zaman çizelgesinin exit aralığına eklenir.

@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 bağlı iki farklı animasyon çalıştırmak yerine, aralığı zaten içeren bir anahtar kare grubu oluşturabilirsiniz.

@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();
}

Ana kareler aralık bilgilerini içerdiğinden animation-range değerini belirtmeniz gerekmez. Sonuç, öncekiyle aynıdır.

✨ Kendiniz deneyin

Üst öğesi olmayan bir kaydırma zaman çizelgesine ekleme

Adlandırılmış Kaydırma Zaman Çizelgeleri ve adlandırılmış Görüntüleme Zaman Çizelgeleri için arama mekanizması yalnızca ata kaydırmalarla sınırlıdır. Ancak animasyon uygulanması gereken öğe, genellikle izlenmesi gereken kaydırma çubuğunun alt öğesi değildir.

Bu işlemin gerçekleşmesi için timeline-scope mülkü devreye girer. Bu özelliği, aslında oluşturmadan bu ada sahip bir zaman çizelgesi tanımlamak için kullanırsınız. Bu, söz konusu ada sahip zaman çizelgesine daha geniş bir kapsam verir. Uygulamada, bir alt kaydırma çubuğunun zaman çizelgesinin ona bağlanabilmesi için ortak bir üst öğede timeline-scope mülkünü 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 tanımlar. Alt öğeleri bu değeri bulup animation-timeline özelliği için değer olarak kullanabilir.
  • .scroller öğesi aslında --tl adlı bir Kaydırma Zaman Çizelgesi tanımlar. Varsayılan olarak yalnızca alt öğeleri tarafından görülebilir ancak .parent, scroll-timeline-root olarak ayarlandığından bu öğeye eklenir.
  • .subject öğesi --tl zaman çizelgesini kullanır. Atası ağacında yukarı doğru ilerler ve .parent üzerinde --tl'yi bulur. .parent üzerindeki --tl, .scroller'nin --tl'sini işaret ettiğinde .subject, temel olarak .scroller'nin Kaydırma İlerleme Zaman Çizelgesi'ni izler.

Başka bir deyişle, bir zaman çizelgesini bir üst öğeye taşımak için timeline-root kullanabilirsiniz (bu işleme yükseltme denir). Böylece, üst öğenin tüm alt öğeleri bu zaman çizelgesine erişebilir.

timeline-scope mülkü hem zaman çizelgelerini kaydırma hem de zaman çizelgelerini görüntüleme ile kullanılabilir.

Diğer demolar ve kaynaklar

Bu makalede ele alınan tüm demolar scroll-driven-animations.style mini sitesinde yer almaktadır. Web sitesinde, kaydırma destekli animasyonlarla neler yapılabileceğini gösteren daha birçok demo yer alır.

Ek demolardan biri de bu albüm kapaklı liste. Her kapak, merkezdeki spot ışığını alırken 3D olarak döner.

Demo: Cover Flow

✨ Kendiniz deneyin

Veya position: sticky'ten yararlanan bu kartları yığma demosunu inceleyebilirsiniz. Kartlar yığıldıkça, önceden yapıştırılmış kartlar küçültülerek güzel bir derinlik efekti oluşturulur. Sonunda, gruptaki tüm öğeler grup olarak görüntüden kaybolur.

Demo: Kartları yığma.

✨ Kendiniz deneyin

Ayrıca scroll-driven-animations.style, bu gönderinin önceki bölümlerinde yer alan Zaman Çizelgesi Aralığı İlerleme Görünümü gibi bir araç koleksiyonudur.

Kaydırmayla çalışan animasyonlar, Google I/O 2023'teki Web Animasyonlarında yenilikler başlıklı oturumda da ele alınacaktır.