تایم‌لاین اسکرول CSS چند محوری: متحرک‌سازی عناصر در امتداد چندین جهت اسکرول

تایم‌لاین‌های اسکرول CSS در حال متحول کردن انیمیشن‌های وب هستند و روشی کارآمد و شهودی برای همگام‌سازی انیمیشن‌ها با موقعیت اسکرول ارائه می‌دهند. در حالی که پیاده‌سازی‌های اساسی اغلب بر یک جهت اسکرول (عمودی یا افقی) تمرکز دارند، پتانسیل واقعی در استفاده از تایم‌لاین‌های اسکرول چند محوری است. این تکنیک به شما امکان می‌دهد عناصر را بر اساس حرکت در امتداد محورهای X و Y متحرک کنید و تجربه‌های کاربری غنی‌تر و جذاب‌تری ایجاد کنید.

درک تایم‌لاین‌های اسکرول

قبل از پرداختن به انیمیشن‌های چند محوری، بیایید مفاهیم اساسی تایم‌لاین‌های اسکرول CSS را مرور کنیم.

تایم‌لاین‌های اسکرول چیست؟

تایم‌لاین‌های اسکرول، پیشرفت یک انیمیشن CSS را به موقعیت اسکرول یک عنصر مشخص (منبع اسکرول) متصل می‌کنند. با اسکرول کاربر، انیمیشن به نسبت پیشرفت می‌کند.

ویژگی‌های کلیدی

• scroll-timeline-source: عنصری را تعریف می‌کند که موقعیت اسکرول آن انیمیشن را هدایت می‌کند. این معمولاً ظرف اسکرول است.
• scroll-timeline-axis: محور اسکرول را برای ردیابی مشخص می‌کند ('block'، 'inline'، 'vertical'، 'horizontal'). این برای درک اینکه چگونه انیمیشن‌های چند محوری این مفهوم را گسترش می‌دهند بسیار مهم است.
• animation-timeline: انیمیشن را به تایم‌لاین اسکرول تعریف شده متصل می‌کند.

قدرت تایم‌لاین‌های اسکرول چند محوری

انیمیشن‌های سنتی مبتنی بر اسکرول به یک جهت اسکرول محدود می‌شوند. به عنوان مثال، ممکن است یک عنصر هنگام اسکرول به پایین صفحه (محور عمودی) محو شود یا هنگام اسکرول افقی در یک گالری (محور افقی) به داخل دید بلغزد. تایم‌لاین‌های اسکرول چند محوری این امکان را فراهم می‌کنند تا این جلوه‌ها را ترکیب کرده و انیمیشن‌هایی ایجاد کنید که به طور همزمان به اسکرول عمودی و افقی پاسخ می‌دهند.

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

پیاده‌سازی انیمیشن‌های چند محوری

متأسفانه، پشتیبانی مستقیم از ترکیب محورهای مختلف در یک ویژگی `scroll-timeline-axis` *واحد* (به عنوان مثال، `scroll-timeline-axis: vertical horizontal;`) هنوز در مشخصات CSS موجود نیست. راه حل فعلی شامل ایجاد تایم‌لاین‌های اسکرول جداگانه برای هر محور و سپس سازماندهی انیمیشن‌ها با استفاده از جاوا اسکریپت است.

در اینجا خلاصه‌ای از این فرآیند آمده است:

1. تعریف منابع اسکرول: عناصری را که به عنوان منابع اسکرول افقی و عمودی شما عمل می‌کنند، شناسایی کنید. اینها ممکن است عناصر مختلف یا معمولاً عنصر یکسان (به عنوان مثال، قسمت اصلی محتوای صفحه شما) باشند.
2. ایجاد تایم‌لاین‌های اسکرول CSS: دو تایم‌لاین اسکرول جداگانه تعریف کنید، یکی برای محور عمودی و دیگری برای محور افقی.
3. تعریف انیمیشن‌های CSS: انیمیشن‌های CSS را که می‌خواهید با موقعیت اسکرول همگام کنید، ایجاد کنید. این انیمیشن‌ها می‌توانند شامل تبدیل‌هایی مانند `translate`، `rotate`، `scale` و `opacity` باشند.
4. اتصال انیمیشن‌ها به تایم‌لاین‌ها: از ویژگی `animation-timeline` برای پیوند دادن هر انیمیشن به تایم‌لاین اسکرول مناسب استفاده کنید.
5. سازماندهی جاوا اسکریپت: از جاوا اسکریپت برای خواندن موقعیت‌های اسکرول هر دو محور و تنظیم پویای پیشرفت انیمیشن بر اساس این مقادیر استفاده کنید. اینجاست که جادو اتفاق می‌افتد و به شما امکان می‌دهد جلوه‌های دو تایم‌لاین را ترکیب کنید.

مثال: جلوه اختلاف منظر با حرکت افقی

