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

# Image Parallax

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

```css
.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;
}
```

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

## GSAP версия

```javascript
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` | Отключать на мобильных |