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

Kaydırmaya dayalı animasyonları bildirimsel bir şekilde oluşturmak için Kaydırma Zaman Çizelgeleri ve Görüntüleme Zaman Çizelgeleri ile nasıl çalışacağınızı öğrenin.

Bramus

Yayınlanma tarihi: 5 Mayıs 2023

kursuna göz atın.

Kaydırmaya dayalı animasyonlar

Browser Support

  • Chrome: 115.
  • Edge: 115.
  • Firefox: behind a flag.
  • Safari: 26.

Source

Kaydırmaya dayalı animasyonlar, web'de yaygın olarak kullanılan bir kullanıcı deneyimi kalıbıdır. Kaydırmaya dayalı animasyon, kaydırma kapsayıcısının kaydırma konumuna bağlıdır. Bu, yukarı veya aşağı kaydırdığınızda bağlı animasyonun doğrudan yanıt olarak ileri ya da geri sarılacağı anlamına gelir. Örneğin, kaydırdıkça hareket eden paralaks arka plan resimleri veya okuma göstergeleri bu tür efektlerdendir.

Kaydırma ile hareket eden, belgenin üst kısmındaki okuma göstergesi.

Kaydırmaya dayalı animasyonun benzer bir türü, bir öğenin kaydırma kapsayıcısındaki konumuyla bağlantılı olan animasyondur. Örneğin, bu özellik sayesinde öğeler görünüme girerken yavaş yavaş belirginleşebilir.

Bu sayfadaki resimler, göründükçe yavaş yavaş beliriyor.

Bu tür efektleri elde etmenin 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 süreçte gerçekleştirir ve bu nedenle kaydırma etkinliklerini eşzamansız olarak sunar.
  • Ana iş parçacığı animasyonları takılmaya tabidir.

Bu durum, kaydırma ile tetiklenen ve kaydırma işlemiyle senkronize olan yüksek performanslı animasyonlar oluşturmayı imkansız veya çok zor hale getirir.

Chrome 115 sürümünden itibaren, bildirim temelli kaydırmaya dayalı animasyonları etkinleştirmek için kullanabileceğiniz yeni bir API ve kavram grubu (kaydırma zaman çizelgeleri ve görüntüleme zaman çizelgeleri) sunulmaktadır.

Bu yeni kavramlar, mevcut Web Animations API (WAAPI) ve CSS Animations API ile entegre olarak bu mevcut API'lerin avantajlarından yararlanmalarını sağlar. Kaydırmaya dayalı animasyonların ana iş parçacığı dışında çalıştırılması da bu kapsamdadır. Evet, doğru okudunuz: Artık yalnızca birkaç satır ek kodla ana iş parçacığından bağımsız olarak çalışan, kaydırmaya dayalı ve ipeksi pürüzsüzlükte animasyonlar oluşturabilirsiniz. Ne kadar da güzel!

Web'deki animasyonlar: Kısa bir özet

CSS ile web'de animasyonlar

CSS'de animasyon oluşturmak için @keyframes at-kuralını kullanarak bir dizi animasyon karesi tanımlayın. Animasyonun ne kadar süreceğini belirlemek için animation-duration değerini ayarlarken animation-name özelliğini kullanarak animasyonu bir öğeye bağlayın. animation-*, animation-easing-function ve animation-fill-mode gibi daha fazla animation-* uzun biçim özelliği vardır. Bunların tümü animation kısa biçiminde birleştirilebilir.

Örneğin, bir öğeyi X ekseninde büyütürken arka plan rengini de değiştiren bir animasyon aşağıda verilmiştir:

@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 Animasyonları API'si tam olarak aynı sonucu elde etmek için 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 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. Sayfa yüklendiğinde başlangıç zamanı 0'dan başlar ve saat ilerledikçe artar. Bu, varsayılan animasyon zaman çizelgesidir ve şimdiye kadar erişebildiğiniz tek animasyon zaman çizelgesiydi.

