Fullscreen Javascript Slide navigation

Fullscreen Javascript Slide navigation

8 751
Fullscreen Javascript Slide navigation

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!

SIMILAR ARTICLES

Practice with Text Shadows

0 287
Responsive HTML Email Template

0 501

8 COMMENTS

  1. Hi!

    I’m getting this error:

    SCRIPT5007: Unable to get value of the property ‘iXPos’: object is null or undefined
    newSlider.js, line 93 character 9

    It shows up when I load the page. I tried to adapt your code to a page I’m developing, any idea why this happens?

    Thanks in advance!

    • Hello Alexandre,
      What is your browser?
      Because our demo should work well in most of browsers (FF, Chrome and IE).
      Generally, that iXPos property is filled for each page during initialization, look at code at line 30.
      iXPos: -oDst.offsetLeft,
      so, the same value (of iXPos) is at line 93 too.

  2. Hello, could you please explain (comment a bit more the code) how did you manage to make the mini-navigation?
    thanks!!

    • Hi Adam,
      Which gallery did you mean? It is not the gallery, but different ‘pages’. Or do you want to apply some 3d styles for the navigation element itself?

Leave a Reply