Rotate HTML elements with mouse
Easy-to-use as jQuery plugin:
or zero-dependancy library
new Propeller(nodeOrSelector, options);
- inertia is the most valueble option. It is a number between 0 and 1. 0 means no rotation after mouse was released. 1 means infinite rotation. For demo we use inertia equals to 0.99.
- speed – initial speed of rotation. It also can be used as property in runtime.
- minimalSpeed – minimal speed of rotation. Works only when inertia is between 0 and 1.
- step allows to set step in degrees for stepwise mode.
- stepTransitionTime enables CSS transition to move from step to step. This makes steps smooth and allows to use CSS transitions easing.
- stepTransitionEasing CSS easing mode for transition when in stepwise mode and stepTransitionTime is more than zero. A bit more about easing functions
- onRotate callback executed when rotated. You can easily get current angle as this.angle inside of callback function.
- onDragStart callback executed when drag starts.
- onDragStop callback executed when drag stops.
- onStop callback executed when rotation stops. Works only when inertia is between 0 and 1.
- angle current propellers angle.
- speed current speed of rotation. Degrees per frame.