wow-design-wiki/media/image-parallax.md

name, title, description, tags, source

name	title	description	tags	source
media/image-parallax	Image Parallax	Images moving at different scroll speeds. Creates depth.	media parallax image scroll depth	apple.com, amppz.com, brad.co, godly.website

Image Parallax

CSS-only реализация

.parallax-section {
  height: 100vh;
  overflow: hidden;
  position: relative;
}

.parallax-image {
  position: absolute;
  top: -20%;
  left: 0;
  width: 100%;
  height: 140%;
  background: url('/parallax.jpg') center/cover;
  will-change: transform;
}

window.addEventListener('scroll', () => {
  const scrolled = window.scrollY;
  const parallax = document.querySelector('.parallax-image');
  if (parallax) {
    parallax.style.transform = `translateY(${scrolled * 0.5}px)`;
  }
});

GSAP версия

gsap.to('.parallax-image', {
  yPercent: 50,
  ease: 'none',
  scrollTrigger: {
    trigger: '.parallax-section',
    start: 'top bottom',
    end: 'bottom top',
    scrub: true
  }
});

Anti-patterns

❌ Плохо	✅ Хорошо
Без will-change	will-change: transform
scrub: 0	scrub: 1
Без prefers-reduced-motion	Отключать на мобильных