各要素のスクロール速度が異なります

Question

私は視差効果を作成しようとしています。私は助けが必要です。ページ上のさまざまな要素のスクロール速度を遅くするにはどうすればよいですか？私はまた、私はskrollrをダウンロードしたことを追加する必要がありますが、チュートリアルでも、スクロール速度に言及して何も見つかりませんでした。

ありがとう

Answer 1

サイトのスクロール速度に直接影響する方法はありません。それはブラウザとOS自体によって指示されます。このjsfiddleのようにコンテンツをスクロールして見せかける方法があります。

単純なパララックス効果を目指している場合は、w3schoolsにはgreat demo/tutorialがあります。

あなたが探しているのは、thisのような効果だと思います。 CSS変換でこれを行うことができます。

.parallax { 
 
    height: 500px; /* fallback for older browsers */ 
 
    height: 100vh; 
 
    overflow-x: hidden; 
 
    overflow-y: auto; 
 
    -webkit-perspective: 300px; 
 
    perspective: 300px; 
 
    } 
 

 
    .parallax__group { 
 
    position: relative; 
 
    height: 500px; /* fallback for older browsers */ 
 
    height: 100vh; 
 
    -webkit-transform-style: preserve-3d; 
 
    transform-style: preserve-3d; 
 
    } 
 

 
    .parallax__layer { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    } 
 
    
 
    .parallax__group { 
 
    -webkit-transition: -webkit-transform 0.5s; 
 
    transition: transform 0.5s; 
 
    } 
 

 
    .parallax__layer--fore { 
 
    -webkit-transform: translateZ(90px) scale(.7); 
 
    transform: translateZ(90px) scale(.7); 
 
    z-index: 1; 
 
    } 
 

 
    .parallax__layer--base { 
 
    -webkit-transform: translateZ(0); 
 
    transform: translateZ(0); 
 
    z-index: 4; 
 
    } 
 

 
    .parallax__layer--back { 
 
    -webkit-transform: translateZ(-300px) scale(2); 
 
    transform: translateZ(-300px) scale(2); 
 
    z-index: 3; 
 
    } 
 

 
    .parallax__layer--deep { 
 
    -webkit-transform: translateZ(-600px) scale(3); 
 
    transform: translateZ(-600px) scale(3); 
 
    z-index: 2;

<div class="parallax"> 
 
    <div id="group1" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">Base Layer</div> 
 
     </div> 
 
    </div> 
 
    <div id="group2" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">Base Layer</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">Background Layer</div> 
 
     </div> 
 
    </div> 
 
    <div id="group3" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--fore"> 
 
     <div class="title">Foreground Layer</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">Base Layer</div> 
 
     </div> 
 
    </div> 
 
    <div id="group4" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">Base Layer</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">Background Layer</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--deep"> 
 
     <div class="title">Deep Background Layer</div> 
 
     </div> 
 
    </div> 
 
    <div id="group5" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--fore"> 
 
     <div class="title">Foreground Layer</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">Base Layer</div> 
 
     </div> 
 
    </div> 
 
    <div id="group6" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--back"> 
 
     <div class="title">Background Layer</div> 
 
     </div> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">Base Layer</div> 
 
     </div> 
 
    </div> 
 
    <div id="group7" class="parallax__group"> 
 
     <div class="parallax__layer parallax__layer--base"> 
 
     <div class="title">Base Layer</div> 
 
     </div> 
 
    </div> 
 
    </div>