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 to check which browser will support this.


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 () {            

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 %.




Small angle

    angle: 10


    duration: 2000,
    angle: 10


    duration: 16000

Custom swing center - 1

    swingCenter: "50% 50%"

Custom swing center - 2

    swingCenter: "50% 100%"

Whole body

    duration: 2000,
    angle: 10

Source code

  this code will be 
  poster swing



Image courtesy

You can view full usage and demonstration on the demo page -

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