Morph Menu
→Плавающий blob-индикатор плавно морфится между пунктами меню: позиция и размер догоняют цель через lerp в requestAnimationFrame. Наведите или кликните пункты.
★★★★☆Advanced
Navigation
6 / 6Меню, переходы между страницами и состояниями.
Animated Burger
→Три линии гамбургера трансформируются в крестик с каскадной задержкой, вращением и масштабом — меню раскрывается синхронно. Кликните кнопку.
★★☆☆☆Easy
- transform
- CSS Variables
- transition
- stagger
Floating Dock
→macOS-подобный dock: иконки масштабируются и поднимаются по близости курсора с плавной интерполяцией. Водите мышь над панелью.
★★★★☆Advanced
- transform
- CSS Variables
- requestAnimationFrame
- lerp
- Pointer Events
Radial Menu
→Пункты раскрываются по дуге от центральной кнопки с каскадной задержкой и transform — классический radial fan menu. Кликните центр.
★★★☆☆Medium
- transform
- CSS Variables
- transition
- stagger
- trigonometry
Circular Navigation
→Кольцо пунктов вращается к активному элементу с плавной интерполяцией угла — центр показывает текущий раздел. Кликните пункт на кольце.
★★★★☆Advanced
- transform
- CSS Variables
- requestAnimationFrame
- lerp
- trigonometry
Elastic Navigation
→Индикатор активного таба движется с пружинной физикой: позиция и скорость интегрируются каждый кадр с overshoot — эффект «резинового» переключения.
★★★★☆Advanced
- spring physics
- CSS Variables
- requestAnimationFrame
- DOM
01 / 01