entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

1voto

¿Cómo se consigue este efecto?

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.

2 Respuestas

2votos

Leonardo-Tadei Puntos227320

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!

0voto

mr.objectiveC Puntos590

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

Por favor, accede o regístrate para responder a esta pregunta.

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta