Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

parallax 웹사이트

넥스브레인 디지털인프라팀 퍼블리싱 파트 강연자료
by

최 종우

on 4 April 2014

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of parallax 웹사이트

어떻게?
근데 아까 플러그인 있다며?
더 많은 내용은
Parallax (시차효과)란?
감사합니다.
이 사람 설명을 들으세요.
skrollr
(https:github.com/Prinzhorn/skrollr) : 다기능적인 자바스크립트 플러그인, 제이쿼리에 의존하지 않음
Jarallax
(http://www.jarallax.com) : 관리면에서도 우수한 플러그인, 풍부한 데모가 매력적
Scrolly
(http://lab.vicorcoulon.fr/javascript/scrolly) : 심플한 설치도 간단한 제이쿼리 플러그인
Parallax.js
(http://wagerfield.github.io/parallax/) : 스마트폰에서도 대응하는 제이쿼리 플러그인
STELLAR.JS
(http://markdalgeish.com/projects/stellar.js) : iOS용 데모도 있는 플러그인
계층구조를 이해하자!
패럴락스(시차)효과는 유저의 조작에 대응
Parallax 웹사이트
활용사례
활용사례
세로방향 패럴락스 사이트
Le col de Claudine (http://www.lecoldeclaudine.com/fr)
가로방향 패럴락스 사이트
http://www.black5.de/
http://www.latabladegisela.com/
오브젝트가
각각 다른 속도
로 움직이게 하여 다이나믹한 움직임을 연출하는 표현 기법
패럴락스 효과를 주고자 하는 컨텐츠를 레이어 구조화
현실에서
멀리있는 물체

조금씩
움직이고, 눈에서
가까운 곳에 있는 물체

많이
움직인다.
페이지에서 가장 뒷쪽(레이어의 아랫쪽,
z-index값이 작다
)일 수록
스크롤값이 작아지고
, 가장 앞쪽(레이어의 윗쪽,
z-index값이 크다
) 오브젝트일수록
스크롤값이 커진다.
동적인 화면설계
정적인 디자인
을 전제로 페이지를 구성
페이지의 일부분을 모션등으로 설계
기존
패럴락스 사이트
페이지의
동적인 움직임
을 전제로 디자인
페이지의 일부분을 정지화면으로 구성
사용자의 어떤 움직임
에 패럴락스를 구현할 것인지 결정(
스크롤, 디바이스의 기울기, 마우스 움직임
등)
브라우저 파악
왜?
당연하지만
브라우저가 후지면
구현할 수 있는
효과도 후지다
.
자세히 살펴보면
부드러운 움직임이나 임팩트가 있는 표현을 구현하려면
css3 프로퍼티
를 이용하고 있는 경우가 많다
제이쿼리 v2.0
부터는 IE8이전의 구 버전의 IE 지원이 폐지되었다.
IE8 이하의 브라우저도 지원해야 하는 경우에는
플러그인
사용 시, 지원하는 제이쿼리 본체를 확인해야 한다.
직접 짜던가
왜 후진데?
그럼 까보자
HTML
CSS
Javascript
<script src="js/jquery-1.10.2.min.js"></script> // 제이쿼리 본체
<div class="star">
<!-- 세 개 레이어 부분 -->
<div class="earth parallax">
<div class="center">
<img src="img/earth.png">
</div>
</div>
<div class="text parallax">
<div class="center">
<img src="img/text.png">
</div>
</div>

<!--// 세 개 레이어 부분 -->
</div>
star 클래스의 div 내에 earth, text 클래스가 들어가 있다.
*{margin: 0; padding: 0}
body,html{height: 100%}
.star{height: 150%; background: url(img/star.png) center center; position: relative; }
.parallax{position: absolute; height: 100%; width: 100%; }
.center img {position: absolute;left: 50%;
top: 50%
;}
.earth img{margin:
-178px
0 0 -178px; z-index: 1;}
.text img{margin:
270px
0 0 -274px; z-index: 2;}
#scroll{position: fixed; bottom: 0; right:0; z-index: 3; background: #42b1b7; padding: 3px 9px; border-radius: 5px 0 0 0;font-family: arial; color: #fff}
계층 구조의 순서를 정하기 위해 star 클래스를 기점으로 position:absolute를 지정하고 z-index를 지정
각 이미지에 center 클래스를 가진 div를 마크업하여 각각의 부모요소를 기준으로 하여 top:50%; margin-top: -1 * 콘텐츠 세로폭 / 2; left:50%; margin-left: -1 * 콘텐츠 가로폭/2 를 css에서 정의하여 이미지가 가운데 배치되도록 한다.
$(window).on('scroll',function(){ //.on()으로 이벤트를 바인드시키면 scroll이 발생할 때 스크롤 값을 이용하여 resize등의 이벤트를 연이어 사용할 수 있게 된다.
var scrollpx = $(this).scrollTop();
$('#scroll').text('scroll : ' + scrollpx + 'px');

var star_scroll = -scrollpx/40; //스크롤 속도를 조절하여 이동
var earth_scroll = -scrollpx*1.5;
var text_scroll = -scrollpx*5;
$('.star').css({'background-position-y':star_scroll});
$('.earth').css({'margin-top':earth_scroll}); //얻은 속도를 각 레이어에 반영
$('.text').css({'margin-top':text_scroll});
});
참조 및 소스출처 :
월간 Web designinig 3월호
Full transcript