페럴렉스 관련 포스팅

Posted on by uxcss

페럴랙스 스크롤(Parallax scrolling) 은 원래 게임이나 애니메이션과 같은 곳에서 사용하는 기법으로 오브젝트 간 시간 차이를 통해서 조금 더 역동적으로 화면을 표현하던 기법입니다. 이러한 기법이 CSS3와 HTML5 가 등장하면서 2011년부터 웹에 적용되어 점차 확대 되어 가고 있는 추세입니다.

2013년 Purdue University 의 연구에 따르면 페럴랙스 스크롤 기법은 UX 측면에서 새로운 경험을 제공하여 특정 측면의 향상을 가져오지만 반드시 UX 적인 향상을 가져오지는 않는다고 하였습니다.

이러한 페럴랙스 스크롤 웹사이트의 가장 큰 장점은 UX전문가(기획자 또는 디자이너 등)가 원하는 내용을 사용자에게 주도적으로 이야기 할 수 있다는 점입니다. 이러한 점을 통해서 사용자는 인식하지 못하고 사이트에서 제공하는 콘텐츠를 제공 받게 됩니다….

하지만 이러한 페럴랙스 스크롤 웹사이트는 다소 큰 이미지를 사용하고 있어 로딩 시간이 오래 걸린다는 단점이 있습니다. 또한 2011년 이후 활성화된 방식이라 모든 브라우저에서 호환되지 않는 다는 치명적인 단점도 있지요… 또한 과도한 스크롤로 인해 사용자는 웹사이트 자체에 어려움을 느끼거나 원하는 콘텐츠를 찾지 못하여 불만을 가질 수도 있을 것입니다.

하지만 사용자가 충분히 흥미를 가질 수 있고 잘 엮어진 스토리 형태로 제공을 한다면 사용자는 물 흐르듯 사이트에서 제공하는 콘텐츠를 제공 받을 수 있을 것입니다.

이러한 페럴랙스 스크롤 형태로 만들어진 몇 가지 참고 사이트를 알아보겠습니다.

http://www.madwellnyc.com/

http://www.iutopi.com/

http://www.culturalsolutions.co.uk/

http://www.spendeeapp.com/

http://moto.oakley.com/

http://www.putzengel.at/

http://everylastdrop.co.uk/

http://www.hanwhafireworks.com/index.do

http://www.nintendo.com.au/gamesites/mariokartwii/#home

http://www.sony.com/be-moved/

http://www.the-bea.st/

http://lamoulade.com/#!/home

정말 다양한 방식의 페럴랙스 스크롤 사이트가 있는데요. 이러한 사이트들은 간단한 정보를 사용자에게 쉽게 설명하기 위한 사이트들이 대부분 입니다. 이러한 페럴랙스 스크롤 사이트 개발을 위해서 다양한 곳에서 라이브러리와 튜토리얼을 제공하고 있습니다. 간단한 참고 사이트는 아래와 같습니다.

 

http://matthew.wagerfield.com/parallax/

http://markdalgleish.com/projects/stellar.js/

http://www.jarallax.com/

http://prinzhorn.github.io/skrollr/

http://speckyboy.com/2012/07/20/the-parallax-scrolling-effect-40-examples-and-tutorials/

http://www.topdesignmag.com/20-examples-of-one-page-websites-that-are-using-parallax-scrolling/

http://www.creativebloq.com/web-design/parallax-scrolling-1131762

http://webdesignledger.com/inspiration/21-examples-of-parallax-scrolling-in-web-design

http://richardshepherd.com/smashing/parallax/

http://designwoop.com/2012/06/parallax-scrolling-tutorials-resources/

http://net.tutsplus.com/tutorials/html-css-techniques/simple-parallax-scrolling-technique/

http://www.designzzz.com/jquery-parallax-plugins/

http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

http://jalxob.com/cool-kitten/

http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/

페럴랙스 스토롤 형태의 사이트는 사이트에서 제공하는 콘텐츠를 사용자가 거부감 없이 받아 들이도록 적절한 스토리를 통해서 사용자에게 표현하는 것이 가장 중요한 요소라고 생각합니다. 그러한 전달을 위해서는 사이트에서 가진 콘텐츠를 매끄럽게 연결해가는 기획이 필요하겠죠..또한 이러한 페럴랙스 스크롤 사이트를 기획할때 개발자와 디자이너와 소통할 수 있는 방식 또한 해결해야 될 문제점이라고 생각합니다.

출처: http://uipac.com/110 [UIpac (Show me the what to do!)]

 

======================================================================

 

원본 주소

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

 

참고 사이트

출처: http://bienmm.tistory.com/45 [비앤개발메모]

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다