September 28, 2013

Released first stable version of js-parallax

Today I committed a stable version of the already announced jQuery plugin for retro-style parallax scrolling at Google Code. The plugin brings a very easy to use API to include a multi-layer image scroller on your sites.

Usage Example

<html>
    <head>
        <title>PARALLAX SCROLLER</title>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" type="application/javascript"> </script>
        <script src="http://parallax-js.googlecode.com/svn/tags/3/js/jquery.parallax.min.js" type="application/javascript"> </script>
        
        <script type="application/javascript">
         
            $(function() {
                $(".scrollerNew").parallax();
        });
        </script>
        
    </head>
    <body>
        <div class="content">Content</div>
        <ul class="scrollerNew">
            <li data-img='img/background.jpg' data-width='549px' data-height='168px' data-xi='6' data-repeat="repeat"></li>
            <li data-img='img/layer1.png' data-width='549px' data-height='168px' data-xi='10' data-repeat="repeat"></li>
            <li data-img='img/layer2.png' data-width='549px' data-height='168px' data-yi='14' data-repeat="repeat"></li>
        </ul>        
    </body>
</html>

The plugin and more detailed description are available at https://code.google.com/p/parallax-js/. More examples will be added soon. Not worth to mention, that the gadget in this blogs header uses js-parallax.

No comments:

Post a Comment