Introduction
Any website comes up to be more specific if its header comprises an elaborative banner. The more it is sectioned into attractive and self-explanatory sections, the more it is helpful in explaining the website to its visitor. The banner I intend to develop in this article contains multiple slides with customized animations.
Setting the page style
The CSS code for the page is as follows. It sets the ground style of the banner and its slides.
Style.CSS
body { color:white; background:lightgrey; }
#header { overflow:hidden; position:relative; margin:20px auto; background:grey; }
#header ul { list-style:none; margin:0px; padding:0px; position:absolute; }
#header ul li { list-style:none; margin:0px; padding:0px; left:0px; float:left; }
#button
{
position:absolute;
height:50px;
width:50px;
border:none;
cursor:pointer;
border-radius:25px;
background-color: black;
opacity:0.1;
filter:alpha(opacity=10);
}
#button:hover { opacity:0.6; filter:alpha(opacity=60); }
.next { right:5px; background-image:url('../images/next.png'); }
.prev { left:5px; background-image:url('../images/prev.png'); }
Setting some more CSS through jQuery
There are certain sections that need to be set through jQuery, the reason being the uncertainty in the number of slides you may want to present. The highlighted code in banner.js does what is need.
Animating the slides on various events
The slides in this banner are animated from right to left upon certain events. It is set to change at an interval of 2 seconds by default. This interval is cleared once the previous or next button is clicked and the slides further change on the click of these buttons only until the next page is loaded.
All the functions responsible for the slide animations are highlighted in banner.js.
banner.js
$(document).ready(function () {
var width = 900;
var heigth = 400;
var cur = 0;
var leftMargin = 0;
var no = $('#header ul').children('li').length;
initialize();
var start = setInterval(function () { next(); }, 5000);
function initialize() {
$('#header').css({ 'width': width + 'px', 'height': heigth + 'px' });
$('#header ul').css({ 'width': (width * no) + 'px', 'height': heigth + 'px' });
$('#header ul li').css({ 'width': width + 'px', 'height': heigth + 'px' });
$('#button.next').css({ 'top': ((heigth / 2) - 25) + 'px' });
$('#button.prev').css({ 'top': ((heigth / 2) - 25) + 'px' });
}
function animate() {
leftMargin = cur * width;
$('#header ul').animate({ left: '-' + leftMargin + 'px' }, { duration:2000; });
}
function next() {
cur++;
if (cur == no) cur = 0;
animate();
}
function previous() {
cur--;
if (cur < 0) cur = no - 1;
animate();
}
$('#button.next').click(function () { next(); clearInterval(start); });
$('#button.prev').click(function () { previous(); clearInterval(start); });
});
Setting up the Web Page
The web page is finally setup through HTML 5. The code follows next.
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Title</title>
<link rel="stylesheet" href="css/style.css" temp_href="css/style.css" type="text/css"
media="screen" />
<script src="js/jquery.js" temp_src="js/jquery.js"></script>
<script src="js/banner.js" temp_src="js/banner.js"></script>
</head>
<body>
<div id='header'>
<ul>
<li>Slide 1 Content</li>
<li>Slide 2 Content</li>
<li>Slide 3 Content</li>
<li>Slide 4 Content</li>
<li>Slide 5 Content</li>
</ul>
<button id='button' class='next' title='Next'>
</button>
<button id='button' class='prev' title='Previous'>
</button>
</div>
</body>
</html>
Summary
The banner effects can be customized through jQuery at any instance. I have tried to make the banner a little more convenient to be included on a webpage by varying its size. It can be altered by changing the height and width constants in banner.js.