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
