Multi-scrolling pages

In this example below you will see how to do a Multi-scrolling pages with some HTML / CSS and Javascript

http://www.code-stuff.com/2014/06/jquery-plugin-multiscrolljs.htmlForked from Code Stuff's Pen Multi-scrolling pages.

Thumbnail
This awesome code was written by 1, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 1 ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Multi-scrolling pages</title>
  <!--[if IE]>
		<script type="text/javascript">
			 var console = { log: function() {} };
		</script>
	<![endif]-->
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <ul id="menu">
	<li data-menuanchor="first" class="active"><a href="#first">First section</a></li>
	<li data-menuanchor="second"><a href="#second">Second section</a></li>
	<li data-menuanchor="third"><a href="#third">Third section</a></li>
</ul>

<div id="myContainer">

	<div class="ms-left">
		<div class="ms-section section1">
			<div class="graduated"></div>
			<div class="fullscreen">
				<h1>multiScroll.js</h1>
				<h2>Create divided multi-scrolling pages.</h2>
				<br />
				<img src="https://alvarotrigo.com/multiScroll/imgs/multiscroll.png" alt="multiscroll" height="257" width="265">
			</div>
		</div>

		<div class="ms-section section2">
			<div class="content">
				<h1>Powerful <br />jQuery plugin</h1>
				<h2>Create split pages with two vertical scrolling panels. <br /> Compatible with mobile phones and devices and old bowsers such as IE 8.</h2>
			</div>
		</div>

		<div class="ms-section section3">
			<div class="content">
				<h1>How to use it</h1>
				<h2>Just use the following HTML markup:</h2>

				<div id="markup">
					<script src="https://gist.github.com/alvarotrigo/3382b8ec69abb2f4e217.js"></script>
				</div>
				
			</div>
		</div>
	</div>
	
	<div class="ms-right">
		<div class="ms-section section1">
		</div>

		<div class="ms-section section2">
		</div>

		<div class="ms-section section3">
			<div class="coffee"></div>
		</div>
	</div>	
</div>
  <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/1/multi-scrolling-pages-wBzamQ */
/**
 * multiscroll 0.0.5 Beta
 * https://github.com/alvarotrigo/multiscroll.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */
html, body {
    margin: 0;
    padding: 0;
	overflow:hidden;
	-webkit-tap-highlight-color: rgba(0,0,0,0);
}
.ms-section {
    position: relative;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
.ms-section.ms-table{
    display: table;
    width: 100%;
}
.ms-tableCell {
    display: table-cell;
    vertical-align: middle;
    width: 100%;
    height: 100%;
}
.ms-easing {
    -webkit-transition: all 0.7s ease-out;
    -moz-transition: all 0.7s ease-out;
    -o-transition: all 0.7s ease-out;
    transition: all 0.7s ease-out;
}
#multiscroll-nav {
    position: fixed;
    z-index: 100;
    margin-top: -32px;
    top: 50%;
    opacity: 1;
}
#multiscroll-nav.right {
    right: 17px;
}
#multiscroll-nav.left {
    left: 17px;
}
#multiscroll-nav ul{
  margin: 0;
  padding: 0;
}
#multiscroll-nav li{
    display: block;
    width: 14px;
    height: 13px;
    margin: 7px;
    position:relative;
}
#multiscroll-nav li a{
    display: block;
    position: relative;
    z-index: 1;
    width: 100%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
}
#multiscroll-nav li .active span{
    background: #333;
}
#multiscroll-nav span{
    top: 2px;
    left: 2px;
    width: 8px;
    height: 8px;
    border: 1px solid #000;
    background: rgba(0, 0, 0, 0);
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    position: absolute;
    z-index: 1;
}
.multiscroll-tooltip {
    position: absolute;
    color: #fff;
    font-size: 14px;
    font-family: arial, helvetica, sans-serif;
    top: -2px;
}
.multiscroll-tooltip.right {
    right: 20px;
}
.multiscroll-tooltip.left {
    left: 20px;
}

@CHARSET "ISO-8859-1";
/* Reset CSS
 * --------------------------------------- */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,input,textarea,p,blockquote,th,td {
    padding: 0;
    margin: 0;
}
a{
	text-decoration:none;
}
table {
    border-spacing: 0;    
}
fieldset,img {
    border: 0;
}
address,caption,cite,code,dfn,em,strong,th,var {
    font-weight: normal;
    font-style: normal;
}
strong{
	font-weight: bold;
}
ol,ul {
    list-style: none;
    margin:0;
    padding:0;
}
caption,th {
    text-align: left;

}
h1,h2,h3,h4,h5,h6 {
    font-weight: normal;
    font-size: 100%;
    margin:0;
    padding:0;
    color:#444;
}
q:before,q:after {
    content:'';
}
abbr,acronym { border: 0;
}


/* Custom CSS
 * --------------------------------------- */
