각 요소의 스크롤 속도가 다릅니다.

Question

시차 효과를 만들려고하는데 도움이 필요합니다. 페이지의 다른 요소에 대한 스크롤 속도를 어떻게 낮출 수 있습니까? 또한 skrollr를 다운로드했다고 추가해야하지만 자습서에서도 스크롤 속도를 언급하는 것을 찾지 못했습니다.

고맙습니다.

Answer 1

사이트의 스크롤 속도에 직접적인 영향을 줄 수있는 방법은 없습니다. 브라우저와 OS 자체가 지시합니다. 이 jsfiddle에 표시된 내용을 스크롤하여 가짜로 만드는 방법이 있습니다.

간단한 paralaxx 효과를 목표로하는 경우 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>