genesis
4bbe7f68da
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
16 lines
1.5 KiB
Markdown
Executable File
16 lines
1.5 KiB
Markdown
Executable File
# 🏃 Steps Sprite Animation
|
|
|
|
Интерактивная демонстрация покадровой анимации с использованием CSS-свойства `animation-timing-function: steps()`. Этот метод позволяет оживить спрайт-листы, превращая их в плавную анимацию персонажа.
|
|
|
|
### Особенности
|
|
|
|
- **Sprite Sheets**: Использование одного изображения (спрайта) для создания многокадровой анимации.
|
|
- **Steps Logic**: Применение функции `steps(10)`, которая разбивает движение фона на дискретные кадры, имитируя классическую мультипликацию.
|
|
- **Interactive Control**: Возможность изменять скорость анимации и просматривать полную ленту спрайта с помощью встроенных контроллов (JS/jQuery).
|
|
|
|
### Технологии
|
|
|
|
- **HTML5 / CSS3**: Основная логика анимации и стилизация элементов интерфейса.
|
|
- **jQuery**: Используется для управления скоростью (`animation-duration`) и переключения режимов отображения.
|
|
- **WebKit Optimization**: Специальные стили для кастомизации ползунков (range input) и чекбоксов в браузерах на движке WebKit.
|