افکت حرکت تصویر هنگام اسکرول با CSS

افکت حرکت تصویر هنگام اسکرول (Scroll Image Effects) از محبوب‌ترین روش‌ها برای افزایش جذابیت بصری صفحات وب است. در این مقاله به روش‌های فقط با CSS و ترکیب CSS با جاوااسکریپت برای پیاده‌سازی پارالکس ساده، حرکت و انیمیشن وابسته به اسکرول می‌پردازیم. نکات مربوط به سازگاری مرورگرها، بهینه‌سازی عملکرد و الگوهای مناسب برای موبایل نیز پوشش داده شده‌اند.

چرا از افکت حرکت تصویر هنگام اسکرول استفاده کنیم؟

• افزایش عمق و حس سه‌بعدی (parallax) بدون ایجاد شلوغی بصری.
• جلب توجه کاربر به بخش‌های کلیدی صفحه.
• افزایش تجربه کاربری با انیمیشن‌های روان و سبک.

روش‌ها و مقایسه سریع

نمونه 1 — پارالکس ساده با background-attachment

<section class="parallax">
  <h2>عنوان بخش</h2>
</section>

.parallax {
  height: 70vh;
  background-image: url('image.jpg');
  background-attachment: fixed;
  background-size: cover;
  background-position: center;
}

توضیح: این روش ساده‌ترین نوع پارالکس است. با background-attachment: fixed، تصویر زمینه نسبت به ویوپورت ثابت می‌ماند در حالی که محتوای صفحه اسکرول می‌کند و جلوه حرکت نسبی ایجاد می‌شود. اما توجه کنید که بسیاری از مرورگرهای موبایل background-attachment: fixed را غیرفعال یا متفاوت پیاده‌سازی می‌کنند.

بهبود/فولبک: برای موبایل می‌توانید از یک عنصر position: fixed در پس‌زمینه استفاده کنید تا سازگاری بهتر شود:

.parallax::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-image: inherit;
  background-size: cover;
  background-position: center;
  z-index: -1;
}

توضیح: در این الگو، از یک شبه‌عنصر (pseudo-element) ثابت استفاده می‌شود که تصویر را همیشه در پشت محتوا نگه می‌دارد و در موبایل قابل اجرا‌تر است. باید مراقب stacking-context و لایه‌بندی باشید.

نمونه 2 — انیمیشن وابسته به اسکرول با CSS آزمایشی (@scroll-timeline)

/* Experimental: works in browsers that support CSS Scroll-Linked Animations */@scroll-timeline my-timeline {
  source: auto;
  orientation: block;
}

.hero-image {
  animation: slide 1s linear both;
  animation-timeline: my-timeline;
}

@keyframes slide {
  from { transform: translateY(20%); }
  to   { transform: translateY(-20%); }
}

توضیح: این کد از قابلیت آزمایشی Scroll-Linked Animations استفاده می‌کند تا انیمیشن یک تصویر مستقیماً به موقعیت اسکرول لینک شود. وقتی مرورگرها این استاندارد را کامل پیاده‌سازی کنند، می‌توان بدون جاوااسکریپت انیمیشن‌های دقیق و کارآمد ساخت. تا زمان پشتیبانی کامل، این روش نیاز به بررسی سازگاری دارد و باید فولبک در نظر گرفت.

فولبک پیشنهادی

برای مرورگرهایی که از @scroll-timeline پشتیبانی نمی‌کنند، از روش جاوااسکریپت سبک زیر استفاده کنید تا CSS variable را بر اساس اسکرول به‌روزرسانی کنید.

نمونه 3 — کنترل دقیق با CSS variable و JavaScript

/* CSS */.hero {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.hero img {
  width: 100%;
  transform: translateY(calc(var(--scroll, 0) * -20%));
  transition: transform 0.1s linear;
  will-change: transform;
}

/* JavaScript */const hero = document.querySelector('.hero');
const img = hero.querySelector('img');

function onScroll() {
  const rect = hero.getBoundingClientRect();
  const viewHeight = window.innerHeight;
  // محاسبه نرمالیزه مقدار اسکرول بین 0 و 1 وقتی بخش قابل مشاهده است
  const scroll = Math.min(Math.max((viewHeight - rect.top) / (viewHeight + rect.height), 0), 1);
  hero.style.setProperty('--scroll', scroll);
}

window.addEventListener('scroll', onScroll, { passive: true });
window.addEventListener('resize', onScroll);
onScroll();

توضیح: در این مثال، جاوااسکریپت مقدار نرمال‌شده‌ای بین 0 و 1 برای متغیر CSS –scroll محاسبه و ست می‌کند. سپس در CSS از این متغیر برای تغییر transform تصویر استفاده می‌شود. این روش کنترل دقیق‌تری نسبت به background-attachment می‌دهد و در موبایل نیز پایدار است. نکته کلیدی استفاده از { passive: true } و will-change برای بهبود عملکرد است.

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

• همیشه از transform و opacity برای انیمیشن استفاده کنید؛ این دو روی GPU اجرا می‌شوند و روان‌تر خواهند بود.
• از تغییر layout properties مثل top/left/height به صورت مداوم بپرهیزید زیرا باعث reflow می‌شود.
• در جاوااسکریپت از requestAnimationFrame برای انیمیشن‌های سنگین استفاده کنید یا از passive listeners برای اسکرول.
• تصاویر را با اندازه مناسب و فرمت فشرده (WebP یا AVIF) بارگذاری کنید تا بار شبکه کاهش یابد.

موارد استفاده و الگوهای کاربردی

• صفحات فرود (Landing pages): استفاده از پارالکس برای هدایت نگاه کاربر به CTA.
• بخش‌های داستان‌گوی سایت (Storytelling sections): حرکت تصاویر با اسکرول حس روایت ایجاد می‌کند.
• نمونه‌کارها و پرتفولیو: برجسته‌سازی پروژه‌ها با افکت اسکرول.

نکته نهایی درباره دسترسی (Accessibility)

همیشه گزینه‌ای برای غیرفعال کردن انیمیشن‌ها در دسترس کاربران قرار دهید. با media query زیر می‌توانید انیمیشن‌های وابسته به اسکرول را برای کاربرانی که prefers-reduced-motion: reduce تنظیم کرده‌اند خاموش کنید:

@media (prefers-reduced-motion: reduce) {
  .hero img {
    transition: none;
    transform: none !important;
  }
}

توضیح: این مدیا کوئری احترام به تنظیمات کاربر را فراهم می‌کند و تجربه را برای افرادی که به حرکات حساس هستند قابل‌تحمل می‌سازد.

خلاصه

برای ایجاد افکت حرکت تصویر هنگام اسکرول می‌توانید از راهکارهای ساده CSS مثل background-attachment استفاده کنید یا از راهکارهای پیشرفته‌تر مانند Scroll-Linked Animations یا ترکیب CSS و جاوااسکریپت بهره ببرید. انتخاب مناسب بستگی به هدف، نیاز به سازگاری با مرورگرها و اهمیت عملکرد دارد. همیشه به بهینه‌سازی تصاویر، استفاده از transform و توجه به دسترسی کاربران توجه کنید.

لطفاً از کمبود ها و مشکلات این محتوا برای ما بنویسید

ارسال