Leitfaden / Artikel

Raster zur Vollbildanimation

CJ Hersh
Oktober 30, 2020
Raster zur Vollbildanimation

Erstellen von Grid-to-Fullscreen-Animationen mit Three.js in Webflow

Lernen Sie, wie Sie eine atemberaubende Three.js-Animation in Ihr Webflow-Projekt integrieren können.


In einem zukünftigen Tutorial werde ich mehr über das benutzerdefinierte CSS und Javascript erfahren - insbesondere, wie Sie die nativen Interaktionen von Webflow weiter integrieren und anpassen können. Vergewissern Sie sich, dass die CSS-Einstellungen für jedes Element mit denen des Demoprojekts übereinstimmen.

1.0 Layout im Webflow erstellen

  • "Main" - Das wird Ihr Top-Level-Wrapper sein. Stellen Sie sicher, dass Sie im Menü der Elementeinstellungen das Tag von der Standardeinstellung 'div' auf 'main' ändern.
  • "app" - Hier wird die Leinwand von Three.js nach der Veröffentlichung des Projekts gerendert.
  • "Gitter" - Das Gitter wird Ihre Gitterobjekte aufnehmen. Wenn wir das "Grid"-Div erweitern, sehen Sie drei Grid-Elemente. Jedes Gitterelement enthält Folgendes:
  • 2 eingebettete Thumbnail-Bilder (klein und groß)

Um CrossOrigin-Probleme zu umgehen, ist es zwingend erforderlich, dass Ihr Bildeinbett-Code das Attribut crossorigin="anonymous" sowie ein "?" hinter der Bild-URL enthält.

  • Die Überschrift der Gitterelemente
  • "Vollansicht" - Hier wird der Inhalt für den Vollbildstatus jedes Elements (Titel, Link) sowie der Button-Trigger für den Übergang zurück zur Miniaturansicht angezeigt.

2.0 Benutzerdefiniertes CSS
hinzufügen


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. Hinzufügen von benutzerdefinierten Javascript-Skripten und Code
< 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. Veröffentlichen Sie



Diese Anleitung wurde von CJhersh

entwickelt. https://www.
cjhersh.com h



ttps://webflow.com/cjhersh
Originalautor: Daniel Velasquez

Weitere technische Details: Hier  


CJ Hersh
Oktober 30, 2020

Empfangen Sie Webflow-Ressourcen direkt in Ihre Mailbox.

Melden Sie sich an, um wöchentliche Einblicke und Inspirationen in Ihrem Posteingang zu erhalten.

ANDERE ANLEITUNGEN &AMP; LEKTIONEN

Steigern Sie Ihre Webflow-Site weiter.