CSS3のperspective
、transformZ
プロパティを使用し、パララックス・スクロールを実装したのですが、
スマホで見ると慣性スクロールが効かず、ちょっとずつしかスクロールしてくれません。
そこで、いくつかブログを読み、-webkit-overflow-scrolling: touch;
を親要素に設定したところ、慣性スクロールは効いたのですが、今度はパララックス効果が効かなくなってしまいました。
css3dを用いたパララックススクロールと慣性スクロール共存することは難しいのでしょうか?
何かご指摘いただけたら幸いです。 よろしくお願いします! m__m
html
1<div class="wrapper"> 2 <div class="pararax_wrap"> 3 <div class="para_base"> 4 要素1 5 </div> 6 <div class="para_deep"> 7 要素2 8 </div> 9 </div> 10</div>
css
1.wrapper{ 2 -webkit-overflow-scrolling: touch; 3} 4.pararax_wrap{ 5 position: relative; 6 width: 100vw; 7 height:100vh; 8 overflow-x:hidden; 9 overflow-y: scroll; 10 perspective:300px; 11} 12.para_base{ 13 position: relative; 14 transform:translateZ(0); 15 z-index:2; 16} 17 18.para_deep{ 19 position: relative; 20 transform: translateZ-600px) scale(3); 21 z-index: 1; 22}
あなたの回答
tips
プレビュー