스크롤하는 동안 가로줄 뒤에 시차를 두는 방법

Question

나는이 효과를 두 번이나 보았지만 그 이름을 찾을 수는 없다. 이 효과의 기본 이론은 무엇입니까? 그것은 순수 CSS를 사용합니까, 아니면 주로 JS에 의해 주도됩니까?

는

설명 : 수직 아래쪽 페이지는 사용자가 스크롤

는 단색 배경은 배경 이미지로, 단품 "curtain reveal"방법을 제공한다. 그러나 페이지의 하단에 도달하기보다는 이전의 "단색 배경"과 동일한 비율로 움직이는 다른 가로 막대가 아래쪽의 배경 이미지를 덮습니다. 사용자가 스크롤을 계속하면 단색 배경이 다시 배경 이미지로 바뀌지 만 이번에는 배경이 다른 이미지로 변경되었습니다. 그 효과는 마술사가 물건 앞에서 손을 흔드는 것과 비슷하며 물건은 실질적으로 어떤면에서 변화합니다.

또 다른 방법은 단색 배경에 "간격"이 있지만 다른 배경 이미지를 볼 수 있다는 것입니다. 나중에 다음 램프 아래로 스크롤하여 풀의 사진을 발견 http://www.astoriacassis.com/
(은 상단에 이미지를 회전하는 스타일은 "갤러리"를 무시하고 :. 여기

는 (검색의 좋은 비트 후) 내가 찾은 예입니다)

처음에 나는 그것이 parallax effect과 비슷한 것일 수 있다고 생각했지만 실제로는 상당히 다른 것처럼 보입니다.

나는이 효과를 전에 보았고 그것을 복제하는 방법을 알고 싶습니다.

Answer 1

divs의 배경 첨부 속성을 사용하여 이미지가 변경되는 것처럼 보이는 효과를 만들 수 있습니다. 실제로는 화면 위로 스크롤하는 두 개의 divs입니다. http://codepen.io/anon/pen/sCuvI/

중요한 부분 : 데모이 CodePen 밖으로

는

확인

HTML

<div class="content"> 
    Lorem Ipsum 
</div> 
<div id="s1" class="scroll"></div> 
<div class="content"> 
    Lorem Ipsum 
</div> 
<div id="s2" class="scroll"></div> 

CSS는

.scroll 
{ 
    width: auto; 
    height: 200px; 
    /*The important part*/ 
    background-attachment: fixed; 
    background: no-repeat center center fixed; 
    /*Stretch the background*/ 
    -webkit-background-size: cover; 
    -moz-background-size: cover; 
    -ms-background-size: cover; 
    -o-background-size: cover; 
    background-size: cover; 
}