Apple website effect

Asked

Viewed 211 times

1

I would like to know what is called this effect of the Apple site, of when the user scroll, it jumps to the next section.

Click here to see the effect.

jquery
  • 2

    I left an answer with a jQuery solution, the apple site does not use jQuery. I saw that you never accepted one of your old questions as accepted. It is nice and useful to mark the best answer as right, so those who responded are also rewarded. Of course it’s good to wait before accepting to make room for new (and maybe better) answers but don’t forget to accept the answer.

  • didn’t have enough "reputation" to score the right answer, needs 15+.

1 answer

4


This animation is not difficult but has to take into account the mouse wheel direction and a vertical menu that makes smooth scroll using Animate and scrollTop for anchors or elements on the page.

The menu of apple:

<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 each li has a field data-, for example data-scene="ios" and seeing in the body of the page there is an element exactly with this ID...

<section id="ios" class="... etc

Now having this structure Javascript/jQuery to make the animation can be:

function that makes the scroll animated

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

part of the 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]);
});

click part of menu

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

Example: http://jsfiddle.net/w86L5/

Browser other questions tagged jquery

You are not signed in. Login or sign up in order to post.