Crear efecto de desplazamiento para una imagen de fondo

Presentamos cómo crear un efecto de desplazamiento para una imagen de fondo, con lo que se podrán ver interacciones y animaciones en la interfaz de usuario.

Estos pasos básicos ayudarán a mejorar la experiencia del usuario y darles mayor interacción a los visitantes de páginas web. El proceso no es difícil, se puede realizar mediante un marcado y códigos relevantes.

Marcado y estilo de la cuadrícula

El marcado es una cuadr√≠cula de elementos con im√°genes de fondo. Es c√≥modo utilizar una estructura porque me permite controlar los tama√Īos de las im√°genes estableciendo la posici√≥n de la cuadr√≠cula.

<div class=”grid”>

    <div class=”grid__item pos-1″>

        <div class=”grid__item-img” style=”background-image:url(img/1.jpg);”></div>

    </div>

    <div class=”grid__item pos-2″>

        <div class=”grid__item-img” style=”background-image:url(img/2.jpg);”></div>

    </div>

    <div class=”grid__item pos-3″>

        <div class=”grid__item-img” style=”background-image:url(img/3.jpg);”></div>

    </div>

    …

</div>

Con esto, la cuadrícula se estirará para ser más grande que la familia de elementos porque queremos moverlos y crear la ilusión de un plano infinito de imágenes.

.grid {

                pointer-events: none;

                position: absolute;

                width: 110%;

                height: 110%;

                top: -5%;

                left: -5%;

                display: grid;

                grid-template-columns: repeat(50,2%);

                grid-template-rows: repeat(50,2%);

}

.grid__item {

                position: relative;

}

.grid__item-img {

                position: relative;

                width: 100%;

                height: 100%;

                background-size: cover;

                background-position: 50% 50%;

}

La cuadr√≠cula est√° dividida en 50 celdas para filas y columnas. Con esta densidad de dise√Īo, la posici√≥n de los elementos de la imagen se puede establecer con precisi√≥n.

/* Shorthand grid-area: grid-row-start / grid-column-start / grid-row-end / grid-column-end */

.pos-1 {

                grid-area: 10 / 1 / 26 / 7;

}

.pos-2 {

                grid-area: 1 / 18 / 9 / 27;

}

.pos-3 {

                grid-area: 1 / 36 / 14 / 42;

}

Hay que tener en cuenta que se utilizó la estructura de doble división para mover el elemento interno con la imagen de fondo crear el efecto de movimiento. Para este caso, hay que definir algunos estilos adicionales:

/* If we want to move the inner image */

.grid–img .grid__item {

                overflow: hidden;

                display: flex;

                align-items: center;

                justify-content: center;

                will-change: transform;

}

.grid–img .grid__item-img {

                flex: none;

                width: calc(100% + 100px);

                height: calc(100% + 100px);

                will-change: transform;

}

JavaScript

Ahora veremos lo que involucra a JavaScript. Se puede usar GSAP de GreenSock. Primero hay que crear una clase Grid para representar la cuadrícula de imágenes:

export default class Grid {

    constructor(el) {

        this.DOM = {el: el};

        this.gridItems = [];

        this.items = […this.DOM.el.querySelectorAll(‘.grid__item’)];

        this.items.forEach(item => this.gridItems.push(new GridItem(item)));

        this.showItems();

    }

    …

}

const grid = new Grid(document.querySelector(‘.grid’));

Se supone que habría una animación inicial donde los elementos de la cuadrícula escalen y se desvanezcan, se puede agregar un método a la clase para eso. En este caso queremos que los elementos comiencen a rotar en diferentes momentos y para eso usamos la opción de escalonamiento GSAP. Así los elementos comenzarán a animarse desde el centro de la cuadrícula:

showItems() {

    gsap.timeline()

    .set(this.items, {scale: 0.7, opacity: 0}, 0)

    .to(this.items, {

        duration: 2,

        ease: ‘Expo.easeOut’,

        scale: 1,

        stagger: {amount: 0.6, grid: ‘auto’, from: ‘center’}

    }, 0)

    .to(this.items, {

        duration: 3,

        ease: ‘Power1.easeOut’,

        opacity: 0.4,

        stagger: {amount: 0.6, grid: ‘auto’, from: ‘center’}

    }, 0);

}

Ahora, haremos que los elementos se muevan cuando responda el cursor. Cada elemento de la cuadrícula estará representado por una clase GridItem:

class GridItem {

    constructor(el) {

        this.DOM = {el: el};

        this.move();

    }

    …

}

La posición los elementos en ambos ejes debe mapearse con la posición del mouse, por lo que el mouse puede moverse desde la posición 0 tan ancho o alto como la ventana. En cuanto al elemento, se moverá en un rango de inicio a fin que especificaremos. Asignaremos valores aleatorios para el valor inicial y final para que los elementos se muevan de manera diferente.

Agregaremos el método move a la clase GridItem:

move() {

    // amount to move in each axis

    let translationVals = {tx: 0, ty: 0};

    // get random start and end movement boundaries

    const xstart = getRandomNumber(15,60);

    const ystart = getRandomNumber(15,60);

    // infinite loop

    const render = () => {

        // Calculate the amount to move.

        // Using linear interpolation to smooth things out.

        // Translation values will be in the range of [-start, start] for a cursor movement from 0 to the window’s width/height

        translationVals.tx = lerp(translationVals.tx, map(mousepos.x, 0, winsize.width, -xstart, xstart), 0.07);

        translationVals.ty = lerp(translationVals.ty, map(mousepos.y, 0, winsize.height, -ystart, ystart), 0.07);

        gsap.set(this.DOM.el, {x: translationVals.tx, y: translationVals.ty}); 

        requestAnimationFrame(render);

    }

    requestAnimationFrame(render);

}

Leíste: Cómo crear efecto de desplazamiento para una imagen de fondo, te recomendamos: Problemas de WordPress: error HTTP al cargar imágenes

Te invitamos a que nos sigas en nuestras redes sociales: Facebook, Twitter, Instagram y Youtube con el perfil: @tortugacode