Poster swing – A jQuery plug-in for Poster Style Swing

Poster swing plugin can be used for adding poster swing effect on html elements. The plugin uses rotation transform for adding the swing effect. See http://caniuse.com/#feat=transforms2d to check which browser will support this.

Usage

You must include jQuery.js and jquery.posterSwing.js (or jquery.posterSwing.min.js) in you web page in order to use this plugin.

<script src="jquery.min.js" type="text/javascript"></script>
<script src="jquery.posterSwing.min.js" type="text/javascript"></script>

For adding poster swing effect to any html element, use following with jQuery selector -

$(function () {            
    $("#myDiv").posterSwing([options]);
});

Currently following options are available -

  • duration : (default value 4000)
    total duration (in milliseconds) for which the animation will run.
     
  • angle : (default value 30)
    max angle to which the swing will be done.
     
  • swingCenter : (default value top center = 50% 5%)
    x, y value of the center around which swing will be done - can be in px or %.

Demo

Default

 
$(element).posterSwing();

Small angle

 
$(element).posterSwing({
    angle: 10
});

Fast

 
$(element).posterSwing({
    duration: 2000,
    angle: 10
});

Slow

 
$(element).posterSwing({
    duration: 16000
});

Custom swing center - 1

 
$(element).posterSwing({
    swingCenter: "50% 50%"
});

Custom swing center - 2

 
$(element).posterSwing({
    swingCenter: "50% 100%"
});

Whole body

$("body").posterSwing({
    duration: 2000,
    angle: 10
});

Source code

/*
  this code will be 
  poster swing
*/
$(this).next("pre")
  .posterSwing();

Button

$(this).posterSwing();


Image courtesy http://www.smashingmagazine.com/

You can view full usage and demonstration on the demo page - http://demo.com

3 comment(S)


Pawan on May 23, 2014 03:19 PM


Pawan on May 23, 2014 03:19 PM

Gud tut. I will use swing in my next project thanks

Dise&#241;o Web on Aug 23, 2014 01:07 PM

Excellent! A little tricky for me, but very well explained

Leave a comment