بیایید یک مثال ساده از جلوه اختلاف منظر ایجاد کنیم که در آن یک تصویر به صورت عمودی با سرعت کمتری نسبت به اسکرول حرکت می‌کند و همچنین با اسکرول کاربر به صورت افقی در یک ظرف، به صورت افقی حرکت می‌کند.

HTML:

            <div class="scroll-container">
  <div class="parallax-image"></div>
</div>
            

              
                Copy
              
            
          

CSS:

            .scroll-container {
  width: 500px; /* Adjust as needed */
  height: 500px; /* Adjust as needed */
  overflow: auto; /* Enable scrolling */
  position: relative;
}

.parallax-image {
  width: 1000px; /* Wider than the container for horizontal panning */
  height: 800px; /* Taller than the container for vertical parallax */
  background-image: url('image.jpg'); /* Replace with your image */
  background-size: cover;
  background-position: center;
  position: absolute;
  top: 0; 
  left: 0;
  scroll-timeline-source: .scroll-container; /* Will not work in CSS alone */
  /*scroll-timeline-axis: vertical; // We will control this with JS*/
}

            

              
                Copy
              
            
          

JavaScript:

            const scrollContainer = document.querySelector('.scroll-container');
const parallaxImage = document.querySelector('.parallax-image');

scrollContainer.addEventListener('scroll', () => {
  const verticalScroll = scrollContainer.scrollTop;
  const horizontalScroll = scrollContainer.scrollLeft;

  // Calculate the vertical offset for the parallax effect
  const verticalOffset = verticalScroll * 0.5; // Adjust the factor for the parallax speed

  // Calculate the horizontal offset for the panning effect
  const horizontalOffset = horizontalScroll * 0.2; // Adjust the factor for the panning speed

  // Apply the transformations
  parallaxImage.style.transform = `translate(${ -horizontalOffset }px, ${ -verticalOffset }px)`;
});
            

              
                Copy
              
            
          

توضیحات:

• HTML یک `scroll-container` و یک `parallax-image` را در آن تنظیم می‌کند. `parallax-image` بزرگتر از ظرف است تا امکان اختلاف منظر عمودی و حرکت افقی را فراهم کند.
• CSS عناصر را استایل می‌کند و طرح‌بندی اصلی را تنظیم می‌کند. توجه داشته باشید که ویژگی `scroll-timeline-axis` را کامنت کرده‌ایم.
• جاوا اسکریپت رویداد اسکرول `scroll-container` را ضبط می‌کند. سپس جابجایی‌های عمودی و افقی را بر اساس موقعیت‌های اسکرول محاسبه می‌کند و یک `transform: translate()` را به `parallax-image` اعمال می‌کند و به طور موثر انیمیشن چند محوری را ایجاد می‌کند. ضرب‌کننده‌های `0.5` و `0.2` سرعت جلوه‌های اختلاف منظر و حرکت را کنترل می‌کنند. می‌توانید این مقادیر را برای تنظیم دقیق انیمیشن تنظیم کنید.

مثال CodePen

در نظر بگیرید که یک مثال تعاملی CodePen را برای نمایش کد در عمل قرار دهید. یک پیوند در اینجا ارائه دهید. این امر درک و تعامل را بسیار افزایش می‌دهد.

تکنیک‌ها و ملاحظات پیشرفته

توابع Easing

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

می‌توانید توابع easing را در جاوا اسکریپت با استفاده از کتابخانه‌های مختلف یا با نوشتن توابع سفارشی خود پیاده‌سازی کنید. تابع easing را به مقادیر `verticalScroll` و `horizontalScroll` *قبل از* محاسبه جابجایی‌ها در مثال جاوا اسکریپت بالا اعمال کنید.

بهینه‌سازی عملکرد

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

• Debouncing و Throttling: با استفاده از تکنیک‌های debouncing یا throttling، فرکانس به‌روزرسانی انیمیشن را محدود کنید. این امر از به‌روزرسانی بیش از حد انیمیشن در هنگام اسکرول سریع جلوگیری می‌کند.
• شتاب سخت‌افزاری: اطمینان حاصل کنید که مرورگر از شتاب سخت‌افزاری برای انیمیشن‌ها استفاده می‌کند. این را می‌توان با استفاده از ویژگی‌های CSS مانند `transform: translateZ(0)` یا `will-change: transform` به دست آورد.
• ساده‌سازی انیمیشن‌ها: از انیمیشن‌های پیچیده‌ای که شامل تعداد زیادی عنصر یا محاسبات فشرده هستند اجتناب کنید. انیمیشن‌ها را تا حد امکان ساده نگه دارید تا تأثیر عملکرد به حداقل برسد.

Intersection Observer

