() translation by (you can also view the original English article)
패럴랙스 스크롤링은 흥미로운 기술입니다. 스크롤하는 지점에서 표면에 있는 콘텐츠 보다 배경 이미지가 느리게 변하면서 3D와 같은 착시를 만들지요. 저의 개인 웹사이트를 다시 디자인하려고 기획할 때, 첫번째 목표는 최대한 멋진 웹사이트를 제작하기 위해 가장 짧고 간단한 코드를 작성하는 것이었습니다! 어떻게 했는지 보여드리겠습니다.
여러분이 테마용 기본 템플릿으로 시작하는 빠른 방식을 찾는다면 단순한 패럴랙스 테마를 찾는 게 좋은 선택이 될 수 있습니다. 아니면 단일 페이지 템플릿을 찾아 보세요. 또는 Envato Studio에서 여러분을 위해 패럴랙스 스크롤링 사이트를 제작해 줄 서비스 업체를 찾을 수도 있습니다.
저는 이 튜토리얼에서 여러분이 보지 못한 가장 단순한 패럴랙스 스크롤링 구축 방법을 알려 드리겠습니다. 자 살펴 봅시다!
1단계: 마크업
이 방법은 배경 이미지 속도를 제어하는 것을 중점으로 다룹니다. 그러니 HTML 마크업으로 시작해 필수 속성인 "data-type"과 "data-speed"가 있는 section 2개를 만드는 것부터 해 봅시다. 걱정하지 마세요. 이에 관해서 잠시 후에 설명해 드립니다.
1 |
<section id="home" data-type="background" data-speed="10"> |
2 |
</section>
|
3 |
|
4 |
<section id="about" data-type="background" data-speed="10"> |
5 |
</section>
|
저는 <section> 태그에 data-type과 data-speed 속성을 사용하겠습니다. 그 태그는 HTML5에서 도입되었습니다. 이렇게 하면 HTML 마크업이 더 깔끔해 지고 읽기가 쉬워집니다.
커스텀 데이터 속성(Custom Data Attributes) 명세에 따르면, data-로 시작하는 모든 속성은 사적인 데이터용 스토리지 영역으로 취급됩니다. 더불어 이는 레이어나 외관에 영향을 미치지도 않습니다.
배경 이미지의 속도를 제어하는 작업이 필요하므로 data-type="background"와 data-speed="10"를 필수 매개변수를 구체화 하는 주된 속성으로서 사용할 것입니다.
여러분이 무슨 생각을 하고 있는지 압니다. IE를 걱정하고 있겠죠. 절대 걱정하지 마세요. 그에 대한 해결책을 갖고 있으니까요! 잠시 후에 이에 대해 얘기하겠습니다.
다음에는 각 <section> 의 <article> 태그 안에 콘텐츠를 넣어 봅시다.
1 |
<section id="home" data-type="background" data-speed="10" class="pages"> |
2 |
<article>I am absolute positioned</article> |
3 |
</section>
|
4 |
|
5 |
<section id="about" data-type="background" data-speed="10" class="pages"> |
6 |
<article>Simple Parallax Scroll</article> |
7 |
</section>
|
여기에서 우리는 <section> 배경을 가령 <article> 같은 콘텐츠보다 느리게 스크롤시키려고 합니다. 이 방식이 패럴랙스 착시 효과를 내게 해줍니다. jQuery 마술을 부리기에 앞서 CSS에서 <section>마다 배경 이미지를 넣어 줍시다.
1 |
|
2 |
#home { |
3 |
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
4 |
}
|
5 |
|
6 |
#about { |
7 |
background: url(about-bg.jpg) 50% 0 no-repeat min-height: 1000px; |
8 |
}
|
두 개의 section에 배경 이미지를 넣어주면 아래와 같이 보입니다.
페이지를 더 좋게 보이도록 꾸며주는 CSS를 좀 더 추가해 보죠!
1 |
#home { |
2 |
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
3 |
height: 1000px; |
4 |
margin: 0 auto; |
5 |
width: 100%; |
6 |
max-width: 1920px; |
7 |
position: relative; |
8 |
}
|
9 |
|
10 |
#home article { |
11 |
height: 458px; |
12 |
position: absolute; |
13 |
text-align: center; |
14 |
top: 150px; |
15 |
width: 100%; |
16 |
}
|
17 |
|
18 |
#about { |
19 |
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px; |
20 |
height: 1000px; |
21 |
margin: 0 auto; |
22 |
width: 100%; |
23 |
max-width: 1920px; |
24 |
position: relative; |
25 |
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8); |
26 |
box-shadow: 0 0 50px rgba(0,0,0,0.8); |
27 |
}
|
28 |
|
29 |
#about article { |
30 |
height: 458px; |
31 |
position: absolute; |
32 |
text-align: center; |
33 |
top: 150px; |
34 |
width: 100%; |
35 |
}
|
이제는 아래처럼 보입니다.
2단계: 마법을 부리는 코드
예, 맞습니다. 여기가 마법이 시작되는 지점입니다! jQuery를 이용해 페이지가 로딩되고 코드를 작업할 준비가 되었는지 확인하는 기본 document.ready() 메서드로 시작하겠습니다.
1 |
$(document).ready(function(){
|
2 |
|
3 |
|
4 |
}); |
이 방법은 두 개의 section에 있는 배경 이미지의 속도를 제어하는 것을 중점으로 다룹니다.
여러분, 여기서 집중하세요. 아래에서 처음 일어나는 것은 우리가 페이지에서 각각의 <section>을 반복시킨다는 겁니다. 거기에는 data-type="background" 속성이 있죠.
1 |
$(document).ready(function(){
|
2 |
|
3 |
$('section[data-type="background"]').each(function(){
|
4 |
var $bgobj = $(this); // assigning the object |
5 |
}); |
6 |
|
7 |
}); |
.each() 안에 .scroll() 함수를 추가하세요. 이렇게 하면 사용자가 스크롤을 시작할 시점에 함수를 불러옵니다.
1 |
$(window).scroll(function() {
|
2 |
|
3 |
}); |
사용자가 스크롤하는 분량을 정해야 하고, 그 정한 값을 마크업 부분에서 언급했던 data-speed로 나눕니다.
1 |
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
|
$window.scrollTop(): 화면의 맨 위로부터 현재 스크롤 위치 값을 가져옵니다. 이는 기본적으로 사용자가 스크롤을 얼마나 했는가에 의해 결정되지요. $bgobj.data('speed')는 마크업에서 작성했던 data-speed를 의미합니다. 그리고 yPos는 스크롤에 적용해야 할 최종 값이 됩니다. 그런데, 그 값은 음수가 될 겁니다. 왜냐하면 배경을 사용자의 스크롤 방향과 정반대로 움직이게 해야 하기 때문이죠.
예제를 보면서 조금 더 깊이 알아 봅시다.
위의 이미지에서 data-speed는 10이고, 브라우저 창에서 57px 스크롤되었다고 가정해 봅시다. 그러면 57px을 10으로 나눈 값인 5.7px이 되지요.
1 |
// Put together our final background position |
2 |
var coords = '50% '+ yPos + 'px'; |
3 |
|
4 |
// Move the background |
5 |
$bgobj.css({ backgroundPosition: coords });
|
우리가 해야 할 마지막 작업은 최종 배경 이미지의 위치를 변수에 같이 넣는 것입니다. 배경 이미지의 수평 위치를 고정하기 위해서 xPosition 값을 50%로 적용했습니다. 그다음 yPos를 yPosition에 추가했으며, 마지막으로 배경 이미지의 위치를 <section> 배경인 $bgobj.css({backgroundPosition: coords });에 대입했습니다.
완성된 코드는 아래와 같습니다.
1 |
$(document).ready(function(){
|
2 |
$('section[data-type="background"]').each(function(){
|
3 |
var $bgobj = $(this); // assigning the object |
4 |
|
5 |
$(window).scroll(function() {
|
6 |
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
|
7 |
|
8 |
// Put together our final background position |
9 |
var coords = '50% '+ yPos + 'px'; |
10 |
|
11 |
// Move the background |
12 |
$bgobj.css({ backgroundPosition: coords });
|
13 |
}); |
14 |
}); |
15 |
}); |
앗싸, 드디어 해냈습니다! 여러분도 테스트해 보세요.
IE에 맞추기
한 가지 수정 사항이 있습니다. 오래된 IE 버전에서는 <section>과 <article> 태그를 렌더링하지 못합니다. 수정 작업은 쉽습니다. 엘리먼트를 만들어 주는 근본적인 해결책을 사용할 겁니다. 그렇게 하면 브라우저에서 마술처럼 HTML5 태그를 알아 보게 됩니다.
1 |
// Create HTML5 elements for IE |
2 |
|
3 |
document.createElement("article");
|
4 |
document.createElement("section");
|
그와 더불어 모든 브라우저에서 잘 작동하도록 기본 CSS reset 파일을 사용해야 합니다. 운 좋게도 브라우저 호환성에 관한 한 HTML5 Boilerplate 같은 도구가 우리가 부딪칠 문제들을 해결하고 있습니다.
수업을 마치겠습니다! 더 하고 싶은 질문이나 정보가 있으신가요? 아래 댓글로 알려주세요!
또한 전문가다운 결과를 낼 빠른 해결책을 찾는다면, 저희 패럴랙스 테마와 단일 페이지 템플릿 옵션을 살펴 보세요. ThemeForest에서 구매할 수 있습니다.
