genesis
4bbe7f68da
— Добавлен animated-cubes (геометрический полет на Keyframes) — Добавлен solar-system-orrery (модель системы на Orbital Motion) — Добавлен parallax-star (звездное небо на Box-Shadow) — Добавлен fireflies (эффект светлячков и мягкого свечения) — Добавлен steps-sprite-animation (покадровая анимация с jQuery управлением)
1.5 KiB
Executable File
1.5 KiB
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.