Kaydırmaya Bağlı Animasyon Spesifikasyonu, kullanabileceğiniz iki yeni zaman çizelgesi türü tanımlar:

  • Kaydırma İlerleme Durumu 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 konumuyla bağlantılı bir zaman çizelgesi.

İlerleme Zaman Çizelgesini Kaydırma

Kaydırma ilerleme zaman çizelgesi, belirli bir eksen boyunca kaydırma kapsayıcısının (kaydırma alanı veya kaydırıcı olarak da adlandırılır) kaydırma konumundaki ilerlemeye bağlı bir animasyon zaman çizelgesidir. Kaydırma aralığındaki bir konumu 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 kaydırdığınızda ilerleme durumunun% 0'dan% 100'e doğru arttığını görebilirsiniz.

Kaydırma ilerleme durumu zaman çizelgesinin görselleştirilmesi. Kaydırma çubuğunun en altına doğru kaydırdığınızda ilerleme değeri% 0'dan %100'e kadar 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 tür zaman çizelgeleri, kaydırma kapsayıcısındaki belirli bir öğenin göreli ilerleme durumuna bağlıdır. Kaydırma İlerleme Durumu Zaman Çizelgesi'nde olduğu gibi, kaydırıcının kaydırma ofseti izlenir. Kaydırma İlerleme Durumu Zaman Çizelgesi'nin aksine, ilerlemeyi belirleyen, bir konunun kaydırıcı içindeki göreli konumudur.

Bu, IntersectionObserver özelliğinin çalışma şekline benzer. Bu özellik, bir öğenin kaydırma çubuğunda ne kadar görünür olduğunu izleyebilir. Öğe kaydırma çubuğunda görünmüyorsa kesişmiyor demektir. Kaydırma çubuğunun içinde görünüyorsa (en küçük kısmı bile) kesişiyor demektir.

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

Görüntüleme ilerleme durumunun zaman çizelgesi görseli. Özne (yeşil kutu) kaydırma çubuğunu geçtiğinde ilerleme% 0'dan% 100'e kadar artar.

✨ Kendiniz deneyin

Görünüm ilerleme durumu zaman çizelgesi genellikle kısaca "Görünüm Zaman Çizelgesi" olarak adlandırılır. Görünüm zaman çizelgesinin belirli bölümlerini öznenin boyutuna göre hedeflemek mümkündür ancak bu konuyla ilgili daha fazla bilgiyi sonraki bölümlerde bulabilirsiniz.

Kaydırma ilerleme zaman çizelgeleriyle ilgili pratik bilgiler

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 özelliği için değer 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şkenlerini kabul eder.

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

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

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

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

Örneğin, bir animasyonu blok eksenindeki kök kaydırıcıya bağlamak için scroll() işlevine iletilecek değerler root ve block olur. Bir araya getirildiğinde 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 göstergesi bulunur. Sayfayı aşağı kaydırdıkça ilerleme çubuğu büyür ve dokümanın sonuna ulaşıldığında görüntü alanının tamamını kaplar. Animasyonu yönlendirmek için anonim bir kaydırma ilerleme zaman çizelgesi kullanılır.

Demo: Okuma ilerleme durumu göstergesi.

✨ Kendiniz deneyin

Okuma ilerleme göstergesi, sabit konum kullanılarak sayfanın üst kısmına yerleştirilir. Birleştirilmiş animasyonlardan yararlanmak için width animasyon uygulanmaz ancak transform kullanılarak öğe 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şlevine herhangi bir 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'dir. Bu, #progress öğesinin en yakın kaydırıcısı olduğundan kök kaydırıcıyı etkili bir şekilde hedeflerken blok yönünü de izler.

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

Kaydırma ilerleme durumu zaman çizelgesi tanımlamanın alternatif bir yolu da adlandırılmış bir zaman çizelgesi kullanmaktır. Bu yöntem biraz daha ayrıntılı olsa da üst veya kök kaydırıcıyı hedeflemediğinizde, sayfada birden fazla zaman çizelgesi kullanıldığında ya da otomatik aramalar çalışmadığında işe yarayabilir. Bu şekilde, kaydırma ilerleme durumu zaman çizelgesini verdiğiniz adla tanımlayabilirsiniz.

