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 -

10 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

Sourav Basak on Apr 10, 2016 03:00 AM

Good and very useful article for developing and managing web application in a technical ways. This information can help the developers to modify any tricks without any hesitation.
Also for building a short type of plugin this can also help to rebuild the construction of a page.
Thanks a lot.

Sourav Basak [Blogger, Entrepreneur, Thinker]

Tom Burry on Dec 17, 2016 02:42 AM

Thanks for informative post. But, at this time (2016) jQuery became a old hero.

designdrumm on Feb 17, 2017 04:51 PM

I just added your code to my jQuery.easing.js. Now your code can live in the legacy of jquery. Works really well to I might add. Thanks for your efforts! Cheers.

designdrumm on Feb 17, 2017 04:53 PM


Aafreen on Mar 15, 2017 11:36 AM

How clear explanation you have given...?? Thanks a lot for sharing dis..

Parke on Jun 2, 2017 04:21 AM

thanks for this post.This is very useful for me


Amy Wong on Jan 11, 2019 03:29 AM

today damn all day stay on this site <a href=" ">fancy casino slots </a> There are so many cool game machines and all sorts of other gambling games I will say one thing to have fun here

Leave a comment