Cool Background Image Sliding effect with jQuery
Today I am going to show you how to create sliding image cell effect. This is will something like small photo gallery. I prepared 3 demos for you with different effects. Please pay attention that our demo will work in browsers that support used CSS3 properties.
Live Demo
download result
Ok, download the example files and lets start coding !
Step 1. HTML
Here are full html code of our result. For our demonstration I use 5 photos – same amount of ‘navigation’ elements you can see here too.
index.html
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>Cool Background Image Sliding effect with jQuery | Script Tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="js/main.js"></script>
</head>
<body>
<div class="container" id="container">
<ul class="nav">
<li id="m1">Pic 1</li>
<li id="m2">Pic 2</li>
<li id="m3">Pic 3</li>
<li id="m4">Pic 4</li>
<li id="m5">Pic 5</li>
</ul>
<ul class="grid">
<li id="g1">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</li>
<li id="g2">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</li>
<li id="g3">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</li>
<li id="g4">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</li>
<li id="g5">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</li>
<li id="g6">
<div class="d1"></div>
<div class="d2"></div>
<div class="d3"></div>
<div class="d4"></div>
<div class="d5"></div>
</li>
</ul>
<ul class="demos">
<li><a href="index.html">Demo 1</a></li>
<li><a href="index2.html">Demo 2</a></li>
<li><a href="index3.html">Demo 3</a></li>
</ul>
</div>
<footer>
<h2>Cool Background Image Sliding effect with jQuery</h2>
<a href="http://script-tutorials.com/cool-background-image-sliding-effect-with-jquery/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
</footer>
</body>
</html>
Step 2. CSS
Now – our CSS styles. I will omit unnecessary styles of page layout, but will show you most important
css/main.css
.nav {
background-color:#DDD;
list-style:none outside none;
overflow:hidden;
padding:5px 140px;
}
.nav li {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:2px outset #000000;
color:#000;
cursor:pointer;
float:left;
font-size:18px;
font-weight:bold;
margin-right:5px;
padding:10px;
}
.demos {
background-color:#DDD;
list-style:none outside none;
overflow:hidden;
padding:5px 165px;
}
.demos li {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border:2px outset #000000;
color:#000;
float:left;
font-size:18px;
font-weight:bold;
margin-right:5px;
padding:10px;
}
.demos li a {
color:#000;
cursor:pointer;
display:block;
font-size:20px;
font-weight:bold;
height:30px;
line-height:30px;
text-decoration:none;
}
.grid {
background-color:#DDD;
list-style:none outside none;
width:100%;
}
.grid li {
border:1px solid #777777;
float:left;
height:240px;
width:211px;
transition:all 0.5s linear;
-moz-transition:all 0.5s linear;
-o-transition:all 0.5s linear;
-webkit-transition:all 0.5s linear;
}
.grid li div {
transition:all 0.5s ease-in-out;
-moz-transition:all 0.5s ease-in-out;
-o-transition:all 0.5s ease-in-out;
-webkit-transition:all 0.5s ease-in-out;
float:left;
}
.grid li .d1 {
background:transparent url(../images/grid1.jpg) no-repeat top left;
height:100%;
width:211px;
}
.grid li .d2 {
background:transparent url(../images/grid2.jpg) no-repeat top left;
height:100%;
width:0;
}
.grid li .d3 {
background:transparent url(../images/grid3.jpg) no-repeat top left;
height:100%;
width:0;
}
.grid li .d4 {
background:transparent url(../images/grid4.jpg) no-repeat top left;
height:100%;
width:0;
}
.grid li .d5 {
background:transparent url(../images/grid5.jpg) no-repeat top left;
height:100%;
width:0;
}
.grid li#g2 div {
background-position:-211px 0;
}
.grid li#g3 div {
background-position:-422px 0;
}
.grid li#g4 div {
background-position:0 -240px;
}
.grid li#g5 div {
background-position:-211px -240px;
}
.grid li#g6 div {
background-position:-422px -240px;
}
As you can see – each grid cell element (LI) have some defined background, but with own background positions. And, I will use jQuery ‘animate’ to shift these positions when we will switch our images (through navigation)
Step 3. jQuery
js/main.js
$(function(){
$(".nav li").hover(
function () {
$('.grid li div').stop().animate({width:"0"},0);
var ind = $(".nav li").index(this);
$($('.grid li#g1 div')[ind]).stop().animate({width:"211px"},0);
$($('.grid li#g2 div')[ind]).stop().animate({width:"211px"},50);
$($('.grid li#g3 div')[ind]).stop().animate({width:"211px"},100);
$($('.grid li#g4 div')[ind]).stop().animate({width:"211px"},150);
$($('.grid li#g5 div')[ind]).stop().animate({width:"211px"},200);
$($('.grid li#g6 div')[ind]).stop().animate({width:"211px"},250);
}
);
});
As you can see – all very easy.
Live Demo
download result
Conclusion
All another demos very similar, only few changes in styles and javascript code. You are welcome to play with our demos. Good luck!
thanks good Image Sliding..
Hi,
I would like to use this effect on Full screen background images.
Could you please hint me how to set the image to Full page?
Hello Tina,
What about adjusting through CSS? Try to make area bigger, bigger elements.