Bir öğede adlandırılmış kaydırma ilerleme durumu zaman çizelgesi oluşturmak için kaydırma kapsayıcısında 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 scroll-timeline-axis özelliğini de bildirin. İzin verilen değerler, scroll() işlevinin <axis> bağımsız değişkeniyle aynıdır.

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

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 adım göstergesi yer almaktadır. Bir ruloda üç resim olduğunda, gösterge çubuğu% 33 genişlikte başlar. Bu, şu anda üç resimden birincisine baktığınızı gösterir. Son resim görüntülendiğinde (kaydırma çubuğunun sonuna kadar kaydırılmasıyla belirlenir) gösterge, kaydırma çubuğunun tam genişliğini kaplar. Animasyonu yönlendirmek için adlandırılmış bir kaydırma ilerleme zaman çizelgesi kullanılır.

Demo: Yatay bant adım göstergesi.

✨ Kendiniz deneyin

Bir galeri için temel işaretleme şöyledir:

<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 özelliğiyle 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 yerleştirir ve kaydırılan öğedir. Kaydırma konumu izlenerek .gallery__progress animasyonu oynatılır. Bu işlem, adlandırılmış kaydırma ilerleme durumu zaman çizelgesine --gallery__scrollcontainer başvurularak 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 ilerleme durumu 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 ile birlikte bir özellik paketi iletin.

  • source: Kaydırma çubuğunu izlemek istediğiniz öğeye yapılan bir referans. Kök kaydırma çubuğunu hedeflemek için document.documentElement öğesini 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,
});

Web animasyonuna eklemek için timeline özelliği olarak iletin ve varsa duration karakterlerini atlayın.

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

Demo: Okuma ilerleme durumu göstergesi (yeniden)

Aynı işaretlemeyi kullanırken okuma ilerleme durumunu 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,
    }),
  }
);

CSS sürümündeki görsel sonuç aynıdır: Oluşturulan timeline, kök kaydırıcıyı izler ve sayfayı kaydırdığınızda #progress öğesini x ekseninde% 0'dan% 100'e kadar ölçeklendirir.

✨ Kendiniz deneyin

İlerleme Zaman Çizelgesi görünümünü pratik bir şekilde kullanma

CSS'de anonim görünüm ilerleme durumu zaman çizelgesi oluşturma

İlerleme Durumu Zaman Çizelgesi oluşturmak için view() işlevini kullanın. Kabul edilen bağımsız değişkenleri <axis> ve <view-timeline-inset>'dir.

  • <axis>, kaydırma ilerleme durumu zaman çizelgesindekiyle aynıdır ve hangi eksenin izleneceğini tanımlar. Varsayılan değer block'dır.
  • <view-timeline-inset> ile, bir öğenin görünür olup olmadığı değerlendirilirken sınırları ayarlamak için bir (pozitif veya negatif) ofset belirleyebilirsiniz. Değer, yüzde veya auto olmalıdır. Varsayılan değer auto'dır.

Örneğin, bir animasyonu blok ekseninde kaydırıcısıyla kesişen bir öğeye bağlamak için view(block) 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 kullanarak kaydırma yaparken her img, görünüm alanını geçtiğinde görünür hale gelir.

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

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

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

Varsayılan olarak, Görünüm Zaman Çizelgesi'ne bağlı bir animasyon, zaman çizelgesinin tamamına eklenir. Bu süre, konu kaydırma alanına girmek üzereyken başlar ve konu kaydırma alanından tamamen çıktığında sona erer.

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

