위치는 수평으로 만 고정되지만 시차 효과에는 javascript를 사용하는 수직 스크롤을 허용합니다.

Question

왼쪽 및 오른쪽으로 움직이는 컨테이너에 고정 된 배경 이미지를 첨부하여 달성하려는 시차/스 와이프 효과가 있습니다. 이미지를 페이지와 수직으로 스크롤하십시오. 수직 스크롤을 허용하면서이 시각 효과를 어떻게 얻을 수 있습니까?

.project-ten__container { 
position: relative; 
display: inline-block; 
width: 20vw; 
height: 100vh; 
vertical-align: top; 
background-attachment: fixed; 
background-position: center; 
background-repeat: no-repeat; 
overflow: hidden; 
} 

하면 시차/슬쩍 효과를 얻을 수있는 jFiddle의 요소 마우스를 움직일 수 있는지 확인하고 문제 그러나이 https://jsfiddle.net/pd37cmey/2/

Answer 1

.project-ten__container { 
    position: relative; 
    left: -10%; 
    display: inline-block; 
    width: 20vw; 
    height: 100vh; 
    vertical-align: top; 
    background-attachment: fixed; 
    background-position: center; 
    background-repeat: no-repeat; 
    -webkit-background-size: 30%; 
    -moz-background-size: 30%; 
    background-size: 30%; 
    overflow: hidden; 
    -webkit-transition: opacity 0.1s ease; 
    transition: opacity 0.1s ease; 
    } 

https://jsfiddle.net/manishghec/0c6q05yu/3/

를 확인하기 위해 jfiddle에서 아래로 스크롤 1 시간 쯤에 나를 데려 갔다. :)

감사합니다.