CSS로 패럴렉스 이펙트 + jQuary 추가

jQuery 2016. 2. 5. 14:17

CSS로 패럴렉스 이펙트

극히 간단한 것으로 jQuery를 일절 사용하지 않고 CSS만으로 패럴렉스를 실현하는 것도 가능하다.

HTML

<body>

<p class="logo">jQUery x HTML5 x CSS3</p>

<h1>Parallax sample.</h1>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p>

</article>

</section>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p>

</article>

</section>

<h2 id="toc-without-jquery">Without jQuery</h2>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, ....</p>

</article>

</section>

</section>

</body>

CSS

※초록색은 패럴렉스에 관한 부분

body {
  margin: 0;
}

article h2, article h1 {
  font-size: 3.6em;
  line-height: 1em;
  margin: 25px 0;
}

.content {
  border-bottom: 1px solid rgba(0, 0, 0, 0.4);
  border-top: 1px solid rgba(255, 255, 255, 0.3);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  color: #333;
  height: 1050px;
  margin: 0 auto;
  padding: 0;
  position: relative;
  width: 100%;
}

#first {
  background: url(../img/bg-parallaxsample01.jpg) 50% 0 no-repeat fixed;
}

#second {
  background: url(../img/bg-parallaxsample02.jpg) 50% 0 no-repeat fixed black;
}

#third {
  background: url(../img/bg-parallaxsample03.jpg) 50% 0 no-repeat fixed black;
}

#theend {
  background: url(../img/bg-parallaxsample04.jpg) 50% 0 no-repeat fixed #e6cda4;
}

/* section first */
.logo {
  color: rgba(255, 255, 255, 0.9);
  font-size: 4em;
  font-weight: bold;
  margin: 0;
  position: fixed;
  top: 100px;
  left: 50px;
  text-shadow: 0 -1px rgba(0, 0, 0, 0.4);
}

#first article {
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.1);
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
  padding: 18px;
  position: absolute;
  top: 200px;
  width: 800px;
}

/* section second */
#second {
  padding: 80px 0;
}
#second article {
  background: rgba(51, 51, 51, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.1);
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
  color: white;
  margin-left: 100px;
  padding: 10px 20px;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  line-height: 1.5em;
  width: 445px;
}

/* section third */
#third article {
  background: rgba(51, 51, 51, 0.9);
  border: 1px solid rgba(150, 150, 150, 0.1);
  box-shadow: 0 0 25px rgba(0, 0, 0, 0.3);
  color: white;
  padding: 10px 20px;
  margin: 100px 0 0 60%;
  text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.5);
  line-height: 1.5em;
  color: white;
  position: absolute;
  top: 0;
}
#third img {
  border: 8px solid white;
  box-shadow: 0 0 8px 4px rgba(0, 0, 0, 0.4);
  height: 350px;
  width: 560px;
  position: absolute;
  left: 30px;
  top: 600px;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

/* section the end */
#theend h2 {
  color: white;
  font-size: 4em;
  left: 50%;
  margin-left: -150px;
  position: absolute;
  text-shadow: 0 0 16px rgba(140, 123, 96, 0.8);
  top: 180px;
  width: 300px;
}

/* 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 h2 {

position: absolute;

}

CSS 실장 포인트

- 각 섹션의 배경화면을 background-position: fixed;로 고정배치한다.

- 텍스트나 이미지 화면 등의 컨텐츠를 position: absolute;로 절대배치한다.

이것에 의해 페이지를 스크롤해도 배경화면은 움직이지 않고, 그 상태로 다음 섹션에 숨기는 표현을 실현할 수 있다.

View demo

jQuery x CSS로 패럴렉스 이펙트

위의 CSS만의 샘플에 jQuery를 이용하여 그 위에 움직임을 더할 수 있다.

일단은 jQuery로 DOM을 조작하기 쉽게 하기 위하여 HTML에서 아래의 부분에 추가로 써놓는다.

HTML

<p class="logo sprite" data-speed="-1.5" data-offsety="100">jQUery x HTML5 x CSS3</p>

<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>

</article>

</section>

<h2 id="toc-without-jquery1">Without jQuery</h2>

</article>

</section>

</section>

jQuery에서 움직임을 붙이는 파라미터를 HTML5의 기능인 독자 데이터 속성을 사용하여 지정한다.

data-speed

data-offsety

독자 데이터 속성이란 HTML의 이름 공간에 속하지 않는 속성으로 코더가 독자적으로 정의하는 것이 가능하다.

jQuery Mobile을 한번이라도 해본 적 있는 사람은 그 용도를 이해할 수 있다.

잘 모르는 사람이나 더 자세히 알고 싶은 사람은 이쪽 페이지를 참조.

다음으로 JavaScript의 장착. 일단은 배경화면이 천천히 위로 움직이는 처리만 해본다.

JavaScript

$(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);

}

});

여기까지 해냈다면 한번 브라우저에서 확인해본다. 스크롤해가면 각 섹션의 배경화면이 천천히 위로 움직이는 것을 알 수 있다.

다음은 스프라이트의 움직임을 만든다. 이하와 같이 코드를 더한다.

$(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 측으로부터 참조하는 것이 가능하다.

<p class="logo sprite" data-speed="-1.5" data-offsety="100">jQUery x HTML5 x CSS3</p>

$('.logo').data('speed'); // -1.5

View demo

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

사용소스는 아래와 같다.

parallax.html

저작자표시

'jQuery' 카테고리의 다른 글

JQuery: find(), siblings() (0)	2016.02.19
JQuery: add(), andSelf(), contents(), end() (0)	2016.02.19
JQuery: 셀렉터로 CSS 변경 (0)	2016.02.17
JavaScript(jQuery)에서 패럴렉스 이펙트 (1)	2016.02.05
패럴렉스 스크롤(Parallax scrolling)에 관하여 (0)	2016.02.05