Freebies
Discover our latest free template, claim it today. Learn More

Animación de la cuadrícula a pantalla completa

Publicado por
CJ Hersh
Animación de la cuadrícula a pantalla completa

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


  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 desarrollada por CJhersh

. https://www.
cjhersh.com h



ttps://webflow.com/cjhersh
Autor original: Daniel Velásquez

Más detalles técnicos: Aquí  


OTHER GUIDES & LESSONS

Boost your webflow site further.