neo
76c4c5b4fe
- 74 brands: airbnb, stripe, apple, figma, linear, vercel, etc. - 147 files: DESIGN.md + README.md per brand (~2.1 MB) - Each DESIGN.md contains structured brand analysis (colors, typography, components) - Updated 00-overview.md with new design-systems directory
1.2 KiB
1.2 KiB
name, title, description, tags, source
| name | title | description | tags | source | |||||
|---|---|---|---|---|---|---|---|---|---|
| media/image-parallax | Image Parallax | Images moving at different scroll speeds. Creates 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 |
Отключать на мобильных |