58 lines
1.2 KiB
Markdown
58 lines
1.2 KiB
Markdown
---
|
||
name: typography/kinetic-text
|
||
title: Kinetic Typography
|
||
description: Animated text — scroll-triggered reveals, word-by-word animations, text masking.
|
||
tags: [typography, kinetic, animation, reveal, text]
|
||
source: brad.co, amppz.com, godly.website, linear.app
|
||
---
|
||
|
||
# Kinetic Typography
|
||
|
||
## 1. Scroll Reveal Text
|
||
|
||
```html
|
||
<h1 class="kinetic-text">
|
||
<span class="word">Превосходство</span>
|
||
<span class="word">в</span>
|
||
<span class="word">деталях</span>
|
||
</h1>
|
||
```
|
||
|
||
```css
|
||
.word {
|
||
display: inline-block;
|
||
opacity: 0;
|
||
transform: translateY(30px);
|
||
transition: all 0.6s ease;
|
||
}
|
||
.word.revealed {
|
||
opacity: 1;
|
||
transform: translateY(0);
|
||
}
|
||
```
|
||
|
||
## 2. Typewriter Effect
|
||
|
||
```css
|
||
.typewriter {
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
border-right: 3px solid #6366f1;
|
||
animation: typing 3s steps(40) forwards, blink 0.7s step-end infinite;
|
||
}
|
||
@keyframes typing {
|
||
from { width: 0; }
|
||
to { width: 100%; }
|
||
}
|
||
@keyframes blink {
|
||
50% { border-color: transparent; }
|
||
}
|
||
```
|
||
|
||
## Anti-patterns
|
||
|
||
| ❌ Плохо | ✅ Хорошо |
|
||
|----------|-----------|
|
||
| Без `prefers-reduced-motion` | Уважать настройки |
|
||
| 500ms transition | 0.6–1s для читаемости |
|