Вращение HTML элементов мышью
Вращение — обыкновенная магия. Это эффект, который может превратить скучную веб страницу в куда более интерактивное пространство. Не смотря на это, вращение было обделено вниманием с момента его добавления в CSS. Propeller.js — JavaScript библиотека позволяющая вращать HTML элементы мышью или тач жестами.
Использование
Как jQuery плагин:
$(nodeOrSelector).propeller(options);
или библиотека без зависимостей
new Propeller(nodeOrSelector, options);
Опции
- inertia — одна из самых ценных опций. Это число от 0 до 1. 0 значит объект перестает вращаться после того как кнопка мыли отпущена. 1 значит вечное вращение. На странице библиотеки использована inertia равная to 0.99.
- speed — позволяет задать начальную скорость вращения. Так же может быть использовано в рантайме, как свойство объекта.
- minimalSpeed — задает минимальную скорость вращения. Работает только при inertia между 0 и 1.
- step позволяет задать шаг в градусах, включая тем самым режим пошагового вращения.
- stepTransitionTime включает CSS transition для пошагового вращения. Это делает переключение между шагами плавным и позволяет использовать easing.
- stepTransitionEasing CSS easing функция для пошагового режима с включенными transition. Тут больше про easing функции
- onRotate коллбек выполняемый при вращении. Получить текущий угол внутри коллбека просто — this.angle.
- onDragStart коллбек выполняемый при начале перетаскивания.
- onDragStop коллбек выполняемый при окончании перетаскивания.
- onStop коллбек выполняемый при окончании вращения. Работает только при inertia между 0 и 1.
Публичные свойства
- angle текущий угол пропеллера.
- speed текущая скорость вращения. Градусы за один кадр.
Быстродействие
Propeller использует requestAnimationFrame и рендеринг через GPU для оптимизации.
Propeller.js на GitHub