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

Kaydırma odaklı animasyonlar

Tarayıcı desteği

  • Chrome: 115.
  • Edge: 115.
  • Firefox: İşaretli.
  • Safari: desteklenmez.

Kaynak

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ırmaya dayalı animasyona benzer bir tür olan, bir öğenin kaydırma kapsayıcısı içindeki konumuna bağlanan 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 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şlemde gerçekleştirir ve bu nedenle kaydırma etkinliklerini eşzamansız olarak yayınlar.
  • Ana iş parçacığı animasyonları jant'a 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 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 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 özelliğini kullanarak öğeyi bir öğeye bağlarken animasyonun ne kadar süreceğini belirlemek için animation-duration ayarlayın. animation-* uzun biçimli özelliklerinin (animation-easing-function ve animation-fill-mode bunlardan yalnızca 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 akmaya başlar. Bu, varsayılan animasyon zaman çizelgesidir ve şimdiye 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 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üleme: Belirli bir öğenin kaydırma kapsayıcısı içindeki göreli 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 ilerleme durumunu, bitiş kaydırma konumu ise% 100 ilerleme durumunu 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 İ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 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ü, bir öğenin kaydırma kapsayıcısı içindeki göreli ilerlemesiyle bağlantı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şine benzer. Öğe kaydırma çubuğunda görünmüyorsa kesişmiyordur. Kaydırma çubuğunun içinde görünüyorsa (en küçük parçada bile) 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ö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.

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

✨ Kendiniz deneyin

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

Kaydırma ilerleme zaman çizelgelerini pratik bir şekilde 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ı (varsayılan) kullanır.
  • root: Kaydırma kapsayıcısı olarak belge görüntü alanını 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 ekseni boyunca ilerleme ölçümü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ı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. 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 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 çizelgesi olarak 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 aynı zamanda 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ış 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 değiştirmek 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 öğ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;
}

İ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ç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ö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 galeri için 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, .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 animasyonlu hale gelir. 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. Takip etmek istediğiniz source ve axis ile bir mülk çantasını geçin.

  • 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,
});

Etiketi bir Web Animasyonuna eklemek için timeline özelliği olarak aktarın ve varsa duration özelliğini atlayı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 durumunu görüntüleme zaman çizelgesi ile 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'ndeki ile 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();
}

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 etkinlik, öznenin kaydırma çubuğuna girmek üzere olduğu andan başlar ve özne kaydırma çubuğundan tamamen çıktığı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 durum yalnızca özne kaydırma çubuğuna girerken gerçekleşebilir. 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ı 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ı 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 kutunun, görüntüleme ilerleme görünürlük aralığından çıktığı aralığı temsil eder.
  • 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 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 uzaklığı genellikle 0% - 100% aralığında 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%'yi 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 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 hedeflenebiliyor. Ö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ığı kapsadığı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ığı, her bir resim kaydırıcının yarısına gelindiğinde tam opaklığa sahip olacak şekilde ayarlandı.

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 ilerleme durumunu görüntüleme zaman çizelgesini görüntüleme

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 geçerlidir ve adlandırılmış bir zaman çizelgesini aramak için 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'de 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. Takip etmek istediğiniz subject, axis ve inset çantalarını ekleyin.

  • 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ü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'),
});

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

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

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

✨ Kendiniz deneyin

Üst öğesi olmayan bir Kaydırma Zaman Çizelgesi'ne 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 çoğu zaman, animasyon uygulanması gereken öğe, 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. Böylece bu ada sahip olan takvim daha geniş bir kapsamda yer alıyor. 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 bildiriyor. 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 odaklı 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 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. En sonunda, tüm grup bir grup halinde görünümden çıkar.

Demo: Yığın kartları.

✨ Kendiniz deneyin

Ayrıca scroll-driven-animations.style, bu gönderinin başlarında 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.