마우스를 아래로 스크롤할 때 컨텐츠가 슬라이드 위로 올라가는 Parallax 스크롤링 효과(javascript/jQuery)

일부 워드프레스 테마에서 마우스를 아래로 스크롤할 때 컨텐츠 영역이 슬라이드 위로 올라가는 효과를 구현하는 경우를 본 적이 있을 것입니다. 이런 효과를 Parallax 스크롤링이라고 합니다. 가령 Salient라는 인기 있는 워드프레스 테마의 데모 페이지에서 전면 페이지에 슬라이드가 풀 페이지로 나오고, 마우스를 아래로 스크롤하면 아래에 숨겨져 있던 컨텐츠 영역이 슬라이드 위로 올라갑니다.

마우스를 아래로 스크롤할 때 컨텐츠가 슬라이드 위로 올라가는 Parallax 스크롤링 효과(javascript/jQuery)

이런 효과가 의외로 인상적인 느낌을 주네요. Salient 데모 페이지는 슬라이드에 많은 효과가 들어 가서 다소 산만하지만 잘 사용한다면 좋은 효과를 낼 수 있을 것 같습니다.

그리고 워드프레스 테마 중 가장 많이 판매되고 있는 AVADA 테마에서도 비슷한 효과를 구현할 수 있습니다(Fusion Slider에서 설정 가능).

엘리멘터 페이지 빌더를 사용하는 경우에도 비슷한 효과를 구현할 수 있습니다.

이러한 효과는 jQuery/javascript를 사용하여 비슷하게 구현할 수 있습니다. 다음은 마우스를 스크롤할 때 아래에 있는 div 부분이 위에 있는 div를 덮으면서 위로 올라가는 효과를 내는 스크립트입니다. 즉, 위쪽 div 부분에 슬라이드를 배치하고 아래쪽 div 부분에 컨텐츠를 배치하면 Salient의 홈 슬라이더(Home Slider) 템플릿과 비슷한 효과를 낼 수 있습니다.

html 코드:

<div id="slider"></div>
<div id="overflow"></div>

css 코드:

#slider{
width: 100%;
background-color: red;
height: 100%;
position: fixed;
}
#overflow{
width: 100%;
height: 100%;
position: absolute;
top: 0;
}

javascript/jQuery 스크립트:

var ovf, slider;
$(function(){
ovf = this.getElementById("overflow");
slider = this.getElementById("slider");
winResize();
$(window).bind({resize: winResize, scroll: winScroll});
});
function winResize(){
ovf.style.top = slider.offsetHeight + "px";
}

function winScroll(){
var op = 1 - (window.pageYOffset / slider.offsetHeight);
slider.style.opacity = op;
}
// Source: stackoverflow.com

여기에서 위 스크립트의 데모를 살펴볼 수 있습니다.

참고:

• 엘리멘터 프로로 부드럽게 무한 회전하는 이미지 캐러셀 만들기
• 워드프레스 아바다 테마에서 이미지 캐러셀 (회전 슬라이드) 사용하는 방법
• 엘리멘터와 아바다 테마의 탭에 원하는 콘텐츠를 쉽게 삽입하는 방법