#menu li {
	display:inline-block;
	margin: 10px;
	color: #000;
	background:#fff;
	background: rgba(255,255,255, 0.3);
	-webkit-border-radius: 10px; 
            border-radius: 10px; 
}
#menu li.active{
	background:#666;
	background: rgba(255,255,255, 1);
	color: #000;
}
#menu li a{
	text-decoration:none;
	color: #000;
}
#menu li.active a:hover{
	color: #000;
}
#menu li:hover{
	background: rgba(255,255,255, 0.8);
}
#menu li a,
#menu li.active a{
	padding: 9px 18px;
	display:block;
}
#menu li.active a{
	color: #000;
}
#menu{
	position:fixed;
	top:0;
	left:0;
	height: 40px;
	z-index: 70;
	width: 100%;
	padding: 0;
	margin:0;
}
.twitter-share-button{
	position: fixed;
	z-index: 99;
	right: 149px;
	top: 9px;
}
#download{
	margin: 10px 0 0 0;
	padding: 15px 10px;
	color: #fff;
	text-shadow: 0 -1px 0 rgba(0,0,0,0.25);
	background-color: #49afcd;
	background-image: -moz-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -ms-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -webkit-gradient(linear,0 0,0 100%,from( #5bc0de),to( #2f96b4));
	background-image: -webkit-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: -o-linear-gradient(top, #5bc0de, #2f96b4);
	background-image: linear-gradient(top, #5bc0de, #2f96b4);
	background-repeat: repeat-x;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#5bc0de', endColorstr='#2f96b4', GradientType=0);
	border-color: #2f96b4 #2f96b4 #1f6377;
	border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) rgba(0,0,0,.25);
	filter: progid:DXImageTransform.Microsoft.gradient(enabled=false);
	
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	vertical-align: middle;
	cursor: pointer;
	display: inline-block;
	-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
	box-shadow: inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);
}
#download a{
	text-decoration:none;
	color:#fff;
}
#download:hover{
	text-shadow: 0 -1px 0 rgba(0,0,0,.25);
	background-color: #2F96B4;
	background-position: 0 -15px;
	-webkit-transition: background-position .1s linear;
	-moz-transition: background-position .1s linear;
	-ms-transition: background-position .1s linear;
	-o-transition: background-position .1s linear;
	transition: background-position .1s linear;
}
#infoMenu{
	height: 20px;
	color: #f2f2f2;
	position:fixed;
	z-index:70;
	bottom:0;
	width:100%;
	text-align:right;
	font-size:0.9em;
	padding:8px 0 8px 0;
}
#infoMenu ul{
	padding: 0 40px;
}
#infoMenu li a{
	display: block;
	margin: 0 22px 0 0;	
	color: #333;
}
#infoMenu li a:hover{
	text-decoration:underline;
}
#infoMenu li{
	display:inline-block;
	position:relative;
}
#examplesList{
	display:none;
	background: #282828;
	-webkit-border-radius: 6px;
	-moz-border-radius: 6px;
	border-radius: 6px;
	padding: 20px;
	float: left;
	position: absolute;
	bottom: 29px;
	right: 0;
	width:638px;
	text-align:left;
}
#examplesList ul{
	padding:0;
}
#examplesList ul li{
	display:block;
	margin: 5px 0;
}
#examplesList ul li a{
	color: #BDBDBD;
	margin:0;
}
#examplesList ul li a:hover{
	color: #f2f2f2;
}
#examplesList .column{
	float: left;
	margin: 0 20px 0 0;
}
#examplesList h3{
	color: #f2f2f2;
	font-size: 1.2em;
	margin: 0 0 15px 0;
	border-bottom: 1px solid rgba(0, 0, 0, 0.4);
	-webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	-moz-box-shadow: 0 1px 0 rgba(255,255,255,0.1);
	box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1);
	padding: 0 0 5px 0;
}



/* Demos Menu
 * --------------------------------------- */
 #demosMenu{
	position:fixed;
	bottom: 10px;
	right:10px;
	z-index: 999;
 }


/* Custom CSS
 * --------------------------------------- */
body{
	font-family: arial,helvetica;
	color: #333;
	color: rgba(0,0,0,0.5);
}
h1{
	font-size: 4em;
}
h2{
	font-size: 1.6em;
}
p{
	font-size: 1.5em;
}
.graduated{
	background-image: url(https://alvarotrigo.com/multiScroll/imgs/graduated.png);
	background-size: cover;
	top:0;
}
.graduated,
.fullscreen{
	position: absolute;
	width:200%;
	height: 100%;
	left: 0;
	z-index: 1;
	vertical-align: middle;
	text-align: center;
	 -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
#donations a{
    color: #333;
    color: rgba(0, 0, 0, 0.5);
}
#donations a:hover{
	color: #fff;
}

#markup{
	margin: 15px 0;
}

/* Section 1
 * --------------------------------------- */
.ms-left .section1 .fullscreen{
	top:23%;
	}

.section1 img {
	margin: 24px 0 15px 0;
}


/* Section 2
 * --------------------------------------- */
