Effect of the Apple website

1

I would like to know what the effect of the Apple website is called, when the scroller user jumps to the next section.

Click here to see the effect.

    
asked by anonymous 22.07.2014 / 01:08

1 answer

4

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 that makes scroll animated

function fazerScroll(pos) {
    $(document.body).animate({
        scrollTop: pos
    }, 1000);
}

part of mousewheel

$(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]);
});

part of the click on menu

$('#progress-nav a').on('click', function (e) {
    e.preventDefault();
    var idDestino = $(this).data('scene');
    var posicaoDestino = $('#' + idDestino).position().top;
    fazerScroll(posicaoDestino);
});

Example: link

    
22.07.2014 / 01:58