یه چیز جدید توی css یاد گرفتم باهاتون میخوام شیر کنم !

پارالاکس یعنی وقتی کاربر صفحه رو اسکرول می‌کنه، لایه‌های مختلف با سرعت متفاوت حرکت کنن؛ مثلاً متن عادی بالا بیاد ولی عکس پس‌زمینه کمی کندتر جابه‌جا بشه و صفحه حس عمق بگیره. قبلاً برای این کار معمولاً سراغ JavaScript می‌رفتیم، ولی الان با CSS جدید می‌شه خود انیمیشن رو به اسکرول وصل کرد؛ یعنی انیمیشن به جای زمان، با حرکت اسکرول جلو می‌ره. مثلاً خیلی ساده می‌تونیم بگیم عکس داخل یک بخش، موقع اسکرول کمی بالا و پایین حرکت کنه:

.parallax {
  overflow: hidden;
  view-timeline-name: --parallax;
}

.parallax img {
  animation: moveImage linear both;
  animation-timeline: --parallax;
  animation-range: cover;
}

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

  to {
    transform: translateY(20%);
  }
}

خلاصه‌اش اینه: برای افکت‌هایی مثل پارالاکس، قبل از اینکه سریع بریم سراغ JS، بهتره اول ببینیم خود CSS راه‌حل سبک‌تر و تمیزتری نداره.

https://dan-webnotes.com/posts/2026-06-02-css-native-parallax-effect/

@codehalics | کدهالیک