Written by 
Fullscreen Javascript Slide navigation
Today – new pure javascript tutorial-demonstration. Result page will contain 16 slides (pages). Four in each row, four columns, plus we will add animated navigation to them through css3 arrows (at sides of screen). Plus, we will have mini-navigation bar for better navigation.
Live Demo
download in package
Ok, download the example files and lets start coding !
Step 1. HTML markup
In our markup you can see 16 ‘pages’ and mini-navigation for our slides. Here it is.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Fullscreen Javascript Slide navigation | Script Tutorials</title>
<link href="css/layout.css" type="text/css" rel="stylesheet">
<script src="js/main.js"></script>
</head>
<body>
<div class="container" id="container">
<div id="pages">
<div id="page1">
<a href="#page2" class="go right"></a>
<a href="#page5" class="go bottom"></a>
</div>
<div id="page2">
<a href="#page1" class="go left"></a>
<a href="#page3" class="go right"></a>
<a href="#page6" class="go bottom"></a>
</div>
<div id="page3">
<a href="#page2" class="go left"></a>
<a href="#page4" class="go right"></a>
<a href="#page7" class="go bottom"></a>
</div>
<div id="page4">
<a href="#page3" class="go left"></a>
<a href="#page8" class="go bottom"></a>
</div>
<div id="page5">
<a href="#page1" class="go top"></a>
<a href="#page6" class="go right"></a>
<a href="#page9" class="go bottom"></a>
</div>
<div id="page6">
<a href="#page5" class="go left"></a>
<a href="#page2" class="go top"></a>
<a href="#page7" class="go right"></a>
<a href="#page10" class="go bottom"></a>
</div>
<div id="page7">
<a href="#page6" class="go left"></a>
<a href="#page3" class="go top"></a>
<a href="#page8" class="go right"></a>
<a href="#page11" class="go bottom"></a>
</div>
<div id="page8">
<a href="#page7" class="go left"></a>
<a href="#page4" class="go top"></a>
<a href="#page12" class="go bottom"></a>
</div>
<div id="page9">
<a href="#page5" class="go top"></a>
<a href="#page10" class="go right"></a>
<a href="#page13" class="go bottom"></a>
</div>
<div id="page10">
<a href="#page9" class="go left"></a>
<a href="#page6" class="go top"></a>
<a href="#page11" class="go right"></a>
<a href="#page14" class="go bottom"></a>
</div>
<div id="page11">
<a href="#page10" class="go left"></a>
<a href="#page7" class="go top"></a>
<a href="#page12" class="go right"></a>
<a href="#page15" class="go bottom"></a>
</div>
<div id="page12">
<a href="#page11" class="go left"></a>
<a href="#page8" class="go top"></a>
<a href="#page16" class="go bottom"></a>
</div>
<div id="page13">
<a href="#page9" class="go top"></a>
<a href="#page14" class="go right"></a>
</div>
<div id="page14">
<a href="#page13" class="go left"></a>
<a href="#page10" class="go top"></a>
<a href="#page15" class="go right"></a>
</div>
<div id="page15">
<a href="#page14" class="go left"></a>
<a href="#page11" class="go top"></a>
<a href="#page16" class="go right"></a>
</div>
<div id="page16">
<a href="#page15" class="go left"></a>
<a href="#page12" class="go top"></a>
</div>
</div>
<div id="nav">
<div>Fullscreen Javascript Slide navigation</div>
<div style="width:130px">
<a href="#page1" class="go"></a>
<a href="#page2" class="go"></a>
<a href="#page3" class="go"></a>
<a href="#page4" class="go"></a>
<a href="#page5" class="go"></a>
<a href="#page6" class="go"></a>
<a href="#page7" class="go"></a>
<a href="#page8" class="go"></a>
<a href="#page9" class="go"></a>
<a href="#page10" class="go"></a>
<a href="#page11" class="go"></a>
<a href="#page12" class="go"></a>
<a href="#page13" class="go"></a>
<a href="#page14" class="go"></a>
<a href="#page15" class="go"></a>
<a href="#page16" class="go"></a>
</div>
<div><a href="http://www.script-tutorials.com/fullscreen-javascript-slide-navigation/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a></div>
</div>
</div>
</body>
</html>
Step 2. CSS
Now – stylesheets for our slides:
css/layout.css
*{
margin:0;
padding:0;
}
body {
background-color:#aaa;
color:#fff;
font:16px Arial,sans-serif;
font-weight:700;
margin:0px;
padding:0px;
background:#111;
width:100%;
height:100%;
}
a.stuts,a.stuts:visited{
color: #FCFCFC;
font-size: 14px;
text-decoration: none;
}
.stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
.container {
position: absolute;
left: 0;
top: 0;
background: #000;
overflow: hidden;
width: 100%;
height: 100%;
}
#pages {
left:0;
position:absolute;
top:0;
}
#nav {
background-color:rgba(0, 0, 0, 0.8);
margin:0;
outline:#333 solid 1px;
padding:10px;
position:fixed;
right:200px;
top:50px;
width:200px;
}
#nav div a.go {
background:#333;
float:left;
height:25px;
margin:3px;
overflow:hidden;
text-decoration:none;
width:25px;
}
#nav div a.go:visited,#nav div a.visited {
background-color:#666;
}
#nav div a.go:active,#nav div a.active {
background-color:#fff !important;
}
#nav div a.go:hover,#nav div a.go:focus {
background-color:#00f;
}
#pages > div {
height:1100px;
position:absolute;
width:1700px;
}
#page1 {
background:url(../images/1.jpg) no-repeat center center;
left:0;
top:0;
}
#page2 {
background:url(../images/2.jpg) no-repeat center center;
left:1800px;
top:0;
}
#page3 {
background:url(../images/3.jpg) no-repeat center center;
left:3600px;
top:0;
}
#page4 {
background:url(../images/4.jpg) no-repeat center center;
left:5400px;
top:0;
}
#page5 {
background:url(../images/5.jpg) no-repeat center center;
left:0;
top:1300px;
}
#page6 {
background:url(../images/6.jpg) no-repeat center center;
left:1800px;
top:1300px;
}
#page7 {
background:url(../images/7.jpg) no-repeat left center;
left:3600px;
top:1300px;
}
#page8 {
background:url(../images/8.jpg) no-repeat center center;
left:5400px;
top:1300px;
}
#page9 {
background:url(../images/9.jpg) no-repeat center center;
left:0;
top:2600px;
}
#page10 {
background:url(../images/10.jpg) no-repeat center center;
left:1800px;
top:2600px;
}
#page11 {
background:url(../images/11.jpg) no-repeat center center;
left:3600px;
top:2600px;
}
#page12 {
background:url(../images/12.jpg) no-repeat center center;
left:5400px;
top:2600px;
}
#page13 {
background:url(../images/13.jpg) no-repeat center center;
left:0;
top:3900px;
}
#page14 {
background:url(../images/14.jpg) no-repeat center center;
left:1800px;
top:3900px;
}
#page15 {
background:url(../images/15.jpg) no-repeat center center;
left:3600px;
top:3900px;
}
#page16 {
background:url(../images/16.jpg) no-repeat center center;
left:5400px;
top:3900px;
}
#pages .left {
border-bottom:transparent solid 50px;
border-right:#FFF solid 80px;
border-top:transparent solid 50px;
height:0;
left:20px;
position:absolute;
top:50%;
width:0;
}
#pages .right {
border-bottom:transparent solid 50px;
border-left:#FFF solid 80px;
border-top:transparent solid 50px;
height:0;
position:absolute;
right:20px;
top:50%;
width:0;
}
#pages .top {
border-bottom:#FFF solid 80px;
border-left:transparent solid 50px;
border-right:transparent solid 50px;
height:0;
left:50%;
position:absolute;
top:20px;
width:0;
}
#pages .bottom {
border-left:transparent solid 50px;
border-right:transparent solid 50px;
border-top:#FFF solid 80px;
bottom:20px;
height:0;
left:50%;
position:absolute;
width:0;
}
#pages .left:hover {
border-right:red solid 80px;
}
#pages .right:hover {
border-left:red solid 80px;
}
#pages .top:hover {
border-bottom:red solid 80px;
}
#pages .bottom:hover {
border-top:red solid 80px;
}
#nav > div {
margin:10px auto;
overflow:hidden;
text-align:center;
}
Step 3. JS
ANd now – our javascript code:
js/main.js
var navi = {
// variables
aPages : [],
aLinks : [],
tween : {},
oParent : null,
oPages : null,
bRunning : null,
sTargPage : null,
sCurPage : null,
bHash : null,
sOldH : null,
bUpdateH : true,
// initialization
init : function (aParams) {
this.oPages = document.getElementById(aParams.pages_id);
this.oParent = document.getElementById(aParams.parent_id);
var aAEls = this.oParent.getElementsByTagName('a');
var i = 0; var p = null;
while (p = aAEls[i++]) {
if (p.className && p.className.indexOf('go') >= 0) {
var sHref = p.href.split('#')[1];
var oDst = document.getElementById(sHref);
if (oDst) {
// fill-in pages array
this.aPages[sHref] = {
oObj: oDst,
iXPos: -oDst.offsetLeft,
iYPos: -oDst.offsetTop
};
// fill-in links array
this.aLinks.push({a: p, oObj: oDst});
p.onclick = function () {
navi.goto(this.href.split('#')[1], aParams.duration);
return false;
}
}
}
}
this.resize();
if ('onhashchange' in window) {
if (location.hash !== '' && location.hash !== '#') {
this.sOldH = location.hash.substring(1);
this.goto(this.sOldH, -1);
} else
this.goto('page1', -1);
this.bHash = true;
window.onhashchange = function() {
if (location.hash.substring(1) !== navi.sOldH) {
navi.sOldH = location.hash.substring(1);
if (navi.sOldH == '') {
navi.bUpdateH = false;
}
navi.goto(navi.sOldH, aParams.duration);
}
return false;
}
}
},
// on resize
resize : function () {
var iCurW = this.oParent.offsetWidth; // current sizes
var iCurH = this.oParent.offsetHeight;
for (var i in this.aPages) { // for each page
var oPage = this.aPages[i];
var iNewX = Math.round(oPage.oObj.offsetLeft * iCurW / oPage.oObj.offsetWidth); // new sizes
var iNewY = Math.round(oPage.oObj.offsetTop * iCurH / oPage.oObj.offsetHeight);
oPage.oObj.style.left = iNewX + 'px';
oPage.oObj.style.top = iNewY + 'px';
oPage.oObj.style.width = iCurW + 'px';
oPage.oObj.style.height = iCurH + 'px';
oPage.iXPos = -iNewX;
oPage.iYPos = -iNewY;
if (this.sCurPage)
this.goto(this.sCurPage, -1);
}
},
goto : function (sHref, iDur) {
this.tween.iStart = new Date() * 1;
this.tween.iDur = iDur;
this.tween.fromX = this.oPages.offsetLeft;
this.tween.fromY = this.oPages.offsetTop;
this.tween.iXPos = this.aPages[sHref].iXPos - this.tween.fromX;
this.tween.iYPos = this.aPages[sHref].iYPos - this.tween.fromY;
this.sTargPage = sHref;
if (! this.bRunning)
this.bRunning = window.setInterval(this.animate, 24);
},
animate : function () {
var iCurTime = (new Date() * 1) - navi.tween.iStart;
if (iCurTime < navi.tween.iDur) {
var iCur = Math.cos(Math.PI * (iCurTime / navi.tween.iDur)) - 1;
navi.oPages.style.left = Math.round(-navi.tween.iXPos * .5 * iCur + navi.tween.fromX) + 'px';
navi.oPages.style.top = Math.round(-navi.tween.iYPos * .5 * iCur + navi.tween.fromY) + 'px';
} else {
navi.oPages.style.left = Math.round(navi.tween.fromX + navi.tween.iXPos) + 'px';
navi.oPages.style.top = Math.round(navi.tween.fromY + navi.tween.iYPos) + 'px';
window.clearInterval(navi.bRunning);
navi.bRunning = false;
navi.sCurPage = navi.sTargPage;
var i = 0; var p = null;
while (p = navi.aLinks[i++]) {
if (p.oObj.id == navi.sCurPage) {
if (p.a.className.indexOf('visited') >= 0 ) {
p.a.className = p.a.className.replace('visited', 'active');
} else p.a.className += ' active';
p.visited = true;
} else if (p.visited) {
p.a.className = p.a.className.replace('active', 'visited');
}
}
if (navi.bHash) {
if (navi.bUpdateH) {
navi.sOldH = navi.sCurPage;
window.location.hash = navi.sCurPage;
}
navi.bUpdateH = true;
}
}
}
}
window.onload = function() { // page onload
navi.init({parent_id: 'container', pages_id: 'pages', duration: 1000});
}
window.onkeydown = function(event){ // keyboard alerts
switch (event.keyCode) {
case 37: // Left key
var iPage = navi.sCurPage.substring(4) * 1;
iPage--;
if (iPage < 1) {
iPage = 1;
}
navi.goto('page' + iPage, 1000);
break;
case 39: // Right key
var iPage = navi.sCurPage.substring(4) * 1;
iPage++;
if (iPage > 16) {
iPage = 16;
}
navi.goto('page' + iPage, 1000);
break;
}
};
Live Demo
download in package
Conclusion
Finally we have prepared interested result! I hope that this will interesting addition to your website. Don’t forget to tell thanks and leave a comment. Good luck!
| I am web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design. Feel free to Follow us on Twitter: tweetmeme_screen_name='AramisGC'; | If you Enjoyed our article don't forget to Share the love with your friends. |
Great tutorial.Thanks for Sharing!