NICE UI

Turn to hans site

by secretgspot

HTML

<script src="http://youzee.com/js/lib/jquery.activity-indicator-1.0.0.min.js"></script>
<div class="wrapper">
    <header>
        <h1 role="banner">Youzee</h1>
        <p>Get comfy, the show is starting soon</p>

        <a href="#discover" title="Start"><span>Start</span></a>
    </header>

    <nav role="navigation" id="main-nav">
        <ol>
            <li>
                <a href="#discover" title="Discover">Discover</a>
            </li>
            <li>
                <a href="#watch" title="Watch">Watch</a>
            </li>
            <li>
                <a href="#enjoy" title="Enjoy">Enjoy</a>
            </li>
            <li>
                <a href="#share" title="Share">Share</a>
            </li>
            <li>
                <a href="#register" title="Register">Register</a>
            </li>
        </ol>

        <div id="nav-block"></div>
    </nav>

    <section role="main">
        <ol>
            <li id="discover" class="target">
                <a href="#watch">
                    <span>You'll <strong>discover</strong> there are worlds where </span>
                    <span>you've never been to, adventures that  </span>
                    <span>you've not lived, stories that you've </span>
                    <span>never heard about&hellip;</span>
                    <span class="hint"></span>
                </a>
            </li>

            <li id="watch" class="target">
                <a href="#enjoy">
                    <span><strong>Watch</strong> and you'll see that it's not </span>
                    <span>difficult to get excited, by looking </span>
                    <span>through somebody else's eyes&hellip;</span>
                    <span class="hint"></span>
                </a>
            </li>

            <li id="enjoy" class="target">
                <a href="#share">
                    <span>You'll <strong>enjoy</strong> the great moments </span>
                    <span>whenever and wherever </span>
  ...

CSS

/* @group Preset */
/* @group Text elements */
        body {
                font: normal 16px/1.5em "Helvetica Neue", Arial, sans-serif;
        }
        
        h1, h2, h3, h4, h5, h6, strong {
                font-weight: bold;
        }
        
        nav li,
        nav li a {
                display: inline-block;
        }
        
        ul, ol {
                list-style: none;
        }
        
        abbr {
                
        }
        
        del {
                color: #666;
        }
        
        small {
                display: block;
        }
        
        blockquote cite {
                display: block;
                font-weight: bold;
                font-style: normal;
                margin-top: 1em;
        }
        
        ::-moz-selection {
                color: #fff;
                background: #9c0;
        }
        
        ::selection {
                color: #fff;
                background: #9c0;
        }
/* @end */

/* @group Links */
        a {
                text-decoration: none;
                color: #fff;
                -webkit-transition: color .12s linear;
                -moz-transition: color .12s linear;
                -o-transition: color .12s linear;
                transition: color .12s linear;
        }
        
        a:hover,
        a:focus { 
                color: #9c0;
        }
        /* @end */

        /* @group Forms */
        label abbr {
                border: 0;
                font-weight: bold;
                color: #9a1900;
        }
        
        input,
        select,
        textarea {
                padding: 4px;
                background: #fff;
                color: #222;
        }
        
        /*Placeholder in three rules*/
        input::-webkit-input-placeholder {
                color: #999;
        }
        
        input:-moz-placeholder {
                color: #999;
        }
        
        input.placeholder {
                color:...

JavaScript

(function (a) {
    a.belowthefold = function (c, d) {
        var b = a(window).height() + a(window).scrollTop();
        return b <= a(c).offset().top - d.threshold
    };
    a.abovethetop = function (b, c) {
        var d = a(window).scrollTop();
        return d >= a(b).offset().top + a(b).height() - c.threshold
    };
    a.rightofscreen = function (c, d) {
        var b = a(window).width() + a(window).scrollLeft();
        return b <= a(c).offset().left - d.threshold
    };
    a.leftofscreen = function (b, c) {
        var d = a(window).scrollLeft();
        return d >= a(b).offset().left + a(b).width() - c.threshold
    };
    a.inviewport = function (b, c) {
        return !a.rightofscreen(b, c) && !a.leftofscreen(b, c) && !a.belowthefold(b, c) && !a.abovethetop(b, c)
    };
    a.extend(a.expr[":"], {
        "below-the-fold": function (c, d, b) {
            return a.belowthefold(c, {
                threshold: 0
            })
        },
        "above-the-top": function (c, d, b) {
            return a.abovethetop(c, {
                threshold: 0
            })
        },
        "left-of-screen": function (c, d, b) {
            return a.leftofscreen(c, {
                threshold: 0
            })
        },
        "right-of-screen": function (c, d, b) {
            return a.rightofscreen(c, {
                threshold: 0
            })
        },
        "in-viewport": function (c, d, b) {
            return a.inviewport(c, {
                threshold: 0
            })
        }
    })
})(jQuery);
var Core = {
    positionChecker: null,
    positionChecked: false,
    navPosition: "#",
    navigation: {
        "#": {
            prev: null,
            next: "#discover"
        },
        "#discover": {
            prev: "#",
            next: "#watch"
        },
        "#watch": {
            prev: "#discover",
            next: "#enjoy"
        },
        "#enjoy": {
            prev: "#watch",
            next: "#share"
        },
       ...