Question

Hola a tod@s, he visto una web que me parece muy bonita y me gustaría saber como se consiguen esos efectos de deslizamiento.
La web es: http://yoid.es

Muchas gracias, un saludo.

Answer 1

Hola José,

esta página está construida con plugins de JQuery. El efecto de deslizamiento lo hacen con jquery.animation.easing.js y lo configuran así para darle el tamaño y la velocidad de desplazamiento::

$(window).load(function () {
            $('#accordion-wrapper').raccordion({
                speed: 1000,
                sliderWidth: 940,
                sliderHeight: 400,
                autoCollapse: false
            });
        }); 

Luego cada elemento del menú, que es quien dispara el movimiento, tiene:

<ul class="navigation">
        <li class="l1" data-slide="1">INICIO</li>
        <li class="l2" data-slide="2">SERVICIOS</li>
        <li class="l3" data-slide="3">TRABAJOS</li>
        <li class="l4" data-slide="4">LA EMPRESA</li>
        <li class="l5" data-slide="5">CONTACTO</li>
        <li class="l6" data-slide="6">BLOG</li>
</ul>

y cada DIV conteniendo cada parte de la página tiene el mimo data-slide:

<div class="slide" id="slide1" data-slide="1" ...>

Acá hay un manual y ejemplos de uso: http://gsgd.co.uk/sandbox/jquery/easing/

Si nunca trabajaste con JQuery, podría hacer algo similar solo con JavaScript, en el que cada elemento del menú desplace una cantidad de pixeles el scroll de la página, usando la función scrollTo, pero el cambio se verá más brusco que en la página que viste. Suponiendo que cada DIV tiene 700px de altura, para pasar a la segunda sección harías:

window.scrollTo( 0, 700 );

para pasar a la cuarta:

window.scrollTo( 0, 2100 );

y para volver a la primera

window.scrollTo( 0, 0 );

Saludos!

Answer 2

O es un scroll parallax o simplemente cada vez que pulsas en una sección le pasa un scrollTo a window.