.section2{
	background:#000;
}
.ms-right .section2{
	background-image: url(https://alvarotrigo.com/multiScroll/imgs/tiger.jpg);
	background-repeat: no-repeat;
	background-position: right;
	background-size: auto 100%;
}
/*screen resolution smaller than 1210px*/
@media all and (max-width: 1210px){
	.ms-right .section2{
		background-position: left;
	}
}

.section2 h1{
	color: #fff;
}
.section2 h2{
	margin: 15px 0 0 0;
	color: #8a8a8a;
}
.section2 .content{
	margin-left:20%;
	display:block;
	top: 20%;
	position: absolute;
}


/* Section 3
 * --------------------------------------- */
.ms-left .section3{
 /* fallback */
  background-color: #e81639;
  background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e81639), to(#7d0014));
  background: -webkit-linear-gradient(top, #e81639, #7d0014);
  background: -moz-linear-gradient(top, #e81639, #7d0014);
  background: -ms-linear-gradient(top, #e81639, #7d0014);
  background: -o-linear-gradient(top, #e81639, #7d0014);
}
.ms-right .section3{
	background-color: #e81639;
	background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#e81639), to(#7d0014));
	background-image: -webkit-linear-gradient(top, #e81639, #7d0014);
	background-image: -moz-linear-gradient(top, #e81639, #7d0014);
	background-image: -ms-linear-gradient(top, #e81639, #7d0014);
	background-image: -o-linear-gradient(top, #e81639, #7d0014);
}
.section3 .coffee{
	background-image: url(https://alvarotrigo.com/multiScroll/imgs/coffee.png);
	background-repeat: no-repeat;
	background-size: 90% auto;
	background-position: 100% 66%;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

.section3 h1{
 	color: #fff;
 }
.section3 h2{
 	margin: 15px 0 0 0;
	color: #cd8a91;
	color: rgba(255,255,255,0.5);
}
.section3 .content{
	margin-left: 15%;
	display: block;
	top: 20%;
	position: absolute;
	box-sizing: border-box;
}


/*Downloaded from https://www.codeseek.co/1/multi-scrolling-pages-wBzamQ */
/*! jQuery UI - v1.9.2 - 2014-03-21
 * https://jqueryui.com
 * Includes: jquery.ui.effect.js
 * Copyright 2014 jQuery Foundation and other contributors; Licensed MIT */

jQuery.effects || function (e, t) {
    var i = e.uiBackCompat !== !1,
        a = "ui-effects-";
    e.effects = {
        effect: {}
    },
    function (t, i) {
        function a(e, t, i) {
            var a = c[t.type] || {};
            return null == e ? i || !t.def ? null : t.def : (e = a.floor ? ~~e : parseFloat(e), isNaN(e) ? t.def : a.mod ? (e + a.mod) % a.mod : 0 > e ? 0 : e > a.max ? a.max : e)
        }
        function s(e) {
            var a = u(),
                s = a._rgba = [];
            return e = e.toLowerCase(), m(l, function (t, n) {
                var r, o = n.re.exec(e),
                    h = o && n.parse(o),
                    l = n.space || "rgba";
                return h ? (r = a[l](h), a[d[l].cache] = r[d[l].cache], s = a._rgba = r._rgba, !1) : i
            }), s.length ? ("0,0,0,0" === s.join() && t.extend(s, r.transparent), a) : r[e]
        }
        function n(e, t, i) {
            return i = (i + 1) % 1, 1 > 6 * i ? e + 6 * (t - e) * i : 1 > 2 * i ? t : 2 > 3 * i ? e + 6 * (t - e) * (2 / 3 - i) : e
        }
        var r, o = "backgroundColor borderBottomColor borderLeftColor borderRightColor borderTopColor color columnRuleColor outlineColor textDecorationColor textEmphasisColor".split(" "),
            h = /^([\-+])=\s*(\d+\.?\d*)/,
            l = [{
                re: /rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
                parse: function (e) {
                    return [e[1], e[2], e[3], e[4]]
                }
            }, {
                re: /rgba?\(\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
                parse: function (e) {
                    return [2.55 * e[1], 2.55 * e[2], 2.55 * e[3], e[4]]
                }
            }, {
                re: /#([a-f0-9]{2})([a-f0-9]{2})([a-f0-9]{2})/,
                parse: function (e) {
                    return [parseInt(e[1], 16), parseInt(e[2], 16), parseInt(e[3], 16)]
                }
            }, {
                re: /#([a-f0-9])([a-f0-9])([a-f0-9])/,
                parse: function (e) {
                    return [parseInt(e[1] + e[1], 16), parseInt(e[2] + e[2], 16), parseInt(e[3] + e[3], 16)]
                }
            }, {
                re: /hsla?\(\s*(\d+(?:\.\d+)?)\s*,\s*(\d+(?:\.\d+)?)\%\s*,\s*(\d+(?:\.\d+)?)\%\s*(?:,\s*(\d+(?:\.\d+)?)\s*)?\)/,
                space: "hsla",
                parse: function (e) {
                    return [e[1], e[2] / 100, e[3] / 100, e[4]]
                }
            }],
            u = t.Color = function (e, i, a, s) {
                return new t.Color.fn.parse(e, i, a, s)
            }, d = {
                rgba: {
                    props: {
                        red: {
                            idx: 0,
                            type: "byte"
                        },
                        green: {
                            idx: 1,
                            type: "byte"
                        },
                        blue: {
                            idx: 2,
                            type: "byte"
                        }
                    }
                },
                hsla: {
                    props: {
                        hue: {
                            idx: 0,
                            type: "degrees"
                        },
                        saturation: {
                            idx: 1,
                            type: "percent"
                        },
                        lightness: {
                            idx: 2,
                            type: "percent"
                        }
                    }
                }
            }, c = {
                "byte": {
                    floor: !0,
                    max: 255
                },
                percent: {
                    max: 1
                },
                degrees: {
                    mod: 360,
                    floor: !0
                }
            }, p = u.support = {}, f = t("<p>")[0],
            m = t.each;
        f.style.cssText = "background-color:rgba(1,1,1,.5)", p.rgba = f.style.backgroundColor.indexOf("rgba") > -1, m(d, function (e, t) {
            t.cache = "_" + e, t.props.alpha = {
                idx: 3,
                type: "percent",
                def: 1
            }
        }), u.fn = t.extend(u.prototype, {
            parse: function (n, o, h, l) {
                if (n === i) return this._rgba = [null, null, null, null], this;
                (n.jquery || n.nodeType) && (n = t(n).css(o), o = i);
                var c = this,
                    p = t.type(n),
                    f = this._rgba = [];
                return o !== i && (n = [n, o, h, l], p = "array"), "string" === p ? this.parse(s(n) || r._default) : "array" === p ? (m(d.rgba.props, function (e, t) {
                    f[t.idx] = a(n[t.idx], t)
                }), this) : "object" === p ? (n instanceof u ? m(d, function (e, t) {
                    n[t.cache] && (c[t.cache] = n[t.cache].slice())
                }) : m(d, function (t, i) {
                    var s = i.cache;
                    m(i.props, function (e, t) {
                        if (!c[s] && i.to) {
                            if ("alpha" === e || null == n[e]) return;
                            c[s] = i.to(c._rgba)
                        }
                        c[s][t.idx] = a(n[e], t, !0)
                    }), c[s] && 0 > e.inArray(null, c[s].slice(0, 3)) && (c[s][3] = 1, i.from && (c._rgba = i.from(c[s])))
                }), this) : i
            },
            is: function (e) {
                var t = u(e),
                    a = !0,
                    s = this;
                return m(d, function (e, n) {
                    var r, o = t[n.cache];
                    return o && (r = s[n.cache] || n.to && n.to(s._rgba) || [], m(n.props, function (e, t) {
                        return null != o[t.idx] ? a = o[t.idx] === r[t.idx] : i
                    })), a
                }), a
            },
            _space: function () {
                var e = [],
                    t = this;
                return m(d, function (i, a) {
                    t[a.cache] && e.push(i)
                }), e.pop()
            },
            transition: function (e, t) {
                var i = u(e),
                    s = i._space(),
                    n = d[s],
                    r = 0 === this.alpha() ? u("transparent") : this,
                    o = r[n.cache] || n.to(r._rgba),
                    h = o.slice();
                return i = i[n.cache], m(n.props, function (e, s) {
                    var n = s.idx,
                        r = o[n],
                        l = i[n],
                        u = c[s.type] || {};
                    null !== l && (null === r ? h[n] = l : (u.mod && (l - r > u.mod / 2 ? r += u.mod : r - l > u.mod / 2 && (r -= u.mod)), h[n] = a((l - r) * t + r, s)))
                }), this[s](h)
            },
            blend: function (e) {
                if (1 === this._rgba[3]) return this;
                var i = this._rgba.slice(),
                    a = i.pop(),
                    s = u(e)._rgba;
                return u(t.map(i, function (e, t) {
                    return (1 - a) * s[t] + a * e
                }))
            },
            toRgbaString: function () {
                var e = "rgba(",
                    i = t.map(this._rgba, function (e, t) {
                        return null == e ? t > 2 ? 1 : 0 : e
                    });
                return 1 === i[3] && (i.pop(), e = "rgb("), e + i.join() + ")"
            },
            toHslaString: function () {
                var e = "hsla(",
                    i = t.map(this.hsla(), function (e, t) {
                        return null == e && (e = t > 2 ? 1 : 0), t && 3 > t && (e = Math.round(100 * e) + "%"), e
                    });
                return 1 === i[3] && (i.pop(), e = "hsl("), e + i.join() + ")"
            },
            toHexString: function (e) {
                var i = this._rgba.slice(),
                    a = i.pop();
                return e && i.push(~~ (255 * a)), "#" + t.map(i, function (e) {
                    return e = (e || 0).toString(16), 1 === e.length ? "0" + e : e
                }).join("")
            },
            toString: function () {
                return 0 === this._rgba[3] ? "transparent" : this.toRgbaString()
            }
        }), u.fn.parse.prototype = u.fn, d.hsla.to = function (e) {
            if (null == e[0] || null == e[1] || null == e[2]) return [null, null, null, e[3]];
            var t, i, a = e[0] / 255,
                s = e[1] / 255,
                n = e[2] / 255,
                r = e[3],
                o = Math.max(a, s, n),
                h = Math.min(a, s, n),
                l = o - h,
                u = o + h,
                d = .5 * u;
            return t = h === o ? 0 : a === o ? 60 * (s - n) / l + 360 : s === o ? 60 * (n - a) / l + 120 : 60 * (a - s) / l + 240, i = 0 === d || 1 === d ? d : .5 >= d ? l / u : l / (2 - u), [Math.round(t) % 360, i, d, null == r ? 1 : r]
        }, d.hsla.from = function (e) {
            if (null == e[0] || null == e[1] || null == e[2]) return [null, null, null, e[3]];
            var t = e[0] / 360,
                i = e[1],
                a = e[2],
                s = e[3],
                r = .5 >= a ? a * (1 + i) : a + i - a * i,
                o = 2 * a - r;
            return [Math.round(255 * n(o, r, t + 1 / 3)), Math.round(255 * n(o, r, t)), Math.round(255 * n(o, r, t - 1 / 3)), s]
        }, m(d, function (e, s) {
            var n = s.props,
                r = s.cache,
                o = s.to,
                l = s.from;
            u.fn[e] = function (e) {
                if (o && !this[r] && (this[r] = o(this._rgba)), e === i) return this[r].slice();
                var s, h = t.type(e),
                    d = "array" === h || "object" === h ? e : arguments,
                    c = this[r].slice();
                return m(n, function (e, t) {
                    var i = d["object" === h ? e : t.idx];
                    null == i && (i = c[t.idx]), c[t.idx] = a(i, t)
                }), l ? (s = u(l(c)), s[r] = c, s) : u(c)
            }, m(n, function (i, a) {
                u.fn[i] || (u.fn[i] = function (s) {
                    var n, r = t.type(s),
                        o = "alpha" === i ? this._hsla ? "hsla" : "rgba" : e,
                        l = this[o](),
                        u = l[a.idx];
                    return "undefined" === r ? u : ("function" === r && (s = s.call(this, u), r = t.type(s)), null == s && a.empty ? this : ("string" === r && (n = h.exec(s), n && (s = u + parseFloat(n[2]) * ("+" === n[1] ? 1 : -1))), l[a.idx] = s, this[o](l)))
                })
            })
        }), m(o, function (e, i) {
            t.cssHooks[i] = {
                set: function (e, a) {
                    var n, r, o = "";
                    if ("string" !== t.type(a) || (n = s(a))) {
                        if (a = u(n || a), !p.rgba && 1 !== a._rgba[3]) {
                            for (r = "backgroundColor" === i ? e.parentNode : e;
                            ("" === o || "transparent" === o) && r && r.style;) try {
                                o = t.css(r, "backgroundColor"), r = r.parentNode
                            } catch (h) {}
                            a = a.blend(o && "transparent" !== o ? o : "_default")
                        }
                        a = a.toRgbaString()
                    }
                    try {
                        e.style[i] = a
                    } catch (l) {}
                }
            }, t.fx.step[i] = function (e) {
                e.colorInit || (e.start = u(e.elem, i), e.end = u(e.end), e.colorInit = !0), t.cssHooks[i].set(e.elem, e.start.transition(e.end, e.pos))
            }
        }), t.cssHooks.borderColor = {
            expand: function (e) {
                var t = {};
                return m(["Top", "Right", "Bottom", "Left"], function (i, a) {
                    t["border" + a + "Color"] = e
                }), t
            }
        }, r = t.Color.names = {
            aqua: "#00ffff",
            black: "#000000",
            blue: "#0000ff",
            fuchsia: "#ff00ff",
            gray: "#808080",
            green: "#008000",
            lime: "#00ff00",
            maroon: "#800000",
            navy: "#000080",
            olive: "#808000",
            purple: "#800080",
            red: "#ff0000",
            silver: "#c0c0c0",
            teal: "#008080",
            white: "#ffffff",
            yellow: "#ffff00",
            transparent: [null, null, null, 0],
            _default: "#ffffff"
        }
    }(jQuery),
    function () {
        function i() {
            var t, i, a = this.ownerDocument.defaultView ? this.ownerDocument.defaultView.getComputedStyle(this, null) : this.currentStyle,
                s = {};
            if (a && a.length && a[0] && a[a[0]]) for (i = a.length; i--;) t = a[i], "string" == typeof a[t] && (s[e.camelCase(t)] = a[t]);
            else for (t in a) "string" == typeof a[t] && (s[t] = a[t]);
            return s
        }
        function a(t, i) {
            var a, s, r = {};
            for (a in i) s = i[a], t[a] !== s && (n[a] || (e.fx.step[a] || !isNaN(parseFloat(s))) && (r[a] = s));
            return r
        }
        var s = ["add", "remove", "toggle"],
            n = {
                border: 1,
                borderBottom: 1,
                borderColor: 1,
                borderLeft: 1,
                borderRight: 1,
                borderTop: 1,
                borderWidth: 1,
                margin: 1,
                padding: 1
            };
        e.each(["borderLeftStyle", "borderRightStyle", "borderBottomStyle", "borderTopStyle"], function (t, i) {
            e.fx.step[i] = function (e) {
                ("none" !== e.end && !e.setAttr || 1 === e.pos && !e.setAttr) && (jQuery.style(e.elem, i, e.end), e.setAttr = !0)
            }
        }), e.effects.animateClass = function (t, n, r, o) {
            var h = e.speed(n, r, o);
            return this.queue(function () {
                var n, r = e(this),
                    o = r.attr("class") || "",
                    l = h.children ? r.find("*").andSelf() : r;
                l = l.map(function () {
                    var t = e(this);
                    return {
                        el: t,
                        start: i.call(this)
                    }
                }), n = function () {
                    e.each(s, function (e, i) {
                        t[i] && r[i + "Class"](t[i])
                    })
                }, n(), l = l.map(function () {
                    return this.end = i.call(this.el[0]), this.diff = a(this.start, this.end), this
                }), r.attr("class", o), l = l.map(function () {
                    var t = this,
                        i = e.Deferred(),
                        a = jQuery.extend({}, h, {
                            queue: !1,
                            complete: function () {
                                i.resolve(t)
                            }
                        });
                    return this.el.animate(this.diff, a), i.promise()
                }), e.when.apply(e, l.get()).done(function () {
                    n(), e.each(arguments, function () {
                        var t = this.el;
                        e.each(this.diff, function (e) {
                            t.css(e, "")
                        })
                    }), h.complete.call(r[0])
                })
            })
        }, e.fn.extend({
            _addClass: e.fn.addClass,
            addClass: function (t, i, a, s) {
                return i ? e.effects.animateClass.call(this, {
                    add: t
                }, i, a, s) : this._addClass(t)
            },
            _removeClass: e.fn.removeClass,
            removeClass: function (t, i, a, s) {
                return i ? e.effects.animateClass.call(this, {
                    remove: t
                }, i, a, s) : this._removeClass(t)
            },
            _toggleClass: e.fn.toggleClass,
            toggleClass: function (i, a, s, n, r) {
                return "boolean" == typeof a || a === t ? s ? e.effects.animateClass.call(this, a ? {
                    add: i
                } : {
                    remove: i
                }, s, n, r) : this._toggleClass(i, a) : e.effects.animateClass.call(this, {
                    toggle: i
                }, a, s, n)
            },
            switchClass: function (t, i, a, s, n) {
                return e.effects.animateClass.call(this, {
                    add: i,
                    remove: t
                }, a, s, n)
            }
        })
    }(),
    function () {
        function s(t, i, a, s) {
            return e.isPlainObject(t) && (i = t, t = t.effect), t = {
                effect: t
            }, null == i && (i = {}), e.isFunction(i) && (s = i, a = null, i = {}), ("number" == typeof i || e.fx.speeds[i]) && (s = a, a = i, i = {}), e.isFunction(a) && (s = a, a = null), i && e.extend(t, i), a = a || i.duration, t.duration = e.fx.off ? 0 : "number" == typeof a ? a : a in e.fx.speeds ? e.fx.speeds[a] : e.fx.speeds._default, t.complete = s || i.complete, t
        }
        function n(t) {
            return !t || "number" == typeof t || e.fx.speeds[t] ? !0 : "string" != typeof t || e.effects.effect[t] ? !1 : i && e.effects[t] ? !1 : !0
        }
        e.extend(e.effects, {
            version: "1.9.2",
            save: function (e, t) {
                for (var i = 0; t.length > i; i++) null !== t[i] && e.data(a + t[i], e[0].style[t[i]])
            },
            restore: function (e, i) {
                var s, n;
                for (n = 0; i.length > n; n++) null !== i[n] && (s = e.data(a + i[n]), s === t && (s = ""), e.css(i[n], s))
            },
            setMode: function (e, t) {
                return "toggle" === t && (t = e.is(":hidden") ? "show" : "hide"), t
            },
            getBaseline: function (e, t) {
                var i, a;
                switch (e[0]) {
                    case "top":
                        i = 0;
                        break;
                    case "middle":
                        i = .5;
                        break;
                    case "bottom":
                        i = 1;
                        break;
                    default:
                        i = e[0] / t.height
                }
                switch (e[1]) {
                    case "left":
                        a = 0;
                        break;
                    case "center":
                        a = .5;
                        break;
                    case "right":
                        a = 1;
                        break;
                    default:
                        a = e[1] / t.width
                }
                return {
                    x: a,
                    y: i
                }
            },
            createWrapper: function (t) {
                if (t.parent().is(".ui-effects-wrapper")) return t.parent();
                var i = {
                    width: t.outerWidth(!0),
                    height: t.outerHeight(!0),
                    "float": t.css("float")
                }, a = e("<div></div>").addClass("ui-effects-wrapper").css({
                    fontSize: "100%",
                    background: "transparent",
                    border: "none",
                    margin: 0,
                    padding: 0
                }),
                    s = {
                        width: t.width(),
                        height: t.height()
                    }, n = document.activeElement;
                try {
                    n.id
                } catch (r) {
                    n = document.body
                }
                return t.wrap(a), (t[0] === n || e.contains(t[0], n)) && e(n).focus(), a = t.parent(), "static" === t.css("position") ? (a.css({
                    position: "relative"
                }), t.css({
                    position: "relative"
                })) : (e.extend(i, {
                    position: t.css("position"),
                    zIndex: t.css("z-index")
                }), e.each(["top", "left", "bottom", "right"], function (e, a) {
                    i[a] = t.css(a), isNaN(parseInt(i[a], 10)) && (i[a] = "auto")
                }), t.css({
                    position: "relative",
                    top: 0,
                    left: 0,
                    right: "auto",
                    bottom: "auto"
                })), t.css(s), a.css(i).show()
            },
            removeWrapper: function (t) {
                var i = document.activeElement;
                return t.parent().is(".ui-effects-wrapper") && (t.parent().replaceWith(t), (t[0] === i || e.contains(t[0], i)) && e(i).focus()), t
            },
            setTransition: function (t, i, a, s) {
                return s = s || {}, e.each(i, function (e, i) {
                    var n = t.cssUnit(i);
                    n[0] > 0 && (s[i] = n[0] * a + n[1])
                }), s
            }
        }), e.fn.extend({
            effect: function () {
                function t(t) {
                    function i() {
                        e.isFunction(n) && n.call(s[0]), e.isFunction(t) && t()
                    }
                    var s = e(this),
                        n = a.complete,
                        r = a.mode;
                    (s.is(":hidden") ? "hide" === r : "show" === r) ? i() : o.call(s[0], a, i)
                }
                var a = s.apply(this, arguments),
                    n = a.mode,
                    r = a.queue,
                    o = e.effects.effect[a.effect],
                    h = !o && i && e.effects[a.effect];
                return e.fx.off || !o && !h ? n ? this[n](a.duration, a.complete) : this.each(function () {
                    a.complete && a.complete.call(this)
                }) : o ? r === !1 ? this.each(t) : this.queue(r || "fx", t) : h.call(this, {
                    options: a,
                    duration: a.duration,
                    callback: a.complete,
                    mode: a.mode
                })
            },
            _show: e.fn.show,
            show: function (e) {
                if (n(e)) return this._show.apply(this, arguments);
                var t = s.apply(this, arguments);
                return t.mode = "show", this.effect.call(this, t)
            },
            _hide: e.fn.hide,
            hide: function (e) {
                if (n(e)) return this._hide.apply(this, arguments);
                var t = s.apply(this, arguments);
                return t.mode = "hide", this.effect.call(this, t)
            },
            __toggle: e.fn.toggle,
            toggle: function (t) {
                if (n(t) || "boolean" == typeof t || e.isFunction(t)) return this.__toggle.apply(this, arguments);
                var i = s.apply(this, arguments);
                return i.mode = "toggle", this.effect.call(this, i)
            },
            cssUnit: function (t) {
                var i = this.css(t),
                    a = [];
                return e.each(["em", "px", "%", "pt"], function (e, t) {
                    i.indexOf(t) > 0 && (a = [parseFloat(i), t])
                }), a
            }
        })
    }(),
    function () {
        var t = {};
        e.each(["Quad", "Cubic", "Quart", "Quint", "Expo"], function (e, i) {
            t[i] = function (t) {
                return Math.pow(t, e + 2)
            }
        }), e.extend(t, {
            Sine: function (e) {
                return 1 - Math.cos(e * Math.PI / 2)
            },
            Circ: function (e) {
                return 1 - Math.sqrt(1 - e * e)
            },
            Elastic: function (e) {
                return 0 === e || 1 === e ? e : -Math.pow(2, 8 * (e - 1)) * Math.sin((80 * (e - 1) - 7.5) * Math.PI / 15)
            },
            Back: function (e) {
                return e * e * (3 * e - 2)
            },
            Bounce: function (e) {
                for (var t, i = 4;
                ((t = Math.pow(2, --i)) - 1) / 11 > e;);
                return 1 / Math.pow(4, 3 - i) - 7.5625 * Math.pow((3 * t - 2) / 22 - e, 2)
            }
        }), e.each(t, function (t, i) {
            e.easing["easeIn" + t] = i, e.easing["easeOut" + t] = function (e) {
                return 1 - i(1 - e)
            }, e.easing["easeInOut" + t] = function (e) {
                return .5 > e ? i(2 * e) / 2 : 1 - i(-2 * e + 2) / 2
            }
        })
    }()
}(jQuery);






/**
 * multiscroll.js 0.0.8 Beta
 * https://github.com/alvarotrigo/multiscroll.js
 * MIT licensed
 *
 * Copyright (C) 2013 alvarotrigo.com - A project by Alvaro Trigo
 */ (function (a) {
    a.fn.multiscroll = function (b) {
        function w() {
            q = a(window).height();
            r();
            a.isFunction(b.afterResize) && b.afterResize.call(this)
        }
        function r() {
            b.css3 ? (m(a(".ms-left"), "translate3d(0px, -" + a(".ms-left").find(".ms-section.active").position().top + "px, 0px)", !1), m(a(".ms-right"), "translate3d(0px, -" + a(".ms-right").find(".ms-section.active").position().top + "px, 0px)", !1)) : (a(".ms-left").css("top", -a(".ms-left").find(".ms-section.active").position().top), a(".ms-right").css("top", -a(".ms-right").find(".ms-section.active").position().top))
        }

        function f(c) {
            var d = c.index(),
                s = a(".ms-right").find(".ms-section").eq(x - 1 - d),
                e = c.data("anchor"),
                f = a(".ms-left .ms-section.active").index() + 1,
                g = y(c);
            h = !0;
            b.anchors.length && (location.hash = e);
            var k = {
                left: c.position().top,
                right: s.position().top
            };
            s.addClass("active").siblings().removeClass("active");
            c.addClass("active").siblings().removeClass("active");
            b.css3 ? (a.isFunction(b.onLeave) && b.onLeave.call(this, f, d + 1, g), c = "translate3d(0px, -" + k.left + "px, 0px)", k = "translate3d(0px, -" + k.right + "px, 0px)", m(a(".ms-left"),
            c, !0), m(a(".ms-right"), k, !0), setTimeout(function () {
                a.isFunction(b.afterLoad) && b.afterLoad.call(this, e, d + 1);
                setTimeout(function () {
                    h = !1
                }, t)
            }, b.scrollingSpeed)) : (a.isFunction(b.onLeave) && b.onLeave.call(this, f, d + 1, g), a(".ms-left").animate({
                top: -k.left
            }, b.scrollingSpeed, b.easing, function () {
                a.isFunction(b.afterLoad) && b.afterLoad.call(this, e, d + 1);
                setTimeout(function () {
                    h = !1
                }, t)
            }), a(".ms-right").animate({
                top: -k.right
            }, b.scrollingSpeed, b.easing));
            lastScrolledDestiny = e;
            z(e);
            A(e, d)
        }
        function u() {
            document.addEventListener ? (document.addEventListener("mousewheel", g, !1), document.addEventListener("wheel", g, !1)) : document.attachEvent("onmousewheel", g)
        }
        function g(c) {
            c = window.event || c;
            c = Math.max(-1, Math.min(1, c.wheelDelta || -c.deltaY || -c.detail));
            h || (0 > c ? a.fn.multiscroll.moveSectionDown() : a.fn.multiscroll.moveSectionUp());
            return !1
        }
        function m(c, a, b) {
            c.toggleClass("ms-easing", b);
            c.css({
                "-webkit-transform": a,
                "-moz-transform": a,
                "-ms-transform": a,
                transform: a
            })
        }
        function A(c, d) {
            b.navigation && (a("#multiscroll-nav").find(".active").removeClass("active"),
            c ? a("#multiscroll-nav").find('a[href="#' + c + '"]').addClass("active") : a("#multiscroll-nav").find("li").eq(d).find("a").addClass("active"))
        }
        function z(c) {
            b.menu && (a(b.menu).find(".active").removeClass("active"), a(b.menu).find('[data-menuanchor="' + c + '"]').addClass("active"))
        }
        function y(c) {
            var b = a(".ms-left .ms-section.active").index();
            c = c.index();
            return b > c ? "up" : "down"
        }
        function B() {
            var c = document.createElement("p"),
                a, b = {
                    webkitTransform: "-webkit-transform",
                    OTransform: "-o-transform",
                    msTransform: "-ms-transform",
                    MozTransform: "-moz-transform",
                    transform: "transform"
                };
            document.body.insertBefore(c, null);
            for (var e in b) void 0 !== c.style[e] && (c.style[e] = "translate3d(1px,1px,1px)", a = window.getComputedStyle(c).getPropertyValue(b[e]));
            document.body.removeChild(c);
            return void 0 !== a && 0 < a.length && "none" !== a
        }
        function C(a) {
            var d = q;
            if (b.paddingTop || b.paddingBottom) a = parseInt(a.css("padding-top")) + parseInt(a.css("padding-bottom")), d = q - a;
            return d
        }
        function v(a) {
            var b = [];
            window.navigator.msPointerEnabled ? (b.y = a.pageY, b.x = a.pageX) : (b.y = a.touches[0].pageY, b.x = a.touches[0].pageX);
            return b
        }
        b = a.extend({
            verticalCentered: !0,
            scrollingSpeed: 700,
            easing: "easeInQuart",
            menu: !1,
            sectionsColor: [],
            anchors: [],
            navigation: !1,
            navigationPosition: "right",
            navigationColor: "#000",
            navigationTooltips: [],
            loopBottom: !1,
            loopTop: !1,
            css3: !1,
            paddingTop: 0,
            paddingBottom: 0,
            fixedElements: null,
            normalScrollElements: null,
            keyboardScrolling: !0,
            touchSensitivity: 5,
            afterLoad: null,
            onLeave: null,
            afterRender: null,
            afterResize: null
        }, b);
        var t = 600,
            x = a(".ms-left").find(".ms-section").length,
            h = !1,
            l, q = a(window).height();
        u();
        a(document).off("touchstart MSPointerDown").on("touchstart MSPointerDown", function (a) {
            n = v(a.originalEvent).y
        });
        a(document).off("touchmove MSPointerMove").on("touchmove MSPointerMove", function (c) {
            var d = c.originalEvent;
            c.preventDefault();
            a(".ms-left .ms-section.active");
            h || (p = v(d).y, Math.abs(n - p) > a(window).height() / 100 * b.touchSensitivity && (n > p ? a.fn.multiscroll.moveSectionDown() : p > n && a.fn.multiscroll.moveSectionUp()))
        });
        b.css3 && (b.css3 = B());
        a("html, body").css({
            overflow: "hidden",
            height: "100%"
        });
        b.navigation && (a("body").append('<div id="multiscroll-nav"><ul></ul></div>'), l = a("#multiscroll-nav"), l.css("color", b.navigationColor), l.addClass(b.navigationPosition));
        a(".ms-right, .ms-left").css({
            width: "50%",
            position: "absolute",
            height: "100%"
        });
        a(".ms-right").css({
            right: "0.1px",
            top: "0"
        });
        a(".ms-left").css({
            left: "0",
            top: "0"
        });
        a(".ms-left .ms-section, .ms-right .ms-section").each(function () {
            var c = a(this).index();
            (b.paddingTop || b.paddingBottom) && a(this).css("padding", b.paddingTop + " 0 " + b.paddingBottom + " 0");
            "undefined" !== typeof b.sectionsColor[c] && a(this).css("background-color", b.sectionsColor[c]);
            "undefined" !== typeof b.anchors[c] && a(this).attr("data-anchor", b.anchors[c]);
            if (b.verticalCentered) {
                var d = a(this);
                d.addClass("ms-table").wrapInner('<div class="ms-tableCell" style="height: ' + C(d) + 'px" />')
            }
            a(this).closest(".ms-left").length && b.navigation && (d = "", b.anchors.length && (d = b.anchors[c]), c = b.navigationTooltips[c], "undefined" === typeof c && (c = ""), b.navigation && l.find("ul").append('<li data-tooltip="' + c + '"><a href="#' + d + '"><span></span></a></li>'))
        });
        a(".ms-right").html(a(".ms-right").find(".ms-section").get().reverse());
        a(".ms-left .ms-section, .ms-right .ms-section").each(function () {
            var c = a(this).index();
            a(this).css({
                height: "100%"
            });
            !c && b.navigation && l.find("li").eq(c).find("a").addClass("active")
        }).promise().done(function () {
            a(".ms-left .ms-section.active").length || (a(".ms-right").find(".ms-section").last().addClass("active"), a(".ms-left").find(".ms-section").first().addClass("active"));
            a.isFunction(b.afterRender) && b.afterRender.call(this);
            r();
            a(window).on("load", function () {
                var c = window.location.hash.replace("#", ""),
                    b = a('.ms-left .ms-section[data-anchor="' + c + '"]');
                c.length && f(b)
            })
        });
        a(window).on("hashchange", function () {
            var c = window.location.hash.replace("#", ""),
                b = a(".ms-left").find('[data-anchor="' + c + '"]');
            "undefined" !== typeof lastScrolledDestiny && c === lastScrolledDestiny || f(b)
        });
        a(document).keydown(function (c) {
            if (b.keyboardScrolling && !h) switch (c.which) {
                case 38:
                case 33:
                    a.fn.multiscroll.moveSectionUp();
                    break;
                case 40:
                case 34:
                    a.fn.multiscroll.moveSectionDown()
            }
        });
        a(document).mousedown(function (a) {
            if (1 == a.button) return a.preventDefault(), !1
        });
        a(document).on("click", "#multiscroll-nav a", function (c) {
            c.preventDefault();
            c = a(this).parent().index();
            f(a(".ms-left .ms-section").eq(c))
        });
        a(document).on({
            mouseenter: function () {
                var c = a(this).data("tooltip");
                a('<div class="multiscroll-tooltip ' + b.navigationPosition + '">' + c + "</div>").hide().appendTo(a(this)).fadeIn(200)
            },
            mouseleave: function () {
                a(this).find(".multiscroll-tooltip").fadeOut().remove()
            }
        },
            "#multiscroll-nav li");
        b.normalScrollElements && (a(document).on("mouseover", b.normalScrollElements, function () {
            a.fn.multiscroll.setMouseWheelScrolling(!1)
        }), a(document).on("mouseout", b.normalScrollElements, function () {
            a.fn.multiscroll.setMouseWheelScrolling(!0)
        }));
        a(window).resize(function () {
            w()
        });
        a.fn.multiscroll.moveSectionUp = function () {
            var c = a(".ms-left .ms-section.active").prev(".ms-section");
            !c.length && b.loopTop && (c = a(".ms-left .ms-section").last());
            c.length && f(c)
        };
        a.fn.multiscroll.moveSectionDown = function () {
            var c = a(".ms-left .ms-section.active").next(".ms-section");
            !c.length && b.loopBottom && (c = a(".ms-left .ms-section").first());
            c.length && f(c)
        };
        a.fn.multiscroll.moveTo = function (c) {
            var b = "",
                b = isNaN(c) ? a('.ms-left [data-anchor="' + c + '"]') : a(".ms-left .ms-section").eq(c - 1);
            f(b)
        };
        a.fn.multiscroll.setKeyboardScrolling = function (a) {
            b.keyboardScrolling = a
        };
        a.fn.multiscroll.setMouseWheelScrolling = function (a) {
            a ? u() : document.addEventListener ? (document.removeEventListener("mousewheel", g, !1), document.removeEventListener("wheel",
            g, !1)) : document.detachEvent("onmousewheel", g)
        };
        a.fn.multiscroll.setScrollingSpeed = function (a) {
            b.scrollingSpeed = a
        };
        var n = 0,
            p = 0
    }
})(jQuery);





		$(document).ready(function() {
	    	$('#myContainer').multiscroll({
	    		sectionsColor: ['#5ad0ff', '#000', '#ffdd00'],
	        	anchors: ['first', 'second', 'third'],
	        	menu: '#menu',
	        	navigation: true,
	        	navigationTooltips: ['First', 'Second', 'Third'],

	        	afterLoad: function(anchor, index){
	        		if(index==2 || index == 3){
	        			$('#infoMenu li a').css('color', '#f2f2f2');
	        		}
					if(index==1){
						$('#infoMenu li a').css('color', '#333');	
					}
	        	}
	  	 	});
	    });

Comments