Introduction
Any website comes up to be more specific if its header comprises of 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, reason being the uncertainty in the number of slides you may want to present. The highlighted code in banner.js does the needful.
Animating the slides on various events
The slides in this banner animate from right to left at certain events. It is set to change at an interval of 2 seconds by default. this interval is cleared once previous or next button is clicked and the slides further change on the click of these buttons only until next page load.
All the functions responsible for the slide animations are highlighted in banner.js
banner.js
Setting some more CSS through JQuery
There are certain sections that need to be set through JQuery, reason being the uncertainty in the number of slides you may want to present. The highlighted code in banner.js does the needful.
Animating the slides on various events
The slides in this banner animate from right to left at certain events. It is set to change at an interval of 2 seconds by default. this interval is cleared once previous or next button is clicked and the slides further change on the click of these buttons only until next page load.
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
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>
No comments:
Post a Comment