Konunun giriş aralığını izlemek için ayarlanan bir Görünüm Zaman Çizelgesi. 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 durumu zaman çizelgesinin tamamını gösterir.
  • entry: Ana kutunun, görüntüleme ilerlemesi görünürlük aralığına girdiği aralığı gösterir.
  • exit: Ana kutunun, görünüm ilerleme durumu görünürlük aralığından çıktığı aralığı gösterir.
  • entry-crossing: Ana kutunun uç kenarlığını geçtiği aralığı gösterir.
  • exit-crossing: Ana kutunun başlangıç kenarlığını geçtiği aralığı gösterir.
  • contain: Ana kutunun, kaydırma bağlantı noktasındaki görünüm ilerleme durumu görünürlük aralığı tarafından tamamen kapsandığı veya bu aralığı tamamen kapsadığı aralığı gösterir. 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 bitişi ayarlamanız gerekir. Her biri, aralık adından (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% ile 100% arasında değişen bir yüzdedir ancak 20em gibi sabit bir uzunluk da belirtebilirsiniz.

Örneğin, bir özne girdiğinde animasyonun başlamasını istiyorsanız aralık başlangıcı olarak entry 0% simgesini seçin. Konu girildiğinde tamamlanması için aralık sonu değeri olarak entry 100% seçeneğini belirleyin.

CSS'de bunu animation-range özelliğiyle 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ıç ve bitiş konumlarını nasıl etkilediğini görmek için aşağıda yer alan aracı kullanın. Aralık başlangıcını entry 0%, aralık sonunu cover 50% olarak ayarlamayı deneyin ve ardından animasyon sonucunu görmek için kaydırma çubuğunu sürükleyin.

https://goo.gle/view-timeline-range-tool adresinde bulunan Zaman Çizelgesi Aralığı Görüntüleyici

Kayıt izleme

Bu Görünüm Zaman Çizelgesi Aralığı araçlarıyla oynarken fark edebileceğiniz gibi, bazı aralıklar iki farklı aralık adı + aralık ofseti kombinasyonu tarafından hedeflenebilir. Örneğin, entry 0%, entry-crossing 0% ve cover 0% aynı bölgeyi hedefliyor.

Aralık başlangıcı ve aralık sonu aynı aralık adını hedeflediğinde ve aralığın tamamını (0% ile 100% arasında) kapsadığında değeri yalnızca aralık adıyla kısaltabilirsiniz. Örneğin, animation-range: entry 0% entry 100%; çok daha kısa olan animation-range: entry şeklinde yeniden yazılabilir.

Demo: Resmi ortaya çıkarma

Bu demoda, resimler kaydırma alanına girerken görünür hale geliyor. Bu işlem, anonim Zaman Çizelgesi görünümü kullanılarak yapılır. Animasyon aralığı, her resim kaydırma çubuğunun yarısına geldiğinde tam opak olacak şekilde ayarlandı.

Demo: Resim gösterme

✨ Kendiniz deneyin

Genişletme 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ünüm ilerleme zaman çizelgesi oluşturma

Kaydırma zaman çizelgelerinde adlandırılmış sürümler oluşturabildiğiniz gibi, Görüntüleme Zaman Çizelgeleri de oluşturabilirsiniz. scroll-timeline-* özellikleri yerine view-timeline- önekini taşıyan varyantları (ör. view-timeline-name ve view-timeline-axis) kullanırsınız.

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

Demo: Resim ortaya çıkarma, yeniden

Daha önce kullanılan resim gösterme demosunu yeniden düzenlediğimizde, düzeltilmiş 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 öğesi içinde izlenir. Aynı değer, animation-timeline özelliğinin değeri olarak kullanılır. Görsel çıktı, öncekiyle tamamen aynıdır.

✨ Kendiniz deneyin

JavaScript'te Görünüm İlerleme Durumu Zaman Çizelgesi Oluşturma

JavaScript'te bir Görünüm 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 ile bir özellik paketi iletin.

  • subject: Kendi kaydırma çubuğu içinde izlemek istediğiniz öğeye yapılan bir referans.
  • axis: İzlenecek eksen. CSS varyantına benzer şekilde, kabul edilen değerler block, inline, x ve y'dür.
  • inset: Kutu görünümde olup olmadığını belirlerken kaydırma bağlantı noktasının içe (pozitif) veya dışa (negatif) doğru ayarlanması.
const tl = new ViewTimeline({
  subject: document.getElementById('subject'),
});

Web animasyonuna eklemek için timeline özelliği olarak iletin ve varsa duration karakterlerini atlayı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 dizi animasyon karesiyle birden fazla Görünüm Zaman Çizelgesi aralığına ekleme

Liste girişlerinin animasyonlu olduğu bu kişi listesi demosuna göz atalım. Liste girişi, kaydırma alanına alttan girerken kayarak görünür ve kaydırma alanından üstten çıkarken kayarak kaybolur.

Demo: Kişi listesi

✨ Kendiniz deneyin

Bu demoda, her öğe, öğeyi kaydırma bağlantı noktasını geçerken izleyen bir görünüm zaman çizelgesiyle süslenir ancak öğ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ık bilgilerini içeren bir anahtar kare grubu da 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();
}

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

