• Get childishly flash-like with jQuery

    If you thought those nice, friendly and definitely not irritating flash scrolling headers, floating graphics and popup’s were a thing of the past, unfortunately, you’re wrong.

    Spritely (24kb, un-minified) is a simple little jQuery plugin supported in all the major desktop browsers, as well as iOS, Android and Windows Phone. It enables you to animate the background-image css property of an element, to produce animation reminiscent of 5 years ago.

    All you need to do is make a sprite image with a few frames in - making sure the width of each sprite and the distance between them are consistent - wrap it in a div, and then add this jQuery:

    $('#AnnoyingFace').sprite(
    {fps: 12, no_of_frames:3}).activeOnClick().active();
    $('body').flyToTap();

    Which will result in an annoyingly cheerful face whizzing racing to your every mouse click.

    There’s also a pan()function, which is pretty self-explanatory. Simply make an element smaller than the wide image, and set the wide image as the background in CSS (using repeat-x). Then add this jQuery:

    $('#ScrollingBackground').pan({fps: 30, speed: 2, dir: 'left'});

    Which will result in a horizontal-panning background image.

    Go ahead and use these effects (more can be found at the documentation) to make your site nice and bouncy.

    Just remember, with great power comes great responsibility.

Back to top tompntn 1