Guide / Article

Animation de la grille au plein écran

CJ Hersh
October 30, 2020
Animation de la grille au plein écran

Création d'animations grille à plein écran avec Three.js dans Webflow

Apprenez à intégrer une animation 3.js époustouflante dans votre projet Webflow.


Dans un prochain tutoriel, j'aborderai plus en détail les CSS et Javascript personnalisés - plus précisément, comment vous pouvez intégrer et personnaliser davantage les interactions natives de Webflow. Assurez-vous que les paramètres CSS de chaque élément correspondent à ceux trouvés dans le projet de démonstration.

1.0 Créer une mise en page dans Webflow

  • "Principal" - Ce sera votre emballage de haut niveau. Dans le menu des paramètres de l'élément, assurez-vous que vous changez la balise de la valeur par défaut " div " à " main ".
  • "app" - C'est ici que le canevas de Three.js sera rendu après la publication du projet.
  • "grid" - La grille contiendra vos éléments de grille. Si nous agrandissons la div "grille", vous verrez trois éléments de la grille. Chaque élément de la grille contient ce qui suit :
  • 2 images miniatures intégrées (petites et grandes)

Afin de contourner les problèmes de CrossOrigin, il est impératif que le code d'incorporation de votre image inclue l'attribut crossorigin="anonymous" ainsi qu'un " ?" après l'URL de l'image.

  • La légende des éléments de la grille
  • "fullview" - Ceci contient le contenu pour l'état plein écran de chaque élément (titre, lien), ainsi que le bouton de déclenchement pour revenir à la vignette.

2.0 Ajouter un CSS
personnalisé


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. Ajouter des scripts et du code Javascript personnalisés
< 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. Publier



Ce guide a été élaboré par CJhersh

. https://www.cjhersh.com




https://webflow.com/cjhersh
Auteur original : Daniel Velasquez

Plus de détails techniques : Ici  


CJ Hersh
October 30, 2020

Recieve webflow resources directly to your mailbox.

Sign up to get weekly insights & inspiration in your inbox.

OTHER GUIDES & LESSONS

Boost your webflow site further.