페럴렉스 관련 포스팅 (원본 : 일본어)

Scrap 2014. 11. 3. 11:41

원본 주소

http://dev.classmethod.jp/etc/html5-x-css3-x-jquery-6-parallax/




소개 - 패럴 랙스 효과에 대해

패럴랙스 (parallax)를 직역하면 시차 입니다. 시차 효과는 시야가 이동할 때 각 물체가 각각 다른 속도로 스크롤하여 깊이 사이를 비롯한 시각 효과를 말합니다.

애니메이션의 세계에서는 디 ○ 니 영화 에서 오래전부터 사용되어 있거나, 비디오 게임에서도 횡 스크롤 액션 게임 등에서 옛날부터 사용되고 있습니다.



JavaScript (jQuery)에서 패럴 랙스 효과

1 | 스크롤 값을 취득

얼마나 스크롤 했는가하는 값을 가져옵니다. 이것만으로는 아직 아무것도 없지만 모든 것은 여기서부터 시작입니다.

1
2
3
4
5
6
$ ( function () {
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/1-getscrollvalue.html

스크롤하면 값이 화면 오른쪽 상단에 표시됩니다.


2 | Position 값을 변경하여 움직임을 찍어 보면

취득한 스크롤 값을 사용하여 사각형을 움직여 봅니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$ ( function () {
  var top = $ ( '# item1' ) .offset (). top; // y 좌표의 초기 값을 취득
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
 
    // 취득한 스크롤 값을 사각형의 Y 좌표 값으로 지정
    // 스크롤 값을 나누어 이동 거리 변주
    $ ( '# item1' ) .css ( 'top' , top + value / 2);
    $ ( '# item2' ) .css ( 'top' , top + value / 4);
    $ ( '# item3' ) .css ( 'top' , top + value / 6);
    $ ( '# item4' ) .css ( 'top' , top + value / 8);
    $ ( '# item5' ) .css ( 'top' , top + value / 10);
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/2-setposition-y.html

취득한 값에 계산을 추가하여 구형의 움직임에 변화를 붙입니다.



3 | 구형을 옆에 움직여 본다

top 외에도 left 값도 변경하려고합니다. 요령은 앞의 예제와 동일합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
$ ( function () {
  var top = $ ( '# item1' ) .offset (). top; // y 좌표의 초기 값을 취득
  var left1 = $ ( '# item1' ) .offset (). left;  // item1의 x 좌표의 초기 값
  var left2 = $ ( '# item2' ) .offset (). left;  // item2의 x 좌표의 초기 값
  var left3 = $ ( '# item3' ) .offset (). left;  // item3의 x 좌표의 초기 값
  var left4 = $ ( '# item4' ) .offset (). left;  // item4의 x 좌표의 초기 값
  var left5 = $ ( '# item5' ) .offset (). left;  // item5의 x 좌표의 초기 값
 
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
 
    // 취득한 스크롤 양을 사각형의 XY 좌표 값으로 지정
    // 스크롤 값을 나누어 이동 거리 변주
    $ ( '# item1' ) .css ({ 'top' : top + value / 4});
    $ ( '# item2' ) .css ({ 'top' : top + value / 5, 'left' : left2 + value / 8});
    $ ( '# item3' ) .css ({ 'top' : top + value / 6, 'left' : left3 + value / 6});
    $ ( '# item4' ) .css ({ 'top' : top + value / 8 'left' : left4 + value / 5});
    $ ( '# item5' ) .css ({ 'left' : left5 + value / 4});
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/3-setposition-xy.html


4 | 배경 이미지를 움직여 본다

컨텐츠 영역의 배경 이미지를 스크롤로 움직여 봅니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
$ ( function () {
  var area2PosTop = $ ( '# area2' ) .offset (). top;
  var area3PosTop = $ ( '# area3' ) .offset (). top;
  var ashPosTop = $ ( '#ashColorArea' ) .offset (). top;
 
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
 
    // Area1
    $ ( '# area1' ) .css ( 'background-position-y' , value);
 
    // Area2
    if (value> area2PosTop) {
      $ ( '# area2' ) .css ( 'background-position-y' , value - area2PosTop);
      console.log ( 'area2 variable' );
    } else {
      $ ( '# area2' ) .css ( 'background-position-y' , 'top' );
      console.log ( 'area2 top' );
     }
 
    // Area3
    if (value> area3PosTop) {
      $ ( '# area3' ) .css ( 'background-position-y' (value - area3PosTop) * 2);
      console.log ( 'area3 variable' );
    } else {
      $ ( '# area3' ) .css ( 'background-position-y' , 'top' );
      console.log ( 'area3 top' );
    }
 
    // Area4
    if (value> ashPosTop) {
      var area4Top = value - ashPosTop - 800;
      $ ( '# area4' ) .css ( 'background-position-y' , area4Top);
    } else {
      $ ( '# area4' ) .css ( 'background-position-y' -200);
    }
 
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/4-bgscroll.html

Area1 과 Area2 은 화면 상단까지 오면 위치가 고정됩니다. 
Area3 는 상단까지 오면 이번에는 아래에 내려가는 움직임을합니다. 
Area4 화면 상단으로 올라가지 않고 중간에 위치가 고정되고, 그 위에 Red color area 가 통과 같은 움직임을합니다.



5 | Transform시켜 본다

스크롤에 의한 화면의 움직임뿐만 아니라 CSS3의 Transform 속성 도 조작 해보십시오.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$ ( function () {
  $ (window) .scroll ( function () {
    var value = $ ( this ) .scrollTop ();  // 스크롤 값을 취득
    $ ( '#scrollValue' ) .text (value);
 
    var hoge1 = value * 0.001 + 0.5;
    if (hoge1> 0.5) {
      $ ( '# area1' ) .css ( 'transform' , 'scale (' + hoge1 + ')' );
    }
 
    if (hoge1> 0.1) {
      $ ( '# area2' ) .css ( 'transform' , 'perspective (1000px) rotateY (' + value + 'deg)' );
    }
    var hoge3 = 2 - value * 0.0009;
    $ ( '# area3' ) .css ( 'transform' , 'scale (' + hoge3 + ') rotate (' + value + 'deg)' );
 
    var hoge4 = value * 0.0009;
    if (hoge4 <= 1) {
      $ ( '# area4' ) .css ( 'opacity' , hoge4);
    }
  });
});
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/5-transform.html

Transform은 CSS3의 기능 때문에 IE8 등의 기존 브라우저 에서 작동하지 않지만, 간편하게 화려한 움직임을 실현 할 수 있습니다.


CSS에서 패럴 랙스 효과

아주 간단한 것이지만, jQuery를 일절 사용하지 않고 CSS만으로 패럴 랙스를 실현하는 것도 가능합니다.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
< body >
  < section ID = "first" class = "content" >
    < P class = "logo" > jQUery x HTML5 x CSS3 </ p >
    < article >
      < h1 > Parallax sample </ h1 >
      < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit .... </ p >
    </ article >
  </ section >
 
  < section ID = "second" class = "content" >
    < article >
      < H2 ID = "toc-only-css" > Only CSS </ h2 >
      < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit .... </ p >
    </ article >
  </ section >
 
  < section ID = "third" class = "content" >
    < article >
      < H2 ID = "toc-without-jquery" > Without jQuery </ h2 >
      < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit .... </ p >
    </ article >
    < img src = "images / guernica.jpg" />
  </ section >
 
  < section ID = "theend" class = "content" >
    < H2 ID = "toc-the-end" > The End </ h2 >
  </ section >
</ body >

CSS ※ 패럴 랙스 관한 부분 만 설명

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
.content {
  position : relative ;
}
#first { background : url (images / bg-parallaxsample 01 .jpg) 50 % 0 no-repeat fixed ;}
#second { background : url (images / bg-parallaxsample 02 .jpg) 50 % 0 no-repeat fixed # 000 ;}
#third { background : url (images / bg-parallaxsample 03 .jpg) 50 % 0 no-repeat fixed # 000 ;}
#theend { background : url (images / bg-parallaxsample 04 .jpg) 50 % 0 no-repeat fixed # e6cda4 ;}
 
/ * section first * /
.logo {
  position : fixed ;
  top : 100px ;
  left : 50px ;
}
#first article {
  position : absolute ;
  top : 200px ;
  width : 800px ;
}
 
/ * section third * /
#third article {
  position : absolute ;
  top : 0 ;
}
#third img {
  position : absolute ;
  left : 30px ;
  top : 600px ;
}
 
/ * section the end * /
#theend h 2 {
  position : absolute ;
}
CSS 구현의 포인트
- 각 섹션의 배경 이미지를 background-position : fixed; 고정 배치
- 텍스트와 사진 이미지 등의 콘텐츠를 position : absolute; 절대 배치

이렇게하면 페이지를 스크롤해도 배경 이미지는 움직이지 않고 그대로 다음 섹션에 숨기는 등의 표현이 가능합니다.

  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/6-onlycss.html

jQuery x CSS에서 패럴 랙스 효과

위의 CSS 만의 샘플에 jQuery를 사용하여 더욱 움직임을 더합니다. 우선 jQuery에서 DOM을 조작하기 쉽게하기 위해 HTML의 다음 부분 다음에 추가됩니다.

HTML

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
< section ID = "first" class = "content" >
  < P class = "logo sprite" data-speed = "-1.5" data-offsety = "100" > jQUery x HTML5 x CSS3 </ p >
  < article >
    < h1 > Parallax sample </ h1 >
    < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ p >
  </ article >
</ section >
 
< section ID = "second" class = "content" >
  < article >
    < H2 ID = "toc-only-css1" > Only CSS </ h2 >
    < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ p >
  </ article >
</ section >
 
< section ID = "third" class = "content" >
  < article >
    < H2 ID = "toc-without-jquery1" > Without jQuery </ h2 >
    < p > Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </ p >
  </ article >
  < img src = "images / img-parallaxsample01.jpg" class = "sprite" data-speed = "2" data-offsety = "1600" />
</ section >
 
< section ID = "theend" class = "content" >
  < H2 ID = "toc-the-end1" class = "sprite" data-speed = "0.8" data-offsety = "4180" > The End </ h2 >
</ section >

jQuery에서 액션을 지정할 때 매개 변수를 HTML5의 기능인 자체 데이터 속성 을 사용하여 지정합니다.

  • data-speed
  • data-offsety

자체 데이터 속성은 HTML 네임 스페이스에 속하지 않는 특성을 말하며, 코더가 독자적으로 정의 할 수 있습니다. jQuery Mobile (http://jquerymobile.com/)을 한번이라도 만진 적이있는 사람이라면 그 용도는 이해할 수 있을겁니다.

더 자세히 알고 싶은 분은 이 페이지(http://www.html5.jp/tag/attributes/data.html) 를 참조하십시오.

다음 JavaScript의 구현입니다. 우선 배경 이미지가 천천히 위로 움직여가는 처리 만을 구현합니다.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
$ ( function () {
  var $ window = $ (window);
 
  $ ( '.content' ) .each ( function (index) {
    var $ self = $ ( this );
    var offsetCoords = $ self.offset ();
 
    $ (window) .scroll ( function () {
      // If this section is in view
      if (($ window.scrollTop () + $ window.height ())> offsetCoords.top && ((offsetCoords.top + $ self.height ())> $ window.scrollTop ())) {
        var yPos = - ($ window.scrollTop () / 8);
        if ($ self.attr ( 'id' )! = 'first' ) {
          yPos + = 126;
        }
        var coords = '50 % ' + yPos + 'px' ;
        $ self.css ( 'backgroundPosition' , coords);
      }
    });
  });
});

여기까지 구현되면 일단 브라우저에서 확인해보십시오. 스크롤 할 것으로 각 섹션의 배경 이미지가 천천히 위로 움직이고있는 것이 알 수 있을까 생각합니다.

다음 스프라이트의 움직임을 구현합니다. 다음과 같이 코드를 추가 기입합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
$ ( function () {
  var $ window = $ (window);
 
  $ ( '.content' ) .each ( function (index) {
    var $ self = $ ( this );
    var offsetCoords = $ self.offset ();
 
    $ (window) .scroll ( function () {
      // If this section is in view
      if (($ window.scrollTop () + $ window.height ())> offsetCoords.top && ((offsetCoords.top + $ self.height ())> $ window.scrollTop ())) {
        var yPos = - ($ window.scrollTop () / 8);
        if ($ self.attr ( 'id' )! = 'first' ) {
          yPos + = 126;
        }
        var coords = '50 % ' + yPos + 'px' ;
        $ self.css ( 'backgroundPosition' , coords);
 
        // Check for other sprites in this section
        $ ( '.sprite' $ self) .each ( function (index) {
          var $ sprite = $ ( this );
          var yPos = - ($ window.scrollTop () / $ sprite.data ( 'speed' )) + $ sprite.data ( 'offsety' );
          $ sprite.css ( 'top' , yPos);
        });
      }
    });
  });
});

HTML 측에서 지정한 데이터 속성 값은 다음과 같이 JavaScript 측에서 참조 할 수 있습니다.

1
< P class = "logo sprite" data-speed = "-1.5" data-offsety = "100" > jQUery x HTML5 x CSS3 </ p >
1
$ ( '.logo' ) .data ( 'speed' ); // -1.5
  • View demo : http://wakamsha.github.io/dev.cm/jhc-study/06/7-jqueryxcss.html

맺음말

예전과 달리 지금은 프리랜서 Web 디자이너 포트폴리오 등뿐만 아니라 기업의 홈페이지와 재치있는 스마트 폰 앱 랜딩 페이지 등에도 패럴 랙스 효과가 반영되어있는 것을 잘 볼 수 있습니다 . 그 좋은 고품질의 Web 페이지는 언뜻 보면 매우 복잡한 구현이되어 있다고 생각하기 쉽지만 하나 하나는 샘플 코드의 조합이며, 그것이 많이 쌓여있는 것이기도 합니다. ※ 물론 예외는 있습니다.

그래서 서두르지 않고 시간을 들여 하나씩 통합해 가면 화려한 패럴 랙스 효과를 만들어 낼 수도 있습니다.

실제로 학습용으로 만드는데도 외형이 화려한 효과는 동기 부여의 유지에 한몫 합니다. 또한 스크롤 의한 좌표 취득 등 프로그래밍은 다른 개발에도 반드시 도움이 때문에, 이 종류가 약한 분은 부디 공부 열심히 하시길...

참고 사이트




저작자표시 비영리 변경금지
,

티스토리툴바