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