Intersection Observer API می‌تواند برای فعال کردن انیمیشن‌ها فقط زمانی که عنصر هدف در نمای دید است مفید باشد. این می‌تواند با جلوگیری از محاسبات غیرضروری زمانی که عنصر قابل مشاهده نیست، عملکرد را بهبود بخشد.

به عنوان مثال، می‌توانید از Intersection Observer برای شروع انیمیشن فقط زمانی که `parallax-image` در `scroll-container` قابل مشاهده است استفاده کنید. این می‌تواند به ویژه برای صفحات طولانی با چندین انیمیشن مفید باشد.

موارد استفاده و الهام

تایم‌لاین‌های اسکرول چند محوری را می‌توان برای ایجاد طیف گسترده‌ای از تجربه‌های کاربری جذاب استفاده کرد. در اینجا چند مثال آورده شده است:

• نمایشگرهای تعاملی محصول: به کاربران اجازه دهید تا با اسکرول افقی و عمودی یک محصول را به صورت سه بعدی بررسی کنند. محصول می‌تواند بچرخد، بزرگنمایی کند و ویژگی‌های مختلف را با تعامل کاربر با ظرف اسکرول آشکار کند.
• تصویرسازی داده‌ها: نمودارها و گراف‌های پویا ایجاد کنید که با اسکرول کاربر در یک گزارش متحرک می‌شوند. نقاط داده می‌توانند در امتداد هر دو محور حرکت کنند و روندها و بینش‌ها را به روشی جذاب نشان دهند.
• تجربه‌های داستان‌سرایی: کاربران را از طریق یک روایت با همگام‌سازی انیمیشن‌ها با موقعیت اسکرول راهنمایی کنید. تصاویر، متن و سایر عناصر می‌توانند با بررسی داستان توسط کاربر ظاهر شوند، ناپدید شوند و تغییر شکل دهند.
• جلوه‌های اختلاف منظر: عمق بصری یک وب‌سایت را با ایجاد جلوه‌های اختلاف منظر افزایش دهید که در آن لایه‌های مختلف با سرعت‌های مختلف با اسکرول کاربر حرکت می‌کنند. جزء افقی می‌تواند پیچ و تاب منحصر به فردی به طرح‌های اختلاف منظر سنتی اضافه کند.

سازگاری بین مرورگرها

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

رویکرد مبتنی بر جاوا اسکریپت که در این مقاله توضیح داده شده است، یک راه حل سازگارتر با مرورگر ارائه می‌دهد، زیرا به ویژگی‌های استاندارد جاوا اسکریپت و CSS متکی است.

ملاحظات دسترسی

هنگام پیاده‌سازی انیمیشن‌های مبتنی بر اسکرول، مهم است که به دسترسی توجه کنید. اطمینان حاصل کنید که انیمیشن‌ها باعث ایجاد حواس‌پرتی یا تداخل در توانایی کاربر برای پیمایش وب‌سایت نمی‌شوند.

• ارائه کنترل‌ها: به کاربران اجازه دهید در صورت حواس‌پرتی، انیمیشن‌ها را مکث یا غیرفعال کنند. این را می‌توان با افزودن یک دکمه ضامن ساده به دست آورد.
• از انیمیشن‌های معنادار استفاده کنید: اطمینان حاصل کنید که انیمیشن‌ها هدفی را دنبال می‌کنند و صرفاً آشفتگی بصری اضافه نمی‌کنند. انیمیشن‌ها باید تجربه کاربر را بهبود بخشند و اطلاعات ارزشمندی ارائه دهند.
• آزمایش با فناوری‌های کمکی: وب‌سایت را با صفحه‌خوان‌ها و سایر فناوری‌های کمکی آزمایش کنید تا اطمینان حاصل شود که انیمیشن‌ها برای کاربران دارای معلولیت قابل دسترسی هستند.

نتیجه‌گیری

انیمیشن‌های چند محوری تایم‌لاین اسکرول CSS راهی قدرتمند و خلاقانه برای بهبود تجربه‌های کاربری ارائه می‌دهند. در حالی که پشتیبانی مستقیم CSS هنوز در حال تکامل است، رویکرد مبتنی بر جاوا اسکریپت یک راه حل عملی برای ایجاد جلوه‌های خیره‌کننده و تعاملی ارائه می‌دهد. با ترکیب حرکات اسکرول عمودی و افقی، می‌توانید سطح جدیدی از کنترل را باز کنید و تجربه‌های وب واقعاً جذابی ایجاد کنید. به یاد داشته باشید که هنگام پیاده‌سازی این تکنیک‌ها، عملکرد، دسترسی و تجربه کاربر را در اولویت قرار دهید.

منابع یادگیری بیشتر

• MDN Web Docs: CSS Scroll Timeline
• CanIUse: CSS Scroll Timeline
• آموزش‌ها و پست‌های وبلاگ مختلف آنلاین در مورد تایم‌لاین‌های اسکرول CSS.