Initial commit: 79+ design patterns, LLM prompts, and assets

media/image-parallax.md

@@ -0,0 +1,62 @@
+---
+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` | Отключать на мобильных |