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