/*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');
}
}
});
});
Bootstrap
Angular
ReactJS
jQuery
VueJS
HTML
CSS
JavaScript
![Experiments with inputs [number, text and tel]](https://codepen.io/luisfrancisco02/pen/dmdyXr/image/small.png)
