CSS/JS Animation auf Scroll mit Scroll gesperrt

Ich versuche, Art dieser Animation mit HTML, CSS und Javascript zu reproduzieren (jQuery auch, wenn nötig). https://www.youtube.com/watch?v=qTMjNVTK_DY CSS/JS Animation auf Scroll mit Scroll gesperrt

Grundsätzlich gibt es mehrere SVG- oder PNG-Layer mit Inhalt und transparentem Bereich. Wenn Sie nach unten scrollen, sehen die Ebenen näher aus, indem Sie die Eigenschaft transform:translateZ rotate; animieren. Zwischen den Schichten gibt es Namen.

Hier ist, was ich mir vorstellen, die HTML aussehen wie

<body> 
    <div class="layer"></div> 
    <div class="name"></div> 
    <div class="name"></div> 
    <div class="layer"></div> 
    <div class="name"></div> 
    <div class="name"></div> 
    <div class="layer"></div> 
</body>

Wie kann ich diese Elemente auf Scroll animieren, ohne das Fenster tatsächlich scrollen? Brauche ich unbedingt Javascript? Gibt es eine Bibliothek, die relevant wäre?

Vielen Dank.

Quelle

2017-10-22 Marine Le Borgne

Es kann sich lohnen, einen Blick auf [GreenSock] (https://greensock.com/) – Flying

@Flying in der Tat zu nehmen, die sieht interessant aus. Danke! –

Ich habe versucht, das möglichst einfache Beispiel zu machen, ich hoffe es hilft!

<style> 
#wrapper { 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    perspective: 500px; 
} 
#content { 
    transform-style: preserve-3d; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
} 
#layer1, 
#layer2, 
#layer3, 
#layer4 { 
    width: 500px; 
    height: 500px; 
    border: 30px solid red; 
    position: absolute; 
    left: 50%; 
    top: 50%; 
} 
#layer1 { 
    transform: translate3d(-50%, -50%, 0); 
} 
#layer2 { 
    border-color: green; 
    transform: translate3d(-50%, -50%, -300px); 
} 
#layer3 { 
    border-color: blue; 
    transform: translate3d(-50%, -50%, -600px); 
} 
#layer4 { 
    border-color: black; 
    transform: translate3d(-50%, -50%, -900px); 
} 
</style> 

<div id="wrapper"> 
    <div id="content"> 
     <div id="layer1"></div> 
     <div id="layer2"></div> 
     <div id="layer3"></div> 
     <div id="layer4"></div> 
    </div> 
</div> 

<script> 

let z = 0; 

window.addEventListener("wheel", function (event) { 
    z += event.deltaY; 
    content.style.transform = "translate3d(0, 0, " + z + "px)"; 
    event.preventDefault(); 
}); 

</script>

Quelle

2017-10-22 10:12:03

Danke, es gibt mir ein besseres Verständnis! In Ihrer Demo werden die Quadrate beim Scrollen immer kleiner. Gibt es eine Möglichkeit, ihre Mindestgröße zu blockieren? oder um den Bildlauf von einem bestimmten Punkt aus zu blockieren? –

Ja, Sie können die z-Werte mit Javascript auf ein Maximum und ein Minimum beschränken. Bitte denken Sie daran, dass ich Ihnen eine Antwort gegeben habe, die wahrscheinlich weit außerhalb des Bereichs von stackoverflow liegt, aber ich habe in der Hoffnung, dass Sie damit anfangen können, im visuellen Teil damit zu arbeiten, aber es ist noch lange nicht fertig. Es wird viel mehr Arbeit benötigen, wenn Sie Hilfe mit dem Javascript-Teil benötigen, bitte berücksichtigen Sie professionelle Hilfe. –

Ja, ich weiß das, vielen Dank! Ich werde den Javascript-Teil gut verwalten, es ist das Konzept, das ich nicht wirklich begriffen habe;) Nochmals vielen Dank für Ihre Hilfe! –

CSS/JS Animation auf Scroll mit Scroll gesperrt

Antwort

Verwandte Themen