Tutorial – Awesome 3D Parallax Background Effect with jQuery

The HTML

Our page will consist of 6 sections: header, footer and 4 articles. On the right, we’ll place an unordered list that links between the articles and remains fixed on the page so it doesn’t move.

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" ></script>
<script type="text/javascript" src="scripts/nbw-parallax.js"></script>
<script type="text/javascript" src="scripts/jquery.inview.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('#nav').localScroll();
})
</script>

To start, at the top of the page, we’ll reference all of the JavaScript files we’ll use to make the effect work. The scripts we’re using are:

jQuery 1.4.4
The script written by Ian Lunn (which we’ll cover shortly)
jQuery Inview (determines whether a particular article is in view)

Inside of our body tag, we have the containers that will make up each article.

<div id="intro">
    <div class="story">
        Article content here
    </div> <!--.story-->
</div> <!--#intro-->

Read more: Despiration
QR:

Posted via email from Jasper-net