I would like to know what the effect of the Apple website is called, when the scroller user jumps to the next section.
I would like to know what the effect of the Apple website is called, when the scroller user jumps to the next section.
This animation is not difficult but you have to take into account the mouse wheel direction and a vertical menu which makes smooth scroll using the animate and scrollTop for anchors or elements on the page.
Apple's menu:
<nav id="progress-nav" class="placeholder on light" style="opacity: 1;">
<ul>
<li><a data-scene="hero" class="hero progress-nav-trigger"><span class="dot"></span><span class="hover-text">Início</span></a></li>
<li><a data-scene="forward" class="forward dark progress-nav-trigger active"><span class="dot"></span><span class="hover-text">Design</span></a></li>
<li><a data-scene="smart" class="smart progress-nav-trigger"><span class="dot"></span><span class="hover-text" style="right: 47px;">Características</span></a></li>
<li><a data-scene="ios" class="ios progress-nav-trigger"><span class="dot"></span><span class="hover-text">iOS 7</span></a></li>
<li><a data-scene="cases" class="cases progress-nav-trigger"><span class="dot"></span><span class="hover-text">Capa</span></a></li>
</ul>
</nav>
Note that every li
has a data-
field, for example data-scene="ios"
and seeing in the body of the page there is an element exactly with that ID
...
<section id="ios" class="... etc
Now having this structure the JavaScript / jQuery to do the animation can be:
function fazerScroll(pos) {
$(document.body).animate({
scrollTop: pos
}, 1000);
}
$(document).on('mousewheel', function (e) {
e.preventDefault();
var evento = e.originalEvent;
var roda = (evento.wheelDelta) ? evento.wheelDelta : -(evento.detail || evento.deltaY);
roda < 0 ? posicao.atual++ : posicao.atual--;
if (posicao.atual < 0) posicao.atual = 0;
if (posicao.atual > posicao.total) posicao.atual = posicao.total;
fazerScroll(posicao.elementos[posicao.atual]);
});
$('#progress-nav a').on('click', function (e) {
e.preventDefault();
var idDestino = $(this).data('scene');
var posicaoDestino = $('#' + idDestino).position().top;
fazerScroll(posicaoDestino);
});