28 de agosto de 2017

Como implementar el efecto Parallax

Etiquetas: , , ,

Un frecuente recurso gráfico usado en el diseño de páginas web modernas, es el dar la ilusión de una especie de profundida en 3D entre imágenes. Este efecto se conoce como parallax, y veremos cómo incorporarlo usando CSS y Javascript en una página web.

El efecto parallax consiste en superponer una imagen sobre otra, de modo de dar la ilusión que una imagen se encuentra a más profundidad que la otra, en el instante en que el visitante hace un scroll en la página web.

En este artículo, implementaremos (programaremos) el efecto CSS parallax scroller. Aunque debemos aclarar que en estricto rigor, en internet encontramos el mismo nombre (parallax) para efecto, pero en dos modalidades distintas que desarrollaremos a continuación.

Efecto parallax usando sólo CSS

En este caso, el comportamiento esperado es que: A medida que se haga scroll, o desplazamiento vertical, en la página se vaya cambiando la imagen de fondo.

La implementación es simple, sólo usando dos (2) archivos más las corresponientes imágenes.

Código del archivo html index.html:

<html>
    <head>
        ...
        <link rel="stylesheet" href="style.css" media="screen" />
        ...
    </head>
    <body>
        ...
        <section id="bloque1">
            ...
        </section>
        <section id="bloque2">
            ...
        </section>
        ...
    </body>
</html>

Y el Código del archivo CSS será style.css:

* {
    margin: 0;
    padding: 0;
}
section {
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    margin: 0 auto;
    height: ...
    max-width: ...
    overflow: hidden;
    ...
    width: 100% !important;
}
#bloque1 {
    background-image: url('img/background1.jpg');
}
#bloque2 {
    background-image: url('img/background2.jpg');
}
...

Por lo tanto, con sólo ejecutar el código anterior en un navegador web (browser), produciremos una de las modalidades del efecto parallax.

Efecto parallax usando sólo CSS y Javascript

El código Javascript de este caso, hará uso de la librería jQuery.

El efecto parallax, de este caso, busca diferencias en la velocidad relativa de desplazamiento de una de las imágenes sobre la otra, controlada por el scroll en la página web.

Para conseguir este efecto necesitaremos recurrir a Javascript para generar la diferencia entre el movimiento relativo entre las imágenes.

Técnicamente, este efecto es conocido como Desplazamiento Asimétrico.

Acá usaremos tres (3) archivos:

  • Un archivo HTML simple, llamado index.html.
  • Un archivo CSS, denominado estilo.css.
  • Un archivo con el código Javascript de nombre parallax.js.

Hoja de estilos CSS estilo.css:

body {
    background-image: url('img/background.jpg');
    background-repeat: no-repeat;
    background-size: cover;/*la imagen abarque la pantalla*/
    background-attachment: fixed;
    background-position: 0 0;
    ...
}

Archivo html index.html:

<html>
    <head>
        ...
        <link rel="stylesheet" href="estilo.css" media="screen" />
        ...
    </head>
    <body>
        ...
        ...
        ...
        <script src="jquery.js"></script>
  <script src="parallax.js"></script>
    </body>
</html>

Y el archivo Javascript parallax.js que usará la librería jQuery:

$(document).on('ready', iniciar);
//
function iniciar() {
    $(window).scroll(mover);
}
// efectuar el movimiento:
function mover() {
    // capturando el valor del movimiento:
    //
    var barra = $(window).scrollTop();
    var posicion = barra * 0.20;
    //
    // cambiar los estilos:
    $('body').css({
        'background-position': '0 -' + posicion + 'px'
        });
}

Se incluyen explicaciones en el propio código Javascript para mejorar la claridad de la programación.

Conclusión

Hemos visto, al menos en el código de la programación, de dos modalidades del efecto parallax, que aportarán nuevas opciones para enriquecer nuestros diseños web.

Se recomienda al lector de este artículo hacer algunos ejemplo con el código presentado, para así apreciar el poder que este efecto puede aportarnos. Una de las formas simples de hacerlo es usando la utilería llamada Codepen disponible gratis en la web u otras similares.

Otros enlaces relacionados

loading..