Volver a los artículos
Animación de la cuadrícula a pantalla completa
Tutoriales

Animación de la cuadrícula a pantalla completa

Aprenda a integrar una animación alucinante de Three.js en su proyecto de Webflow. Guía de CJHersh

20 de junio de 2019

Creación de Animaciones de Cuadrícula a Pantalla Completa con Three.js en Webflow

Aprenda a integrar una animación alucinante de Three.js en su proyecto de Webflow.


En un futuro tutorial, entraré en más detalles sobre el CSS y Javascript personalizados - específicamente, cómo puede integrar y personalizar aún más con las interacciones nativas de Webflow. Asegúrate de que la configuración de CSS para cada elemento coincida con la del proyecto de demostración.

1.0 Crear un diseño en el flujo de Web

  • "Principal" - Este será su envoltorio de nivel superior. En el menú de configuración de elementos, asegúrese de cambiar la etiqueta del 'div' predeterminado a 'main'.
  • "app" - Aquí es donde el lienzo Three.js se renderizará después de publicar el proyecto.
  • "Grilla" - La grilla contendrá sus ítems de grilla. Si expandimos el div div de "cuadrícula", verás tres ítems de cuadrícula. Cada elemento de la cuadrícula contiene lo siguiente:
  • 2 imágenes en miniatura incrustadas (pequeñas y grandes)

Para evitar problemas de CrossOrigin, es imperativo que el código de incrustación de la imagen incluya el atributo crossorigin="anonymous" así como un "?" después de la URL de la imagen.

  • La leyenda de los ítems de la cuadrícula
  • "vista completa" - Esto contiene el contenido para el estado de pantalla completa de cada elemento (título, enlace), así como el disparador de botones para la transición a la miniatura.

2.0 Añadir CSS
personalizado


body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
overflow-y: overlay;
}
#app {
pointer-events: none;
}
.fullview {
pointer-events: none;
 -webkit-overflow-scrolling: touch;
}
.fullview__item--current {
pointer-events: auto;
}
.fullview__item-title {
 opacity: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.link {
 opacity: 0;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fullview__close {
pointer-events: none;
opacity: 0;
 -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.fullview__item--current ~ .fullview__close {
pointer-events: auto;
}
.fullview__close:focus {
outline: none;
}
.grid__item-img {
max-width: 100%;
display: block;
cursor: pointer;
}
.grid__item-img--large {
pointer-events: none;
position: fixed;
opacity: 0;
}

  1. Añade scripts y código Javascript personalizados
< script src = "https://assets.website-files.com/5ce62dab952a22dd060278e3/5ce62dbe5375ca4e2e927f78_three-bundle.txt" > < /script>
< script src = "https://assets.website-files.com/5ce62dab952a22dd060278e3/5ce62e295375ca5dfd927fc8_demo-core.txt" > < /script>
< script src = "https://assets.website-files.com/5ce62dab952a22dd060278e3/5ce62e29952a223c080279af_demo.txt" > < /script> < script >

let currentIndex;
const itemsWrapper = document.getElementById("itemsWrapper");
const thumbs = [...itemsWrapper.querySelectorAll("img.grid__item-img:not(.grid__item-img--large)")];
const fullviewItems = [...document.querySelectorAll(".fullview__item")];
const backToGridCtrl = document.querySelector(".fullview__close");
const transitionEffectDuration = 1.2;
const transitionEffect = createDemoEffect({
activation: {
type: "mouse"
},
timing: {
duration: transitionEffectDuration
},
transformation: {
type: "simplex",
props: {
seed: "8000",
frequencyX: 0.2,
frequencyY: 0.2,
amplitudeX: 0.3,
amplitudeY: 0.3
}
},
onToFullscreenStart: ({
index
}) => {
currentIndex = index;
thumbs[currentIndex].style.opacity = 0;
transitionEffect.uniforms.uSeed.value = index * 10;
toggleFullview();
},
onToGridFinish: ({
index,
lastIndex
}) => {
thumbs[lastIndex].style.opacity = 1;
fullviewItems[currentIndex].classList.remove("fullview__item--current");
},
seed: 800,
easings: {
toFullscreen: Power1.easeOut,
toGrid: Power1.easeInOut
}
});
transitionEffect.init();
const toggleFullview = () => {
if (transitionEffect.isFullscreen) {
TweenLite.to(fullviewItems[currentIndex].querySelector(".fullview__item-title"), 0.2, {
ease: Quad.easeOut,
opacity: 0,
x: "5%"
});
TweenLite.to(fullviewItems[currentIndex].querySelector(".link"), 0.2, {
ease: Quad.easeOut,
opacity: 0,
x: "5%"
});
TweenLite.to(backToGridCtrl, 0.2, {
ease: Quad.easeOut,
opacity: 0,
scale: 0
});
transitionEffect.toGrid();
} else {
fullviewItems[currentIndex].classList.add("fullview__item--current");
TweenLite.to(fullviewItems[currentIndex].querySelector(".fullview__item-title"), 1, {
ease: Expo.easeOut,
startAt: {
x: "5%"
},
opacity: 1,
x: "0%",
delay: transitionEffectDuration * 0.6
});
TweenLite.to(fullviewItems[currentIndex].querySelector(".link"), 1, {
ease: Expo.easeOut,
startAt: {
x: "5%"
},
opacity: 1,
x: "0%",
delay: transitionEffectDuration * 0.9
});
TweenLite.to(backToGridCtrl, 1, {
ease: Expo.easeOut,
startAt: {
scale: 0
},
opacity: 1,
scale: 1,
delay: transitionEffectDuration * 0.6
});
}
};
backToGridCtrl.addEventListener("click", () => {
if (transitionEffect.isAnimating) {
return;
}
toggleFullview();
});
imagesLoaded(document.querySelectorAll(".grid__item-img"), instance => {
document.body.classList.remove("loading");
let images = [];
for (var i = 0, imageSet = {}; i < instance.elements.length; i++) {
let image = {
element: instance.elements[i],
image: instance.images[i].isLoaded ? instance.images[i].img : null
};
if (i % 2 === 0) {
imageSet = {};
imageSet.small = image;
}
if (i % 2 === 1) {
imageSet.large = image;
images.push(imageSet);
}
}
transitionEffect.createTextures(images);
}); < /script>


  1. Publicar


Esta guía ha sido elaborada por CJhersh.

https://www.cjhersh.com
https://webflow.com/cjhersh



Autor original: Daniel Velásquez

Más detalles técnicos: Aquí  

SOBRE EL AUTOR

¿Disfrutó de esta lectura?

Manténgase al día con las últimas noticias, estrategias e ideas sobre el negocio del vídeo enviadas directamente a su bandeja de entrada.

¡Gracias! Su presentación ha sido recibida!
¡Uy! Algo salió mal al enviar el formulario.

Recibe los recursos de la web directamente en tu buzón.

Inscríbete para recibir información semanal e inspiración en tu bandeja de entrada.

OTRAS GUÍAS Y LECCIONES

Impulsa más tu sitio web de flujo de datos.