✨ Kendiniz deneyin

Üst öğe 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 kaydırma üst öğeleriyle sınırlıdır. Ancak çok sık olarak, animasyon uygulanması gereken öğe, izlenmesi gereken kaydırma öğesinin alt öğesi değildir.

Bu özelliğin çalışması için timeline-scope özelliği devreye girer. Bu özelliği, söz konusu zaman çizelgesini oluşturmadan aynı adla bir zaman çizelgesi bildirmek için kullanırsınız. Bu işlem, söz konusu adla zaman çizelgesine daha geniş bir kapsam kazandırır. Uygulamada, alt kaydırıcının zaman çizelgesinin kendisine bağlanabilmesi 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 tanımlar. Bu öğenin herhangi bir alt öğesi, animation-timeline özelliği için değer olarak bulup kullanabilir.
  • .scroller öğesi, aslında --tl adlı bir kaydırma zaman çizelgesi tanımlar. Normalde yalnızca alt öğeleri tarafından görülebilir ancak .parent, scroll-timeline-root olarak ayarladığından bu öğeye eklenir.
  • .subject öğesi --tl zaman çizelgesini kullanır. Atalarının ağacında ilerleyerek .parent üzerinde --tl öğesini bulur. --tl .parent üzerindeki --tl ile .scroller'nin --tl'ını gösterdiğinde .subject, esasen .scroller'nin kaydırma ilerleme zaman çizelgesini izler.

Başka bir deyişle, bir zaman çizelgesini üst öğeye taşımak (diğer adıyla yükseltmek) için timeline-root öğesini kullanabilirsiniz. Böylece üst öğenin tüm alt öğeleri zaman çizelgesine erişebilir.

timeline-scope özelliği hem Kaydırma Zaman Çizelgeleri hem de Görüntüleme Zaman Çizelgeleri 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ırmaya dayalı animasyonlarla neler yapılabileceğini gösteren daha birçok demo yer alıyor.

Ek demolar arasında albüm kapaklarının listesi de yer alıyor. Her kapak, merkezde yer alırken 3 boyutlu olarak döner.

Demo: Cover Flow

✨ Kendiniz deneyin

Veya position: sticky'dan yararlanan bu üst üste yerleştirilmiş kartlar demosunu inceleyin. Kartlar üst üste geldiğinde, zaten sıkışmış olan kartlar küçülerek hoş bir derinlik efekti oluşturur. Sonunda, tüm yığın grup olarak görünümden kayar.

Demo: Kartları gruplandırma.

✨ Kendiniz deneyin

Ayrıca scroll-driven-animations.style adresinde, bu yayının önceki bölümlerinde yer alan Görünüm Zaman Çizelgesi Aralığı İlerlemesi görselleştirmesi gibi bir dizi araç da yer alıyor.

Kaydırmaya dayalı animasyonlar, Google I/O 2023'teki Web Animasyonlarındaki yenilikler oturumunda da ele alınmıştır.