init: репозиторий backgrounds
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
This commit is contained in:
Executable
+15
@@ -0,0 +1,15 @@
|
||||
# 🏃 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.
|
||||
Reference in New Issue
Block a user