마우스를 아래로 스크롤 시 컨텐츠가 위로 올라가는 효과

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

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

마우스를 아래로 스크롤 시 컨텐츠가 위로 올라가는 효과

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

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

Avada Demo - 워드프레스 테마 아바다

이러한 효과는 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

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

 



기부를 통해 이 블로그를 후원하실 수 있습니다.
워드프레스 설치/제작/문제해결이 필요한 경우 서비스(유료)를 요청해주세요.