نحوه کار با Scroll Timelines و View Timelines را بیاموزید تا انیمیشن های پیمایشی را به روشی اعلامی ایجاد کنید.
انیمیشن های اسکرول محور
انیمیشن های اسکرول محور یک الگوی UX رایج در وب هستند. یک انیمیشن اسکرول محور به موقعیت اسکرول یک ظرف اسکرول مرتبط است. این بدان معنی است که با اسکرول کردن به بالا یا پایین، انیمیشن پیوند داده شده در پاسخ مستقیم به جلو یا عقب می رود. نمونههایی از این افکتهایی مانند تصاویر پسزمینه اختلاف منظر یا نشانگرهای خواندن هستند که در حین حرکت حرکت میکنند.
نوع مشابهی از انیمیشن اسکرول محور، انیمیشنی است که به موقعیت یک عنصر در محفظه اسکرول آن مرتبط است. به عنوان مثال، با آن، عناصر می توانند به محض مشاهده محو شوند.
راه کلاسیک برای دستیابی به این نوع افکتها پاسخ دادن به رویدادهای اسکرول در رشته اصلی است که منجر به دو مشکل اصلی میشود:
- مرورگرهای مدرن پیمایش را در یک فرآیند جداگانه انجام می دهند و بنابراین رویدادهای اسکرول را به صورت ناهمزمان ارائه می دهند.
- انیمیشن های رشته اصلی در معرض jank هستند.
این باعث می شود که ایجاد انیمیشن های پیمایشی عملکردی که با پیمایش همگام هستند غیرممکن یا بسیار دشوار باشد.
از کروم نسخه 115 مجموعه جدیدی از APIها و مفاهیم وجود دارد که میتوانید برای فعال کردن انیمیشنهای پیمایش محور اعلامی استفاده کنید: Scroll Timelines و View Timelines.
این مفاهیم جدید با Web Animations API (WAAPI) و CSS Animations API ادغام میشوند و به آنها اجازه میدهند مزایایی را که این APIهای موجود به ارمغان میآورند به ارث ببرند. این شامل توانایی اجرای انیمیشن های اسکرول محور از رشته اصلی می شود. بله، آن را درست بخوانید: اکنون میتوانید انیمیشنهای صاف ابریشمی داشته باشید که با اسکرول حرکت میکنند و از رشته اصلی خارج میشوند، تنها با چند خط کد اضافی. چه چیزی را دوست ندارد؟!
انیمیشن ها در وب، یک خلاصه کوچک
انیمیشن در وب با CSS
برای ایجاد یک انیمیشن در CSS، مجموعه ای از فریم های کلیدی را با استفاده از @keyframes
at-rule تعریف کنید. با استفاده از ویژگی animation-name
آن را به یک عنصر پیوند دهید، در حالی که animation-duration
برای تعیین مدت زمان لازم برای انیمیشن تنظیم کنید. ویژگیهای طولانیتر animation-*
موجود است animation-easing-function
و animation-fill-mode
فقط برای نام بردن چند مورد – که همگی میتوانند در خلاصهنویسی animation
ترکیب شوند.
به عنوان مثال، در اینجا انیمیشنی وجود دارد که یک عنصر را در محور X افزایش می دهد و در عین حال رنگ پس زمینه آن را نیز تغییر می دهد:
@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;
}
انیمیشن در وب با جاوا اسکریپت
در جاوا اسکریپت، Web Animations API را می توان دقیقاً برای دستیابی به همین مورد استفاده کرد. میتوانید این کار را با ایجاد نمونههای جدید Animation
و KeyFrameEffect
انجام دهید یا از متد animate()
Element
animate بسیار کوتاهتر استفاده کنید.
document.querySelector('#progressbar').animate(
{
backgroundColor: ['red', 'darkred'],
transform: ['scaleX(0)', 'scaleX(1)'],
},
{
duration: 2500,
fill: 'forwards',
easing: 'linear',
}
);
این نتیجه بصری قطعه جاوا اسکریپت بالا با نسخه قبلی CSS یکسان است.
جدول زمانی انیمیشن
به طور پیش فرض، یک انیمیشن متصل به یک عنصر در خط زمانی سند اجرا می شود. زمان مبدأ آن هنگام بارگیری صفحه از 0 شروع می شود و با پیشروی زمان ساعت شروع به تیک زدن به جلو می کند. این جدول زمانی پیشفرض انیمیشن است و تاکنون تنها خط زمانی انیمیشنی بود که به آن دسترسی داشتید.
مشخصات انیمیشن های اسکرول محور دو نوع جدید از جدول زمانی را تعریف می کند که می توانید از آنها استفاده کنید:
- Scroll Progress Timeline : خط زمانی است که به موقعیت اسکرول ظرف پیمایش در امتداد یک محور خاص مرتبط است.
- نمایش جدول زمانی پیشرفت : خط زمانی که به موقعیت نسبی یک عنصر خاص در ظرف اسکرول آن مرتبط است.
جدول زمانی پیشرفت را پیمایش کنید
جدول زمانی پیشرفت پیمایش یک جدول زمانی انیمیشن است که به پیشرفت در موقعیت پیمایش یک محفظه اسکرول - همچنین به نام اسکرولپورت یا اسکرول - در امتداد یک محور خاص مرتبط است. این یک موقعیت در محدوده پیمایش را به درصدی از پیشرفت تبدیل می کند.
موقعیت اسکرول شروع نشان دهنده 0٪ پیشرفت و موقعیت اسکرول پایانی نشان دهنده 100٪ پیشرفت است. در تصویرسازی زیر، میتوانید ببینید که با اسکرول کردن اسکرول از بالا به پایین، پیشرفت از 0% تا 100% افزایش مییابد.
✨ خودتان آن را امتحان کنید
جدول زمانی پیشرفت پیمایش اغلب به صورت اختصاری «خط زمانی پیمایش» خوانده می شود.
مشاهده جدول زمانی پیشرفت
این نوع جدول زمانی به پیشرفت نسبی یک عنصر خاص در یک ظرف اسکرول مرتبط است. درست مانند جدول زمانی پیشرفت اسکرول، افست اسکرول پیمایش ردیابی می شود. برخلاف جدول زمانی پیشرفت پیمایش، موقعیت نسبی سوژه در آن پیشگرد است که پیشرفت را تعیین میکند.
این تا حدودی با نحوه عملکرد IntersectionObserver
قابل مقایسه است، که می تواند میزان قابل مشاهده بودن یک عنصر را در اسکرول ردیابی کند. اگر عنصر در اسکرول قابل مشاهده نباشد، متقاطع نیست. اگر در داخل اسکرول قابل مشاهده باشد – حتی برای کوچکترین قسمت – متقاطع است.
جدول زمانی نمایش پیشرفت از لحظه ای شروع می شود که سوژه شروع به تقاطع با پیمایش می کند و زمانی پایان می یابد که موضوع از تقاطع آن با پیمایش متوقف شود. در تصویرسازی زیر، می بینید که وقتی سوژه وارد محفظه اسکرول می شود، پیشرفت از 0 درصد شروع به شمارش می کند و درست در لحظه ای که سوژه از محفظه اسکرول خارج شده است به 100 درصد می رسد.
✨ خودتان آن را امتحان کنید
یک جدول زمانی نمایش پیشرفت اغلب به صورت اختصاری به سادگی "مشاهده جدول زمانی" خوانده می شود. این امکان وجود دارد که بخشهای خاصی از View Timeline را بر اساس اندازه سوژه مورد هدف قرار دهید، اما بعداً در مورد آن بیشتر توضیح خواهیم داد.
عملی شدن با جدول زمانی پیشرفت پیمایش
ایجاد یک جدول زمانی پیشرفت اسکرول ناشناس در CSS
ساده ترین راه برای ایجاد خط زمانی اسکرول در CSS استفاده از تابع scroll()
است. این یک Scroll Timeline ناشناس ایجاد می کند که می توانید آن را به عنوان مقدار ویژگی جدید animation-timeline
تنظیم کنید.
مثال:
@keyframes animate-it { … }
.subject {
animation: animate-it linear;
animation-timeline: scroll(root block);
}
تابع scroll()
یک آرگومان <scroller>
و <axis>
را می پذیرد.
مقادیر پذیرفته شده برای آرگومان <scroller>
به شرح زیر است:
-
nearest
: از نزدیکترین محفظه اسکرول اجداد (پیش فرض) استفاده می کند. -
root
: از نمای سند به عنوان محفظه اسکرول استفاده می کند. -
self
: از خود عنصر به عنوان محفظه اسکرول استفاده می کند.
مقادیر پذیرفته شده برای آرگومان <axis>
به شرح زیر است:
-
block
: از معیار پیشرفت در امتداد محور بلوک ظرف اسکرول (پیشفرض) استفاده میکند. -
inline
: از اندازه گیری پیشرفت در امتداد محور درونی ظرف اسکرول استفاده می کند. -
y
: از معیار پیشرفت در امتداد محور y ظرف اسکرول استفاده می کند. -
x
: از معیار پیشرفت در امتداد محور x ظرف اسکرول استفاده می کند.
به عنوان مثال، برای اتصال یک انیمیشن به پیمایش ریشه در محور بلوک، مقادیری که باید به scroll()
منتقل شوند root
و block
هستند. با هم، مقدار scroll(root block)
است.
نسخه ی نمایشی: نشانگر پیشرفت خواندن
این نسخه نمایشی دارای یک نشانگر پیشرفت خواندن است که در بالای پنجره نمایش ثابت شده است. همانطور که صفحه را به پایین اسکرول می کنید، نوار پیشرفت بزرگ می شود تا زمانی که پس از رسیدن به انتهای سند، عرض پورت نمای کامل را بگیرد. یک جدول زمانی پیشرفت پیمایش ناشناس برای هدایت انیمیشن استفاده می شود.
✨ خودتان آن را امتحان کنید
نشانگر پیشرفت خواندن با استفاده از موقعیت ثابت در بالای صفحه قرار می گیرد. برای استفاده از انیمیشن های ترکیبی، width
متحرک نمی شود، بلکه عنصر در محور x با استفاده از transform
کوچک می شود.
<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();
}
جدول زمانی برای انیمیشن grow-progress
در عنصر #progress
روی یک جدول زمانی ناشناس تنظیم شده است که با استفاده از scroll()
ایجاد میشود. هیچ آرگومانی به scroll()
داده نمی شود، بنابراین به مقادیر پیش فرض خود باز می گردد.
پیمایش پیشفرض برای ردیابی nearest
است و محور پیشفرض block
است. این به طور موثر اسکرول ریشه را مورد هدف قرار می دهد زیرا نزدیکترین پیشین عنصر #progress
است، در حالی که جهت بلوک آن را ردیابی می کند.
ایجاد یک جدول زمانی با نام Scroll Progress در CSS
یک راه جایگزین برای تعریف جدول زمانی پیشرفت پیمایش استفاده از یک نامگذاری شده است. کمی پرمخاطبتر است، اما زمانی که پیمایش والد یا اسکرول اصلی را هدف قرار نمیدهید، یا زمانی که صفحه از چندین خط زمانی استفاده میکند یا جستجوهای خودکار کار نمیکند، میتواند مفید باشد. به این ترتیب، می توانید جدول زمانی پیشرفت پیمایش را با نامی که به آن می دهید شناسایی کنید.
برای ایجاد یک جدول زمانی پیشرفت اسکرول با نام روی یک عنصر، ویژگی scroll-timeline-name
CSS در ظرف اسکرول را روی یک شناسه دلخواه تنظیم کنید. مقدار باید با --
شروع شود.
برای اینکه کدام محور را ردیابی کنید، ویژگی scroll-timeline-axis
نیز اعلام کنید. مقادیر مجاز همان آرگومان <axis>
scroll()
است.
در نهایت، برای پیوند دادن انیمیشن به جدول زمانی Scroll Progress، ویژگی animation-timeline
را روی عنصری که باید متحرک شود، با همان مقدار شناسه استفاده شده برای scroll-timeline-name
تنظیم کنید.
مثال کد:
@keyframes animate-it { … }
.scroller {
scroll-timeline-name: --my-scroller;
scroll-timeline-axis: inline;
}
.scroller .subject {
animation: animate-it linear;
animation-timeline: --my-scroller;
}
در صورت تمایل، می توانید scroll-timeline-name
و scroll-timeline-axis
در کوتاه نویسی scroll-timeline
پیمایش ترکیب کنید. به عنوان مثال:
scroll-timeline: --my-scroller inline;
نسخه ی نمایشی: نشانگر گام چرخ فلک افقی
این نسخه نمایشی دارای یک نشانگر مرحله است که در بالای هر چرخ فلک تصویر نشان داده شده است. هنگامی که یک چرخ فلک شامل سه تصویر است، نوار نشانگر از عرض 33% شروع می شود تا نشان دهد که در حال حاضر به تصویر یک از سه نگاه می کنید. هنگامی که آخرین تصویر در معرض دید قرار می گیرد – که توسط پیمایشگر که تا انتها حرکت کرده است مشخص می شود – نشانگر تمام عرض پیمایش را اشغال می کند. برای هدایت انیمیشن از یک Scroll Progress Timeline استفاده می شود.
✨ خودتان آن را امتحان کنید
نشانه گذاری پایه برای یک گالری این است:
<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
کاملاً درون عنصر wrapper .gallery
قرار دارد. اندازه اولیه آن توسط ویژگی سفارشی --num-images
تعیین می شود.
.gallery {
position: relative;
}
.gallery__progress {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1em;
transform: scaleX(calc(1 / var(--num-images)));
}
.gallery__scrollcontainer
عناصر .gallery__entry
موجود را به صورت افقی قرار می دهد و عنصری است که پیمایش می کند. با ردیابی موقعیت اسکرول آن، .gallery__progress
متحرک می شود. این کار با مراجعه به Scroll Progress Timeline --gallery__scrollcontainer
انجام می شود.
@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;
}
ایجاد جدول زمانی پیشرفت اسکرول با جاوا اسکریپت
برای ایجاد یک Scroll Timeline در جاوا اسکریپت، یک نمونه جدید از کلاس ScrollTimeline
ایجاد کنید. در یک کیف دارایی با source
و axis
که میخواهید ردیابی کنید عبور کنید.
-
source
: اشاره به عنصری که میخواهید پیمایش آن را ردیابی کنید. ازdocument.documentElement
برای هدف قرار دادن اسکرول ریشه استفاده کنید. -
axis
: تعیین می کند که کدام محور را دنبال کند. مشابه نوع CSS، مقادیر پذیرفته شده عبارتند از:block
،inline
،x
وy
.
const tl = new ScrollTimeline({
source: document.documentElement,
});
برای پیوست کردن آن به یک انیمیشن وب، آن را به عنوان ویژگی timeline
ارسال کنید و در صورت وجود duration
حذف کنید.
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
});
نسخه ی نمایشی: نشانگر پیشرفت خواندن، بازبینی شده است
برای ایجاد مجدد نشانگر پیشرفت خواندن با جاوا اسکریپت، در حالی که از همان نشانه گذاری استفاده می کنید، از کد جاوا اسکریپت زیر استفاده کنید:
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 یکسان است: timeline
ایجاد شده پیمایش ریشه را ردیابی میکند و با اسکرول صفحه، #progress
در محور x از 0% به 100% افزایش میدهد.
✨ خودتان آن را امتحان کنید
عملی شدن با نمایش جدول زمانی پیشرفت
ایجاد جدول زمانی پیشرفت نمایش ناشناس در CSS
برای ایجاد جدول زمانی View Progress، از تابع view()
استفاده کنید. آرگومان های پذیرفته شده آن <axis>
و <view-timeline-inset>
هستند.
-
<axis>
مانند جدول زمانی پیشرفت پیمایش است و مشخص می کند که کدام محور را ردیابی کند. مقدار پیش فرضblock
است. - با
<view-timeline-inset>
، میتوانید یک افست (مثبت یا منفی) را برای تنظیم کرانها در زمانی که عنصری در نظر گرفته میشود در نظر گرفته میشود مشخص کنید. مقدار باید یک درصد یاauto
باشد که مقدار پیشفرضauto
است.
به عنوان مثال، برای اتصال یک انیمیشن به عنصری که با پیمایش آن در محور بلوک تقاطع دارد، از view(block)
استفاده کنید. مشابه scroll()
این را به عنوان مقدار خاصیت animation-timeline
تنظیم کنید و فراموش نکنید که animation-duration
روی auto
تنظیم کنید.
با استفاده از کد زیر، هر img
هنگام عبور از ویوپورت هنگام اسکرول محو می شود.
@keyframes reveal {
from { opacity: 0; }
to { opacity: 1; }
}
img {
animation: reveal linear;
animation-timeline: view();
}
Intermezzo: محدودههای جدول زمانی را مشاهده کنید
بهطور پیشفرض، انیمیشنی که به View Timeline پیوند داده شده است، به کل محدوده خط زمانی متصل میشود. این از لحظه ای شروع می شود که سوژه در شرف ورود به اسکرولپورت است و زمانی پایان می یابد که سوژه به طور کامل از اسکرولپورت خارج شود.
همچنین می توان با تعیین محدوده ای که باید به آن متصل شود، آن را به بخش خاصی از View Timeline پیوند داد. این می تواند، برای مثال، تنها زمانی باشد که سوژه در حال ورود به اسکرولر باشد. در تصویرسازی زیر، زمانی که سوژه وارد محفظه اسکرول میشود، پیشرفت از 0 درصد شروع به شمارش میکند، اما از لحظهای که کاملاً قطع میشود به 100 درصد میرسد.
محدودههای ممکن View Timeline که میتوانید هدف قرار دهید به شرح زیر است:
-
cover
: گستره کامل جدول زمانی پیشرفت نمایش را نشان می دهد. -
entry
: نشان دهنده محدوده ای است که در طی آن کادر اصلی وارد محدوده دید پیشرفت نمایش می شود. -
exit
: نشان دهنده محدوده ای است که در طی آن کادر اصلی از محدوده دید پیشرفت نمایش خارج می شود. -
entry-crossing
: نشان دهنده محدوده ای است که در طی آن جعبه اصلی از لبه مرزی انتهایی عبور می کند. -
exit-crossing
: نشان دهنده محدوده ای است که در طی آن کادر اصلی از لبه مرز شروع عبور می کند. -
contain
: محدوده ای را نشان می دهد که در طی آن کادر اصلی یا به طور کامل توسط محدوده دید پیشرفت نمای آن در اسکرولپورت قرار می گیرد یا به طور کامل پوشش داده می شود. این بستگی به این دارد که آیا سوژه بلندتر یا کوتاهتر از اسکرولر باشد.
برای تعریف محدوده، باید یک range-start و range-end تنظیم کنید. هر کدام از نام محدوده (به لیست بالا مراجعه کنید) و یک فاصله برای تعیین موقعیت در آن نام محدوده تشکیل شده است. محدوده افست معمولاً درصدی از 0%
تا 100%
است، اما می توانید طول ثابتی مانند 20em
را نیز تعیین کنید.
به عنوان مثال، اگر می خواهید انیمیشنی را از لحظه ورود سوژه اجرا کنید، entry 0%
به عنوان شروع محدوده انتخاب کنید. برای اینکه تا زمانی که موضوع وارد شده است تمام شود، entry 100%
به عنوان مقداری برای محدوده پایان انتخاب کنید.
در CSS، این را با استفاده از ویژگی animation-range
تنظیم می کنید. مثال:
animation-range: entry 0% entry 100%;
در جاوا اسکریپت از ویژگی rangeStart
و rangeEnd
استفاده کنید.
$el.animate(
keyframes,
{
timeline: tl,
rangeStart: 'entry 0%',
rangeEnd: 'entry 100%',
}
);
از ابزار تعبیه شده در زیر استفاده کنید تا ببینید هر نام محدوده چه چیزی را نشان می دهد و چگونه درصدها بر موقعیت های شروع و پایان تأثیر می گذارد. سعی کنید محدوده شروع را روی entry 0%
و محدوده پایان را cover 50%
تنظیم کنید و سپس نوار اسکرول را بکشید تا نتیجه انیمیشن را ببینید.
یک ضبط را تماشا کنید
همانطور که ممکن است در حین بازی کردن با ابزارهای View Timeline Ranges متوجه شوید، برخی از محدوده ها را می توان با دو ترکیب مختلف محدوده-نام + محدوده-offset مورد هدف قرار داد. به عنوان مثال، entry 0%
، entry-crossing 0%
، و cover 0%
همه یک منطقه را هدف قرار می دهند.
هنگامی که محدوده شروع و پایان محدوده یک نام محدوده را هدف قرار می دهند و کل محدوده را در بر می گیرند – از 0٪ تا 100٪ - می توانید مقدار را فقط به نام محدوده کوتاه کنید. به عنوان مثال، animation-range: entry 0% entry 100%;
می توان به animation-range: entry
.
نسخه ی نمایشی: نمایش تصویر
این دمو در تصاویر با ورود به اسکرولپورت محو می شود. این کار با استفاده از Timeline View Anonymous انجام می شود. محدوده انیمیشن به گونهای بهینهسازی شده است که هر تصویر زمانی که در نیمه راه اسکرول قرار دارد، شفافیت کامل داشته باشد.
✨ خودتان آن را امتحان کنید
جلوه گسترش با استفاده از یک مسیر کلیپ که متحرک است به دست می آید. CSS مورد استفاده برای این افکت این است:
@keyframes reveal {
from { opacity: 0; clip-path: inset(0% 60% 0% 50%); }
to { opacity: 1; clip-path: inset(0% 0% 0% 0%); }
}
.revealing-image {
animation: auto linear reveal both;
animation-timeline: view();
animation-range: entry 25% cover 50%;
}
ایجاد یک جدول زمانی با نام View Progress در CSS
مشابه نحوه نامگذاری نسخههای Scroll Timelines، شما همچنین میتوانید با نام View Timelines ایجاد کنید. به جای ویژگیهای scroll-timeline-*
از انواعی استفاده میکنید که دارای پیشوند view-timeline-
هستند، یعنی view-timeline-name
و view-timeline-axis
.
همان نوع مقادیر اعمال می شود، و قوانین مشابه برای جستجوی یک جدول زمانی نامگذاری شده اعمال می شود.
نسخه ی نمایشی: نمایش تصویر، بازبینی مجدد
با کار مجدد روی دموی آشکار تصویر قبلی، کد اصلاح شده به این صورت است:
.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
، عنصر در نزدیکترین اسکرول خود ردیابی می شود. سپس همان مقدار به عنوان مقدار ویژگی animation-timeline
استفاده می شود. خروجی بصری دقیقاً مانند قبل است.
✨ خودتان آن را امتحان کنید
ایجاد جدول زمانی نمایش پیشرفت در جاوا اسکریپت
برای ایجاد یک View Timeline در جاوا اسکریپت، یک نمونه جدید از کلاس ViewTimeline
ایجاد کنید. در یک کیف دارایی با subject
که میخواهید ردیابی کنید، axis
و inset
عبور دهید.
-
subject
: ارجاع به عنصری که میخواهید در پیمایشگر خود آن را ردیابی کنید. -
axis
: محوری که باید ردیابی شود. مشابه نوع CSS، مقادیر پذیرفته شده عبارتند از:block
،inline
،x
وy
. -
inset
: یک تنظیم داخلی (مثبت) یا ابتدایی (منفی) از Scrollport هنگام تعیین اینکه آیا جعبه در دید است یا خیر.
const tl = new ViewTimeline({
subject: document.getElementById('subject'),
});
برای پیوست کردن آن به یک انیمیشن وب، آن را به عنوان ویژگی timeline
ارسال کنید و در صورت وجود duration
حذف کنید. به صورت اختیاری، اطلاعات محدوده را با استفاده از ویژگی rangeStart
و rangeEnd
ارسال کنید.
$el.animate({
opacity: [0, 1],
}, {
timeline: tl,
rangeStart: 'entry 25%',
rangeEnd: 'cover 50%',
});
✨ خودتان آن را امتحان کنید
چیزهای بیشتری برای امتحان کردن
با یک مجموعه از فریمهای کلیدی، به چندین محدوده View Timeline متصل میشود
بیایید نگاهی به این نسخه نمایشی لیست مخاطبین بیندازیم که در آن ورودی های لیست متحرک هستند. همانطور که یک ورودی لیست از پایین وارد اسکرولپورت می شود، به داخل اسلاید+محو می شود و با خروج از اسکرولپورت در بالا، اسلاید+محو می شود.
✨ خودتان آن را امتحان کنید
برای این نسخه ی نمایشی، هر عنصر با یک View Timeline تزئین می شود که عنصر را در هنگام عبور از اسکرول پورت خود ردیابی می کند، اما دو انیمیشن اسکرول محور به آن متصل می شود. انیمیشن animate-in
به محدوده entry
خط زمانی و انیمیشن animate-out
به محدوده exit
جدول زمانی متصل می شود.
@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;
}
به جای اجرای دو انیمیشن مختلف متصل به دو محدوده مختلف، همچنین می توان یک مجموعه از فریم های کلیدی ایجاد کرد که از قبل حاوی اطلاعات محدوده باشد.
@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();
}
از آنجایی که فریم های کلیدی حاوی اطلاعات محدوده هستند، نیازی به تعیین animation-range
ندارید. نتیجه دقیقاً همان چیزی است که قبلاً بود.
✨ خودتان آن را امتحان کنید
پیوست کردن به جدول زمانی پیمایش غیر اجدادی
مکانیسم جستجو برای Scroll Timelines و View Timelines نامگذاری شده فقط به اجداد اسکرول محدود می شود. با این حال، اغلب، عنصری که باید متحرک شود، فرزند پیمایشی نیست که باید ردیابی شود.
برای انجام این کار، ویژگی timeline-scope
وارد بازی می شود. شما از این ویژگی برای اعلام جدول زمانی با آن نام استفاده می کنید بدون اینکه واقعاً آن را ایجاد کنید. این به جدول زمانی با آن نام دامنه وسیع تری می دهد. در عمل، شما از ویژگی timeline-scope
در یک عنصر والد مشترک استفاده میکنید تا خط زمانی یک پیشینگر فرزند بتواند به آن متصل شود.
به عنوان مثال:
.parent {
timeline-scope: --tl;
}
.parent .scroller {
scroll-timeline: --tl;
}
.parent .scroller ~ .subject {
animation: animate linear;
animation-timeline: --tl;
}
در این قطعه:
- عنصر
.parent
خط زمانی را با نام--tl
اعلام می کند. هر فرزند آن می تواند آن را به عنوان یک مقدار برای ویژگیanimation-timeline
بیابد و از آن استفاده کند. - عنصر
.scroller
در واقع یک Scroll Timeline با نام--tl
تعریف می کند. بهطور پیشفرض فقط برای فرزندانش قابل مشاهده است، اما چون.parent
آن را بهعنوانscroll-timeline-root
تنظیم کرده است، به آن متصل میشود. - عنصر
.subject
از جدول زمانی--tl
استفاده می کند. از درخت جد خود بالا می رود و--tl
در.parent
می یابد. با--tl
روی.parent
که به--tl
.scroller
اشاره می کند،.subject
اساسا جدول زمانی پیشرفت پیمایش.scroller
. را دنبال می کند.
به عبارت دیگر، میتوانید از timeline-root
برای انتقال خط زمانی به یک جد (با نام مستعار hoisting ) استفاده کنید تا همه فرزندان جد بتوانند به آن دسترسی داشته باشند.
ویژگی timeline-scope
می توان هم با Scroll Timelines و هم برای View Timelines استفاده کرد.
دموها و منابع بیشتر
همه نسخههای نمایشی که در این مقاله در سایت کوچک scroll-driven-animations.style پوشش داده شده است. این وبسایت شامل بسیاری از نمایشهای نمایشی است تا آنچه را که با انیمیشنهای Scroll-driven امکانپذیر است برجسته کند.
یکی از دموهای اضافی این لیست از جلدهای آلبوم است. هر پوشش به صورت سه بعدی می چرخد زیرا مرکز توجه را به خود اختصاص می دهد.
✨ خودتان آن را امتحان کنید
یا این کارتهای انباشته، position: sticky
. همانطور که کارتها روی هم چیده میشوند، کارتهای از قبل گیر کرده کوچک میشوند و جلوه عمق خوبی ایجاد میکنند. در پایان، کل پشته به عنوان یک گروه از دید خارج می شود.
✨ خودتان آن را امتحان کنید
همچنین در scroll-driven-animations.style مجموعهای از ابزارها مانند نمایش زمانخط پیشروی تجسمسازی است که قبلاً در این پست گنجانده شده است.
انیمیشنهای اسکرولمحور نیز در قسمت تازههای Web Animations در Google I/O '23 پوشش داده شدهاند.