Animated background movement with jQuery
I'm currently developing a website that I want to be one page that scrolls both horizontally and vertically. I don't want the user to scroll, however. I want content to come to them.
Basically, the site will be created like a 3x3 grid of content. When the user clicks a link, I will reposition the content in the browser, including the background image.
Below is an example of this. Click the arrows and watch the background move...
This is accomplished with some simple jQuery. The key is the Background-Position Animation Plugin. Here's the code behind it:
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.1.js"></script>
<script src="/sites/default/files/animatedbg/js/backgroundPosition.js" type="text/javascript"></script>
<script type="text/javascript">
$(function()
{
$('#center').css({backgroundPosition: '-150px -150px'});
$("div.button").click(function()
{
$clicked = $(this);
var clickedButton = $clicked.attr("id");
//alert(clickedButton);
if(clickedButton == "top")
{
//alert("you clicked contact");
$('#center').animate(
{backgroundPosition: '-150px 0px'},
{duration:500}
);
}
if(clickedButton == "bottom")
{
//alert("you clicked contact");
$('#center').animate(
{backgroundPosition: '-150px -300px'},
{duration:500}
);
}
if(clickedButton == "left")
{
//alert("you clicked contact");
$('#center').animate(
{backgroundPosition: '0px -150px'},
{duration:500}
);
}
if(clickedButton == "right")
{
//alert("you clicked contact");
$('#center').animate(
{backgroundPosition: '-300px -150px'},
{duration:500}
);
}
//$clicked.animate(
// {
// opacity: .1,
//},600 );
}
);
}
);
</script>
<style type="text/css">
<!--
#wrapper {
height: 500px;
width: 500px;
}
#top {
height: 100px;
width: 500px;
text-align:center;
}
#left {
height:200px;
width:100px;
float:left;
padding-top:100px;
text-align:center;
}
#center {
height:300px;
width:300px;
float:left;
background-image:url(/sites/default/files/animatedbg/image/bgAnimation.jpg);
background-repeat:no-repeat;
background-position:center;
}
#right {
height:200px;
width:100px;
float:left;
padding-top:100px;
text-align:center;
}
#bottom {
height: 100px;
width: 500px;
clear:both;
text-align:center;
}
img {
border-style:none;
}
-->
</style>
<div id="wrapper">
<div id="top" class="button"> <a href="#"><img src="/sites/default/files/animatedbg/image/up.png" width="100" height="100" alt="up" /></a></div>
<div id="left" class="button"> <a href="#"><img src="/sites/default/files/animatedbg/image/left.png" width="100" height="100" alt="left" /></a>
</div>
<div id="center">
</div>
<div id="right" class="button"> <a href="#"><img src="/sites/default/files/animatedbg/image/right.png" width="100" height="100" alt="right" /></a>
</div>
<div id="bottom" class="button"> <a href="#"><img src="/sites/default/files/animatedbg/image/down.png" width="100" height="100" alt="down" /></a>
</div>
</div>
I had some trouble getting this to work. I didn't think the documentation was that good. Not only do you have to reference the jQuery library, you also need to create a JavaScript file, and link to it as well. Don't forget this step!