Rotate HTML elements with mouse
Rotation is an everyday magic. It is an effect which can transform boring web page to a much more interactive place. Since rotation was added to CSS specification it have been deprived of attention. However a lot of cases need to rotate elements with mouse or touch. They are: roulettes, circular menus and other fancy things we still can not imagine at the moment. Propeller.js is a JavaScript library which easily enables rotation of elements with mouse or touch gestures.
Usage
Easy-to-use as jQuery plugin:
$(nodeOrSelector).propeller(options);
or zero-dependancy library
new Propeller(nodeOrSelector, options);
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.
Public properties
- angle current propellers angle.
- speed current speed of rotation. Degrees per frame.
Performance
Propeller uses requestAnimationFrame and GPU compositing for better performance.
Do not hesitate to contact me in case you have any questions or propositions. Feedback is highly appreciated.