"use strict";
(function () {
var controller = $.superscrollorama({
playoutAnimations: false
});
var fallHook = $('#fall-hook');
var phone1Fall = TweenMax.to($('#phone1'), 1, {
css: {
top: '450px'
}
});
var phone2Fall = TweenMax.to($('#phone2'), 1, {
css: {
top: '450px'
}
});
var phone3Fall = TweenMax.to($('#phone3'), 1, {
css: {
top: '450px'
}
});
controller.addTween(fallHook, phone3Fall, 3000, 0);
controller.addTween(fallHook, phone2Fall, 2100, 500);
controller.addTween(fallHook, phone1Fall, 800, 1000);
var autoScrolling = false;
$('body').keyup(function (e) {
if (13 == e.keyCode) {
if (!autoScrolling) {
$.scrollTo($(document).height(), 3000);
autoScrolling = true;
} else {
$.scrollTo.window().stop(true);
autoScrolling = false;
}
}
});
$.localScroll({
target: 'body', // could be a selector or a jQuery object too.
queue: true,
duration: 500,
hash: true
});
var $side_nav = $('#side-nav');
var side_nav_targets = [];
// store possible nav targets in array for easier searching
$side_nav.find('a').each(function (index, anchor) {
side_nav_targets.push(anchor.getAttribute('href'));
});
$('.nav-anchor').waypoint(function (direction) {
$side_nav.find('a').removeClass('curr');
if (direction === 'down') {
$side_nav.find('a[href="#' + $(this).attr('id') + '"]').addClass('curr');
} else {
// find index in nav array of currently scrolled to target
var cur_target_index = $.inArray('#' + $(this).attr('id'), side_nav_targets);
// if there's a previous target, update the active navs
if (cur_target_index > 0) {
$side_nav.find('a[href="' + side_nav_targets[cur_target_index - 1] + '"]').addClass('curr');
}
}
});
})()
<div id="anchor0" class="nav-anchor"></div>
<div id="anchor1" class="nav-anchor"></div>
<div id="anchor2" class="nav-anchor"></div>
<div id="anchor3" class="nav-anchor"></div>
<div id="fall-hook"></div>
<div id="phone1" class="phone blur">
<div class="screen"></div>
<div class="frame"></div>
<div class="logo"></div>
</div>
<div id="phone2" class="phone">
<div class="screen"></div>
<div class="frame"></div>
<div class="logo"></div>
</div>
<div id="phone3" class="phone blur">
<div class="screen"></div>
<div class="frame"></div>
<div class="logo"></div>
</div>
<nav id="side-nav" role="navigation">
<ul>
<li><a class="nav" href="#anchor1" title="far">far</a>
</li>
<li><a class="nav" href="#anchor2" title="focus">focus</a>
</li>
<li><a class="nav" href="#anchor3" title="near">near</a>
</li>
</ul>
</nav>
<span id="scroll-tip">向下捲動<br/>︾</span>
.nav-anchor {
/* border: 1px solid white; */
display: block;
}
#anchor0 {
height: 360px;
}
#anchor1 {
height: 360px;
}
#anchor2 {
height: 320px;
}
#anchor3 {
height: 1600px;
}
#fall-hook {
display: block;
position: absolute;
left: 0;
top: 0;
width: 20px;
height: 3000px;
background: -moz-linear-gradient(top, #FF0000, #FF9900, #FFFF00, #00FF00, #0099FF, #0000FF, #FF00FF);
background: -webkit-linear-gradient(top, #FF0000, #FF9900, #FFFF00, #00FF00, #0099FF, #0000FF, #FF00FF);
background: -ms-linear-gradient(top, #FF0000, #FF9900, #FFFF00, #00FF00, #0099FF, #0000FF, #FF00FF);
background: -o-linear-gradient(top, #FF0000, #FF9900, #FFFF00, #00FF00, #0099FF, #0000FF, #FF00FF);
}
#phone1 {
left: 50px;
width: 200px;
height: 400px;
top: -400px;
}
#phone2 {
left: 250px;
width: 100px;
height: 200px;
top: -200px;
}
#phone3 {
left: 350px;
width: 50px;
height: 100px;
top: -200px;
}
.blur {
-webkit-filter: blur(5px);
filter: url("data:image/svg+xml;utf8,<svg height=\"0\" xmlns=\"http://www.w3.org/2000/svg\"><filter id=\"svgBlur\" name=\"svgBlur\" x=\"-5%\" y=\"-5%\" width=\"110%\" height=\"110%\"><feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5\"/></filter></svg>#svgBlur");
}
.phone {
display: block;
position: fixed;
}
.screen {
display: block;
position: absolute;
background: url('https://firefox.club.tw/static/img/event/every-moment/home/step/blue.png') no-repeat;
background-size: 100% auto;
width: 70%;
height: 60%;
left: 15%;
top: 10%;
}
.frame {
display: block;
position: absolute;
background: url('https://firefox.club.tw/static/img/event/every-moment/home/step/upload-phone.png') no-repeat;
background-size: 100%;
width: 80%;
height: 80%;
left: 10%;
}
.logo {
display: block;
position: absolute;
background: url('https://mozilla.com.tw/media/img/firefox/os/logo/firefox-os-white.png') no-repeat;
background-size: 100% auto;
width: 50%;
height: 50%;
left: 25%;
top: 30%;
}
body {
background-color: #000036;
}
#side-nav {
position: fixed;
z-index: 1000;
top: 50%;
right: 30px;
width: 20px;
margin-top: -77px;
padding: 0;
}
#side-nav ul {
list-style-type: none;
margin: 0;
padding: 0;
}
#side-nav ul li {
margin: 12px 0;
}
#side-nav ul li a {
display: block;
width: 12px;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
opacity: 0.5;
-webkit-transition: all linear 0.25s;
-moz-transition: all linear 0.25s;
-o-transition: all linear 0.25s;
-ms-transition: all linear 0.25s;
transition: all linear 0.25s;
}
#side-nav ul li a:hover, #side-nav ul li a:focus, #side-nav ul li a.curr {
opacity: 1;
}
#side-nav ul li a.nav {
height: 12px;
padding: 0;
background: #fff;
-moz-border-radius: 7px;
-webkit-border-radius: 7px;
border-radius: 7px;
}
#scroll-tip {
position: fixed;
left: 0;
right: 0;
bottom: 45px;
text-align: center;
margin: auto;
color: #FFF;
opacity: 0.5;
}