Skip to content

Latest commit

 

History

History
48 lines (34 loc) · 2.34 KB

README.md

File metadata and controls

48 lines (34 loc) · 2.34 KB

Propeller.js

JavaScript library to rotate elements by mouse. Supports inertia and stepwise rotation. It is also compatible with touch devices.

Lot of demos

Project page

Propeller.js

##Usage

####Easy-to-use as jQuery plugin: $(nodeOrSelector).propeller(options);

####or zero-dependancy library new Propeller(nodeOrSelector, options)

##Performance Propeller uses requestAnimationFrame and GPU compositing for better performance.

##Options

  • angle sets initial angle
  • 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 this 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 if propeller have inertia 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.
  • onStop callback executed when stopped.
  • onDragStart callback executed when start dragging.
  • onDragStop callback executed when stop dragging.

##Methods

  • unbind unbind listeners to make propeller inactive, this does not stop rotation
  • bind bind listeners after they were unbinded
  • stop stop rotation immidiately

##Public properties

  • angle current propellers angle.
  • speed current speed of rotation. Degrees per frame.

##License

MIT: http://mit-license.org/

Copyright 2014 Denis Radin aka PixelsCommander