با انیمیشن های اسکرول محور عناصر را روی اسکرول متحرک کنید

نحوه کار با Scroll Timelines و View Timelines را بیاموزید تا انیمیشن های پیمایشی را به روشی اعلامی ایجاد کنید.

براموس

تاریخ انتشار: 5 مه 2023

انیمیشن های اسکرول محور

Browser Support

  • کروم: 115.
  • لبه: 115.
  • فایرفاکس: پشت پرچم
  • سافاری: پشتیبانی نمی شود.

Source

انیمیشن های اسکرول محور یک الگوی 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 انجام دهید یا از متد () 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% افزایش می‌یابد.

تجسم جدول زمانی پیشرفت اسکرول. همانطور که به پایین صفحه اسکرول می روید، مقدار پیشرفت از 0٪ تا 100٪ افزایش می یابد.

✨ خودتان آن را امتحان کنید

جدول زمانی پیشرفت پیمایش اغلب به صورت اختصاری «خط زمانی پیمایش» خوانده می شود.

مشاهده جدول زمانی پیشرفت

این نوع جدول زمانی به پیشرفت نسبی یک عنصر خاص در یک ظرف اسکرول مرتبط است. درست مانند جدول زمانی پیشرفت اسکرول، افست اسکرول پیمایش ردیابی می شود. برخلاف جدول زمانی پیشرفت پیمایش، موقعیت نسبی سوژه در آن پیش‌گرد است که پیشرفت را تعیین می‌کند.

این تا حدودی با نحوه عملکرد IntersectionObserver قابل مقایسه است، که می تواند میزان قابل مشاهده بودن یک عنصر را در اسکرول ردیابی کند. اگر عنصر در اسکرول قابل مشاهده نباشد، متقاطع نیست. اگر در داخل اسکرول قابل مشاهده باشد – حتی برای کوچکترین قسمت – متقاطع است.

جدول زمانی نمایش پیشرفت از لحظه ای شروع می شود که سوژه شروع به تقاطع با پیمایش می کند و زمانی پایان می یابد که موضوع از تقاطع آن با پیمایش متوقف شود. در تصویرسازی زیر، می بینید که وقتی سوژه وارد محفظه اسکرول می شود، پیشرفت از 0 درصد شروع به شمارش می کند و درست در لحظه ای که سوژه از محفظه اسکرول خارج شده است به 100 درصد می رسد.

تجسم جدول زمانی نمایش پیشرفت. با عبور سوژه (جعبه سبز) از پیمایش، پیشرفت از 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 برای ردیابی محدوده ورودی سوژه تنظیم شده است. انیمیشن فقط زمانی اجرا می شود که سوژه وارد اسکرولپورت می شود.

محدوده‌های ممکن 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 Visualizer، موجود در https://goo.gle/view-timeline-range-tool

یک ضبط را تماشا کنید

همانطور که ممکن است در حین بازی کردن با ابزارهای 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 امکان‌پذیر است برجسته کند.

یکی از دموهای اضافی این لیست از جلدهای آلبوم است. هر پوشش به صورت سه بعدی می چرخد ​​زیرا مرکز توجه را به خود اختصاص می دهد.

نسخه ی نمایشی: Cover Flow

✨ خودتان آن را امتحان کنید

یا این کارت‌های انباشته، position: sticky . همانطور که کارت‌ها روی هم چیده می‌شوند، کارت‌های از قبل گیر کرده کوچک می‌شوند و جلوه عمق خوبی ایجاد می‌کنند. در پایان، کل پشته به عنوان یک گروه از دید خارج می شود.

نسخه ی نمایشی: روی هم گذاشتن کارت ها .

✨ خودتان آن را امتحان کنید

همچنین در scroll-driven-animations.style مجموعه‌ای از ابزارها مانند نمایش زمان‌خط پیشروی تجسم‌سازی است که قبلاً در این پست گنجانده شده است.

انیمیشن‌های اسکرول‌محور نیز در قسمت تازه‌های Web Animations در Google I/O '23 پوشش داده شده‌اند.