Bildirim temelli bir şekilde kaydırmaya dayalı animasyonlar oluşturmak için Kaydırma Zaman Çizelgeleri ve Zaman Çizgileri Görüntüleme ile nasıl çalışacağınızı öğrenin.
Kaydırmayla çalışan animasyonlar
Kaydırma odaklı animasyonlar, web'de yaygın bir kullanıcı deneyimi kalıbıdır. Kaydırma odaklı bir animasyon, kaydırma kapsayıcısının kaydırma konumuna bağlanır. Yani, siz yukarı veya aşağı kaydırdığınızda, bağlantılı animasyon doğrudan yanıtta ileriye veya geriye doğru ileri veya geri gider. Paralaks arka plan resimleri veya siz sayfayı kaydırdıkça hareket eden okuma göstergeleri gibi efektler buna örnek gösterilebilir.
Kaydırmaya dayalı animasyonun benzer bir türü, bir öğenin kaydırma kapsayıcısı içindeki konumuna bağlanan animasyondur. Örneğin, bu düğme ile öğeler görünüme girerken belirebilir.
Bu tür efektleri gerçekleştirmenin klasik yolu, ana iş parçacığındaki kaydırma etkinliklerine yanıt vermektir ve bu da iki ana soruna neden olur:
- Modern tarayıcılar kaydırma işlemini ayrı bir işlemde gerçekleştirdiğinden, kaydırma etkinliklerini eşzamansız olarak yayınlar.
- Ana iş parçacığı animasyonları jank'a tabidir.
Bu, kaydırmayla senkronize olan yüksek kaydırmaya dayalı animasyonlar oluşturmayı imkansız veya çok zor hale getirir.
Chrome 115 sürümünde bildirim temelli kaydırmaya dayalı animasyonları etkinleştirmek için kullanabileceğiniz bir dizi yeni API ve kavram bulunmaktadır: Zaman Çizelgelerini Kaydırma ve Zaman Çizgilerini Görüntüleme.
Bu yeni kavramlar, mevcut Web Animasyonları API'si (WAAPI) ve CSS Animations API ile entegre olarak bu mevcut API'lerin avantajlarını devralmalarına olanak tanır. Bu, kaydırmaya dayalı animasyonların ana iş parçacığından çalıştırılmasını da içerir. Evet, doğru okuma: Sadece birkaç satır ekstra kodla artık kaydırma ile yönlendirilen, ana iş parçacığının dışında kalan akıcı animasyonlarınız olabilir. Beğenmedim ne dersiniz?
Web'deki animasyonlar, küçük bir özet
CSS ile web'de animasyonlar
CSS'de animasyon oluşturmak için @keyframes kuralını kullanarak bir animasyon kareleri grubu tanımlayın. Animasyonun ne kadar süreceğini belirlemek için animation-duration özelliğini ayarlarken animation-name özelliğini kullanarak bunu bir öğeye bağlayın. animation-* için animation-easing-function ve animation-fill-mode gibi daha fazla özellik mevcut. Bunların tümü animation kısaltmasıyla birleştirilebilir.
Örneğin, bir öğeyi X ekseninde büyütürken aynı zamanda arka plan rengini değiştiren bir animasyonu burada 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 ise tam olarak bunu başarmak için Web Animasyonları API'sı 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
Varsayılan olarak, bir öğeye iliştirilmiş animasyonlar doküman zaman çizelgesinde çalıştırılır. Sayfa yüklendiğinde başlangıç zamanı 0'dan başlar ve saat ilerledikçe ileriye doğru ilerlemeye başlar. Bu, varsayılan animasyon zaman çizelgesidir ve şu ana kadar erişiminiz olan tek animasyon zaman çizelgesidir.
Kaydırma Odaklı Animasyonlar Spesifikasyonu, kullanabileceğiniz iki yeni zaman çizelgesi türü tanımlar:
- Kaydırma İlerleme 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ı zaman çizelgesi.
Kaydırma İlerlemesi Zaman Çizelgesi
Kaydırma İlerleme Zaman Çizelgesi, belirli bir eksen boyunca bir kaydırma kapsayıcısının kaydırma konumundaki ilerlemeye bağlı olan (kaydırma veya kaydırma olarak da adlandırılır) 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, son kaydırma konumu ise% 100 ilerleme durumunu temsil eder. Aşağıdaki görselleştirmede, 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.
✨ Kendiniz deneyin
Kaydırma İlerleme Zaman Çizelgesi genellikle sadece “Kaydırma Zaman Çizelgesi” şeklinde 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öreli ilerlemesiyle bağlantılıdır. Kaydırma İlerleme Zaman Çizelgesi gibi, kaydırıcının kaydırma ofseti de izlenir. Kaydırma İlerleme Zaman Çizelgesi'nin aksine, ilerlemeyi belirleyen unsur, kaydırıcıdaki öznenin göreli konumudur.
Bu, bir öğenin kaydırma çubuğunda ne kadar görünür olduğunu izleyebilen IntersectionObserver'in çalışma şekliyle kısmen benzerdir. Öğe, kaydırma çubuğunda görünür değilse kesişmiyor demektir. Kaydırma çubuğunun içinde görünür durumdaysa (en küçük kısmı için bile) kesişiyor demektir.
İlerleme Durumu Zaman Çizelgesi, öznenin kaydırıcıyla kesişmeye başladığı andan itibaren başlar ve konu kaydırıcıyla kesişmeyi durdurduğunda sona erer. Aşağıdaki görselleştirmede, konu kaydırma kapsayıcısına girdiğinde% 0'dan ilerleme olarak saymaya başladığını ve konu kaydırma kapsayıcısından ayrıldığı anda% 100'e ulaştığını görebilirsiniz.
✨ Kendiniz deneyin
İlerleme Durumu Zaman Çizelgesi genellikle yalnızca "Zaman Çizelgesini Görüntüle" şeklinde kısaltılır. Zaman Çizelgesini görüntüleme zaman çizelgesinin belirli bölümlerini konunun boyutuna bağlı olarak hedeflemek mümkündür, ancak daha sonra buna daha fazla değinmek mümkündür.
Kaydırma İlerleme Zaman Çizelgelerini pratik hale getirme
CSS'de anonim bir 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ş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: 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 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çümünü kullanır.y: Kaydırma kapsayıcısının y ekseni boyunca ilerleme ölçümünü kullanır.x: Kaydırma kapsayıcısının x ekseni boyunca ilerleme ölçümünü kullanır.
Örneğin, bir animasyonu blok eksenindeki kök kaydırıcıya bağlamak için scroll() öğesine iletilecek değerler root ve block'dir. Bu iki değer: scroll(root block).
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. İlerleme çubuğu, siz sayfayı aşağı kaydırdıkça dokümanın sonuna ulaştığında tüm görüntü alanı genişliğini kaplayana kadar büyür. Animasyonu yönlendirmek için anonim bir Kaydırma İlerleme Zaman Çizelgesi kullanılır.
✨ 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 animasyonlu değil, ancak öğ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 ayarlanmıştır. scroll() için bağımsız değişken verilmediğinden varsayılan değerlerini kullanacak.
İzlenecek varsayılan kaydırıcı nearest ve varsayılan eksen block şeklindedir. 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ü takip eder.
CSS'de adlandırılmış bir 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ı olabilir, ancak 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ışmıyorsa kullanışlı olabilir. Bu şekilde, Kaydırma İlerleme Zaman Çizelgesini verdiğiniz ada göre tanımlayabilirsiniz.
Bir öğede adlandırılmış bir Kaydırma İlerleme Zaman Çizelgesi oluşturmak için kaydırma kapsayıcısındaki scroll-timeline-name CSS özelliğini 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 özelliğini de bildirin. İzin verilen değerler, <axis> scroll() bağımsız değişkeniyle aynıdır.
Son olarak, animasyonu Kaydırma İlerlemesi Zaman Çizelgesi'ne bağlamak için scroll-timeline-name için kullanılan tanımlayıcıyla aynı değere animasyon uygulanması gereken öğedeki animation-timeline özelliğini 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 kısaltmasında scroll-timeline-name ve scroll-timeline-axis değerlerini birleştirebilirsiniz. Örneğin:
scroll-timeline: --my-scroller inline;
Demo: Yatay bant adım göstergesi
Bu demo, her resim rulosunun üzerinde gösterilen bir adım göstergesi içerir. Bir bant üç resim içerdiğinde, gösterge çubuğu şu anda üç resimden birinci resme baktığınızı belirtmek üzere% 33 genişliğinde başlar. Son resim görünümdeyken (kaydırıcı en sona kaydırdığı için), 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.
✨ Kendiniz deneyin
Bir galerinin temel işaretlemesi şudur:
<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çine yerleştirilmiş. Başlangıç 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 yerleştirir ve kaydırılan öğedir. .gallery__progress öğesi, kaydırma konumu izlenerek animasyon eklenir. Bu işlem, Kaydırma İlerlemesi Zaman Çizelgesi --gallery__scrollcontainer adlı adlandırılan baz alınarak 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 öğelerinin bulunduğu bir mülk çantasına geçin.
source: Kaydırma çubuğunu izlemek istediğiniz öğeye referans. Kök kaydırıcıyı hedeflemek içindocument.documentElementkullanın.axis: Hangi eksenin izleneceğini belirler. CSS varyantına benzer şekilde, kabul edilen değerlerblock,inline,xveyşeklindedir.
const tl = new ScrollTimeline({
source: document.documentElement,
});
Bir Web Animasyonu'na eklemek için etkinliği timeline özelliği olarak aktarın ve varsa duration kısmını çıkarın.
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
Demo: Okuma ilerleme durumu göstergesi, yeniden gözden geçirildi
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 öğesini x ekseninde% 0 ile% 100 arasında yukarı ölçeklendirir.
✨ Kendiniz deneyin
İlerleme Zaman Çizelgesini Görüntüleme ile pratik yapma
CSS'de Anonim Bir İlerleme Durumu Zaman Çizelgesini Görüntüleme
İ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>'dir.
<axis>, Kaydırma İlerleme Zaman Çizelgesi'ndekiyle aynıdır ve hangi eksenin izleneceğini tanımlar. Varsayılan değerblockdeğeridir.<view-timeline-inset>ile bir öğenin görünümde veya görüntülenmediği kabul edildiğinde sınırları ayarlamak için ofset (pozitif veya negatif) belirtebilirsiniz. Değer bir yüzde veyaautoolmalıdır.autovarsayılan değerdir.
Ö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 kullandığınızda, siz ekranı kaydırırken görüntü alanını geçerken her img belirir.
@keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
img {
animation: reveal linear;
animation-timeline: view();
}
Intermezzo: Zaman Çizelgesi aralıklarını görüntüleme
Varsayılan olarak, Zaman Çizelgesini Görüntüle'ye bağlı bir animasyon tüm zaman çizelgesi aralığına eklenir. Bu süreç, öznenin kaydırma alanına girmek üzere olduğu anda başlar ve konu kaydırma alanından tamamen ayrıldığında sona erer.
Eklenmesi gereken aralığı belirterek Zaman Çizelgesi'nin belirli bir bölümüne bağlantı oluşturmak da mümkündür. Bu, örneğin yalnızca konu kaydırma çubuğuna girerken olabilir. Aşağıdaki görselleştirmede konu, kaydırma kapsayıcısına girdiğinde% 0'dan başlayarak ilerleme olarak saymaya başlar ancak tamamen kesiştiği andan itibaren% 100'e ulaşır.
Hedefleyebileceğiniz olası Zaman Çizelgesi Görüntüleme aralıkları şunlardır:
cover: Görüntüleme ilerleme zaman çizelgesinin tamamını gösterir.entry: Ana hesap kutusunun 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 durumu görünürlük aralığından çıktığı aralığı temsil eder.entry-crossing: Ana kutunun, son sınır kenarıyla kesiştiği aralığı temsil eder.exit-crossing: Ana kutunun başlangıç sınırı kenarıyla kesiştiği aralığı temsil eder.contain: Ana hesap kutusunun, kaydırma alanı içindeki görüntüleme ilerleme durumu görünürlük aralığının tamamen içinde yer aldığı veya tamamını kapladığı aralığı temsil eder. Bu, öznenin kaydırıcıdan daha uzun veya daha kısa olmasına bağlıdır.
Bir aralık tanımlamak için aralık-başlangıç ve aralık-bitiş değerleri ayarlamalısınız. Her biri, aralık-adı (yukarıdaki listeye bakın) ve o 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 konuyu konu girdiği andan itibaren çalıştırmak istiyorsanız aralık başlangıcı olarak entry 0% öğesini seçin. Konu girinceye kadar işlemin tamamlanması için aralık sonu değeri olarak entry 100% değerini 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ıç ile bitiş konumlarını nasıl etkilediğini görmek için aşağıya yerleştirilen aracı kullanın. Aralık başlangıcını entry 0% ve aralık bitişini cover 50% olarak ayarlamayı deneyin. Ardından animasyon sonucunu görmek için kaydırma çubuğunu sürükleyin.
Kaydı izleyin
Bu Zaman Çizelgesi Aralıklarını Görüntüleme araçlarıyla oynarken görebileceğ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ı hedefler.
Aralık-başlangıç ve aralık-sonu aynı aralık adını hedefliyorsa ve% 0'dan %100'e kadar tüm aralığı 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 olacak şekilde yeniden yazılabilir.
Demo: Resim gösterme
Bu demo, resimler kaydırma alanına girdikçe şeffaflaşarak kaybolur. Bu işlem, Anonim Görünüm Zaman Çizelgesi kullanılarak yapılır. Animasyon aralığı, kaydırıcının yarısına kadar gelen her resim tam opaklık olacak şekilde ayarlandı.
✨ Kendiniz deneyin
Genişletme efekti, animasyonlu bir klip yolu kullanılarak elde edilir. Bu efekt için kullanılan CSS şudur:
@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 İlerleme Zaman Çizelgesini Görüntüleme Oluşturma
Kaydırma Zaman Çizelgelerinin sürüm adlandırılmasına benzer şekilde, Zaman Çizelgelerini adlandır işlevi de oluşturabilirsiniz. scroll-timeline-* özellikleri yerine, view-timeline- ön ekini, yani view-timeline-name ve view-timeline-axis ön ekini içeren varyantları kullanırsınız.
Aynı değer türleri geçerlidir ve adlandırılmış bir zaman çizelgesi aramak için aynı kurallar geçerlidir.
Demo: Resim gösterme, yeniden ziyaret edildi
Resim üzerinde önceki demoda anlatıldığı gibi düzeltilen 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ıldığında öğe, en yakın kaydırma çubuğunda izlenir. Ardından, animation-timeline özelliğinin değeri olarak aynı değer kullanılır. Görsel çıktı, öncekiyle tamamen aynıdır.
✨ Kendiniz deneyin
JavaScript'te Görüntüleme İlerleme Zaman Çizelgesi Oluşturma
JavaScript'te Zaman Çizelgesi Görüntüleme oluşturmak için ViewTimeline sınıfının yeni bir örneğini oluşturun. Takip etmek istediğiniz subject, axis ve inset ile bir mülk çantasını geçirin.
subject: Kendi kaydırma çubuğu içinde izlemek istediğiniz öğeye referans.axis: İzlenecek eksen. CSS varyantına benzer şekilde, kabul edilen değerlerblock,inline,xveyşeklindedir.inset: Kutunun görünümde olup olmadığını belirlerken kaydırma alanının bir iç (pozitif) veya dıştan (negatif) düzenlemesi.
const tl = new ViewTimeline({
subject: document.getElementById('subject'),
});
Bir Web Animasyonu'na eklemek için etkinliği timeline özelliği olarak aktarın ve varsa duration kısmını çıkarı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
Tek bir animasyon karesi grubuyla birden fazla Zaman Çizelgesi görüntüleme aralığına ekleme
Liste girişlerinin animasyonlu olduğu bu kişi listesi demosuna göz atalım. Bir liste girişi kaydırma alanına alttan girdikçe kayarak içeri girer ve üstteki kaydırma alanından çıktığında kayarak kaybolur.
✨ Kendiniz deneyin
Bu demoda her öğe, kaydırma alanını geçerken izleyen bir Zaman Çizelgesi Görüntüleme ile dekore edilmiş, ancak iki kaydırmaya dayalı animasyon eklenmektedir. 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, zaten aralık bilgilerini 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 alanını belirtmeniz gerekmez. Sonuç, öncekiyle bire bir aynıdır.
✨ Kendiniz deneyin
Üst öğe olmayan bir kaydırma zaman çizelgesine ekleme
Kaydırma Zaman Çizelgeleri ve Zaman Çizelgeleri adlı görüntülemelerin arama mekanizması yalnızca üst kaydırma öğeleriyle sınırlıdır. Yine de, çoğu zaman animasyon uygulanması gereken öğe, izlenmesi gereken kaydırıcının alt öğesi değildir.
Bu işlevin çalışması için timeline-scope özelliği devreye girer. Bu özelliği, gerçekten oluşturmadan o ada sahip bir zaman çizelgesi tanımlamak için kullanırsınız. Böylece, bu adla zaman çizelgesi daha geniş bir kapsam elde edilir. Pratikte, bir alt kaydırıcının zaman çizelgesinin 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--tladlı bir zaman çizelgesi tanımlar. Bunun tüm alt öğeleri bunu bulupanimation-timelineözelliği için bir değer olarak kullanabilir..scrolleröğesi aslında--tladıyla bir Kaydırma Zaman Çizelgesi tanımlar. Varsayılan olarak yalnızca alt öğeleri tarafından görülebilir, ancak.parenttarafındanscroll-timeline-rootolarak ayarlandığı için buna eklenir..subjectöğesi,--tlzaman çizelgesini kullanır. Ata ağacının yukarısına doğru yürüyor ve.parentüzerinde--tlbulur..parentüzerindeki--tl,.scrolleröğesinin--tldeğerini gösterirken.subject,.scrolleröğesinin Kaydırma İlerleme Zaman Çizelgesi'ni izler.
Başka bir ifadeyle, timeline-root kullanarak zaman çizelgesini bir üst öğeye (yükseltme) taşıyabilirsiniz.
timeline-scope özelliği hem Kaydırma Zaman Çizelgeleri hem de Zaman Çizelgeleri Görüntüleme ile kullanılabilir.
Daha fazla demo ve kaynak
Kaydırma odaklı-animations.style mini sitesindeki bu makalede ele alınan tüm demolar. Web sitesinde, Kaydırma odaklı animasyonlarla neler yapılabileceğini vurgulayan çok daha fazla demo bulunuyor.
Eklenen demolardan biri de albüm kapaklarının listesidir. Odak merkezdeyken her kapak 3D olarak döner.
✨ Kendiniz deneyin
position: sticky kullanan bu yığınlama kartları demosunu da inceleyebilirsiniz. Kartlar yığıldığında, takılı kalan kartlar da ölçeklenerek güzel bir derinlik efekti oluşturur. Sonunda, tüm yığın grup halinde görünümden kaybolur.
✨ Kendiniz deneyin
Ayrıca, scroll-driven-animations.style'da da yer almaktadır. Bu yayının önceki bölümlerinde yer alan Zaman Çizelgesi Aralığı İlerleme Durumunu Görüntüleme görselleştirmesi gibi bir araç koleksiyonudur.
Kaydırmayla çalışan animasyonlar, Google I/O '23'te Web Animasyonlarındaki Yenilikler başlıklı makalede de ele alındı.