سلام! وقتت بخیر. در این مطلب قراره با یکی از خصوصیات جالب CSS به نام scroll-timeline-axis آشنا بشیم. این خصوصیت که به تازگی معرفی شده، به ما امکان می‌ده دنباله‌های انیمیشن با محوریت اسکرول ایجاد کنیم.
حالا شاید بپرسید «چرا اصلاً این موضوع مهمه؟». خب، فرض کنید شما مدیر یک پروژه وب بزرگ هستید و باید بصورت همزمان چندین انیمیشن را با محوریت اسکرول پیاده‌سازی کنید. با این خصوصیت به راحتی می‌تونید بدون استفاده از ابزارهای جانبی به این مهم دست پیدا کنید.
جدای از راحتی در پیاده‌سازی، استفاده از scroll-timeline-axis باعث میشه که انیمیشن‌های شما بهتر و بهینه‌تر بارگزاری بشن و نتیجه بهتری برای کاربر نهایی ایجاد بشه.
این ویژگی به شما قدرت بیشتری در طراحی انیمیشن‌های با محوریت اسکرول می‌ده. به راحتی می‌تونید محور انیمیشن‌هارو تعیین کنید و با تأکید بر کاربرپسند بودن وبسایت، تجربه بهتری رو به کاربر ارائه بدین.
در ادامه مثال ساده‌ای از نحوه استفاده از این ویژگی رو می‌بینید:
<style>
@keyframes scroll-animation {
from { transform: translateX(0); }
to { transform: translateX(100px); }
}
.animated-element {
animation: scroll-animation 1s linear infinite;
scroll-timeline-axis: block;
}
</style>
<div class="animated-element">
در حال حرکت با اسکرول!
</div>
توضیحات کد خط به خط
<style>
با این تگ استایل‌ها رو در داخل سند HTML تعیین می‌کنیم.
@keyframes scroll-animation
یک تابع کی‌فریم برای تعریف انیمیشن ایجاد می‌کنیم که قرار است در امتداد محور X حرکت کند.
transform: translateX(0);
موقعیت شروع انیمیشن رو تعیین می‌کنه که از صفر شروع میشه.
to { transform: translateX(100px); }
موقعیت نهایی انیمیشن رو مشخص می‌کنه که صد پیکسل به راست حرکت می‌کنه.
.animated-element
کلاسی که برای عنصر متحرک استفاده می‌کنیم.
animation: scroll-animation 1s linear infinite;
مقدار و تکرار انیمیشن تعریف شده رو معین می‌کنیم.
scroll-timeline-axis: block;
محور زمانی انیمیشن مرتبط با اسکرول رو مشخص می‌کنیم که در اینجا محور بلوک انتخاب شده.
<div class="animated-element">
عنصری که انیمیشن براش تعریف شده رو می‌سازیم.
در حال حرکت با اسکرول!
متنی که داخل عنصر متحرک نمایش داده میشه.
</div>
پایان عنصر متحرک.