スクロールでCSS/JSアニメーションをスクロールする

このアニメーションの種類をHTML、CSS、JavaScript（jQueryも必要に応じて）で再現しようとしています。 https://www.youtube.com/watch?v=qTMjNVTK_DY スクロールでCSS/JSアニメーションをスクロールする

基本的に、コンテンツと透明領域を持つ複数のsvgまたはpngレイヤーがあります。下にスクロールすると、プロパティをアニメーション化することによって、レイヤーがより近く見えます。レイヤー間には名前があります。ここで

は、私はHTMLは私が実際にスクロールウィンドウずに、スクロールにこれらの要素をアニメーション化するにはどうすればよい

<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>

に見えるように想像して何ですか？私は絶対にjavascriptが必要ですか？関連性のある図書館はありますか？

ありがとうございます。

出典

2017-10-22 Marine Le Borgne

面白そうだね、確か[GreenSock]（https://greensock.com/） – Flying

@Flyingを見てみましょうする価値があるかもしれません。ありがとうございました！ –

私はできるだけ簡単な例を作ろうとしましたが、助けてください！

<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>

出典

2017-10-22 10:12:03

ありがとう、それは私に良い理解を与えている！あなたのデモでは、スクロールアップすると、正方形が小さくなります。最小サイズをブロックする方法はありますか？スクロールを特定のポイントからブロックすることはできますか？ –

はい、JavaScriptを使用すると、最大値と最小値で簡単にz値を制限できます。私はあなたにおそらくstackoverflowの範囲外の方法である答えを与えたと思うが、私はあなたが視覚的な部分でそれを使って作業を始めることができることを望んだが、それは決して終わらない。あなたがJavascriptの部分で助けを必要とする場合、それはより多くの作業を必要とするでしょう、専門家の助けを考慮してください。 –

はい、私はそれを知っています、ありがとう！私はjavascriptの部分だけを管理します、それは私が本当に把握していなかった概念です;）あなたの助けにもう一度感謝！ –

スクロールでCSS/JSアニメーションをスクロールする

答えて

関連する問題