Implementing NuvuShift Lite in Blogger

The NuvuShift jQuery Plugin allows you to animate up to 5 different images or divs within a container when you move the mouse cursor around the document. Each image's movement has a independent range that can be set along with a starting pont.

Features:
>Control the amount of shift per image.
>Lightweight at only 4Kb(Lite) in size.
>Easily set and modify the starting point of each image.

             

Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nuvushift.lite/sample/js/jquery.nuvushift.lite.js"></script>

2.Go to the Post/Page you want to add NuvuShift Lite and then go to Edit HTML tab .

3.Now copy the code from below and paste it there.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
<script type="text/javascript" src="http://dl.dropbox.com/u/27675057/jquery.nuvushift.lite/sample/js/jquery.nuvushift.lite.js"></script>

4.Now adding images into NuvuShift Lite is a different process altogether .Below I will discuss the example that is implemented on the main site

Firstly the container for the images a.k.a the HTML Markup.

<div id="divOne">
<img class="img1" src="1.png" />
<img class="img2" src="2.png" />
<img class="img3" src="3.png" />
<img class="img4" src="4.png" />
<img class="img5" src="5.png" />
</div>

Now the CSS code:

<style type="text/css">
#divOne{
width:1200px;
height:500px;
overflow:hidden;
border:1px solid #111;
position:relative;
top:100px;
margin:100px auto;
box-shadow:0px 0px 100px 10px #000000,0px 0px 30px 10px #000000;
-moz-box-shadow:0px 0px 100px 10px #000000,0px 0px 30px 10px #000000;
-o-box-shadow:0px 0px 100px 10px #000000,0px 0px 30px 10px #000000;
-webkit-box-shadow:0px 0px 100px 10px #000000,0px 0px 30px 10px #000000;
}
.img1{
position:absolute;
top:-0px;
left:0px;
z-index:1;
}
.img2{
position:absolute;
top:-70px;
left:0px;
z-index:2;
}
.img3{
position:absolute;
top:-70px;
left:0px;
z-index:3;
}
.img4{
position:absolute;
top:-50px;
left:-30px;
z-index:4;
}
.img5{
position:absolute;
top:-120px;
left:-30px;
z-index:5;
}
</style>

And Finally the JavaScript code:

</script>
<script type="text/javascript">
$(document).ready(function(){
$('#divOne').nuvushift(
 {
img1yStart : -100,          //.img1 vertical starting point
img1xStart : 0,            //.img1 horizontal starting point
img1xRange : 100,          //.img1 horizontal animation range
img1yRange : 120,         //.img1 vertical animation range
img1invert : 'false',     //.img1 animation inverted - 'true' or 'false'
img2yStart : -10,
img2xStart : -10,
img2xRange : 650,
img2yRange : 90,
img2invert : 'false',
img3yStart : 0,
img3xStart : 0,
img3xRange : 50,
img3yRange : 180,
img3invert : 'false',
img4yStart : 0,
img4xStart : -300,
img4xRange : 400,
img4yRange : 100,
img4invert : 'true',
img5yStart : 70,
img5xStart : -90,
img5xRange : 100,
img5yRange : 90,
img5invert : 'true',
target: document, // or '#divOne', - to move when mouse hovers over #divOne etc
 }); //end nuvushift
});  //end document ready
</script>

A Detailed Explanation of the Options:

• target This is the element that triggers the movement when mouse moves over it. Set to document to move elements when the cursors moves around the whole browser window. Set to another element within '' example: target : '#divOne' or target : '.divOne',
• img1xStart This is the x starting point for an element with the class of "img1" - set this to be the same as the "left" css property.
• img1xStart This is the y starting point for an element with the class of "img1" - set this to be the same as the "top" css property.
• img1xRange This is how much the element will move from left to right or right to left if inverted.
• img1yRange This is how much the element will move from top to bottom or bottom to top if inverted.
• img1invert Invert or reverse the animation behavior. Set to 'true' or 'false'
• contmove Allows for animating the base container. Set to 'true' or 'false'
• contxStart This is the x starting point for the base container - set this to be the same as the "left" css property.
• contyStart This is the y starting point for the base container - set this to be the same as the "top" css property.
• contxRange This is how much the base container will move from left to right or right to left if inverted.
• contyRange This is how much the base container will move from top to bottom or bottom to top if inverted.
• continvert Invert or reverse the base container animation behavior. Set to 'true' or 'false'

This plugin is quite similar to jParallax .Check out jParallax's Implementation in Blogger Here.

5.Now save the Post/Page.

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!