페럴렉스 스크롤링(Parallax Scrolling)

차근차근 읽고 공부하기

(이 포스팅은 공부를 위해 원문사이트를 정리한 것 입니다.)

 

원문 사이트 : https://dev.classmethod.jp/articles/html5-x-css3-x-jquery-6-parallax/

 

 

페럴렉스(Parallax)란? 

영어 단어 그대로 "시차" 를 뜻한다.

시차에 따라 모션을 다르게 줌으로써 움직이는 모션효과를 주는 것.

UX-UI 적인 말이 많지만, 개인적인 소견으로는 UX적으로 짧은시간 가장 큰 효과를 주는 UI 인 것 같다.

 

 

 

1. JavaScript - jQuery 에서 페럴렉스 효과

 

첫번째 단계. 가장 기본이 되는 함수 알기

$(window).scroll(function(){})
	var value = $(this).scrollTop(); // 현재 스크롤 값 
})

참고) 위의 스크롤 함수를 숙지해야, 스크롤이 움직일 때마다 효과를 줄 수 있다.​ 중요함.

 

 

두번째 단계. 수직, 수평으로 움직이기

var top   = $("#item1").offset().top; // #item1 의 상대적 top값을 알 수 있다.
var left1 = $("#item1").offset().left; // 각각의 상대적 left값을 알 수 있다.
var left2 = $("#item2").offset().left;
var left3 = $("#item3").offset().left;
var left4 = $("#item4").offset().left;
var left5 = $("#item5").offset().left;

$(window).scroll(function(){
  var value = $(this).scrollTop(); // 현재 스크롤 값
  
  $("#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});
})

참고) offset() 과 scrollTop()에 대한 포스팅 https://blog.naver.com/hsoojy_/220008081738

[jQuery] scrollTop() & offset

 

 

세번째 단계. 배경 이미지 움직이기

<div id="area1"></div>
<div id="area2"></div>​

<div id="area3"></div>​
<div id="ashColorArea"></div>​
<div id="area4"></div>​
<div id="redColorArea"></div>​​

var area2PosTop = $('#area2').offset().top; // 두번째 div 현재 offset top 값
var area3PosTop = $('#area3').offset().top; // 세번째 div 현재 offset top 값
var ashPosTop   = $('#ashColorArea').offset().top; // 네번째 div 현재 offset top 값

 

$(window).scroll(function() {
  var value = $(this).scrollTop(); // 현재 스크롤 값

  // Area1​ (첫번째 div 영역)​
  $('#area1').css('background-position-y', value); 

  // Area2 (두번째 div 영역)
  if (value > area2PosTop) { // 현재 스크롤값이 두번째 div offset top값 보다 크면 실행
    $('#area2').css('background-position-y', value - area2PosTop);
  } else { // 위의 조건문에 false​ 면 실행
    $('#area2').css('background-position-y', 'top');
  }

  // Area3 (세번째 div 영역)
  if (value > area3PosTop) { // 현재 스크롤값이 세번째 div offset top값 보다 크면 실행
    $('#area3').css('background-position-y', (value - area3PosTop) * 2); //  2배속으로 배경이미지 움직이기
  } else { // 위의 조건문에 false 면 실행
    $('#area3').css('background-position-y', 'top');
  }

  // Area4 (다섯번째 div 영역)
  if (value > ashPosTop) { // 현재 스크롤값이 네번째 div offset top값 보다 크면 실행​​
    var area4Top = value - ashPosTop - 800; // 현재 스크롤값에서 네번째 div offset top값 을 빼고 800이라는 임의의 값을 뺀 변수.
    $('#area4').css('background-position-y', area4Top);
  } else {  // 위의 조건문에 false 면 실행
    $('#area4').css('background-position-y', -200);
  }
});

 

 

네번째 단계. Transform 속성으로 움직이기

참고) 쓰기전 알아둬야할 사항으로, css3 는 IE9 버젼부터 사용가능하므로, 하위 버젼에서는 구동되지 않는다는 점.

$(window).scroll(function() {
  var value = $(this).scrollTop();
  var hoge1 =  value * 0.001 + 0.5;
  var hoge3 = 2 - value * 0.0009;
  var hoge4 = value * 0.0009;

  // Area1 (첫번째 div) 
  if (hoge1 > 0.5) {
    $("#area1").css("transform", "scale(" + hoge1 + ")"); // 크기
  }

  // Area2 ​(두번째 div)
  if (hoge1 > 0.1) {
    $("#area2").css("transform","perspective(1000px) rotateY(" + value  + "deg)") // 원근법, 회전
  }

  // Area3 ​(세번째 div)​
  $("#area3").css("transform","scale("+ hoge3 + ") rotate(" + value + "deg)" ); // 크기, 회전

  // Area4 ​(네번째 div)​
  if (hoge4 <= 1) {
      $("#area4").css("transform","opacity" + hoge4); // 투명도
  }
})

 

 

 

 

2. CSS로 페럴렉스 효과

 

첫번째 단계. css로 페럴렉스 효과주기

<div class="bg bg1"></div>
<div class="bg bg2"></div>
<div class="bg bg3"></div>​
<div class="bg bg4"></div>

.bg {position:absolute}

.bg1 {background:url(-) no-repeat 50% 0 fixed}
.bg2 {background:url(-) no-repeat 50% 0 fixed}
.bg3 {background:url(-) no-repeat 50% 0 fixed}​
.bg4 {background:url(-) no-repeat 50% 0 fixed}​​

참고)

중요한 포인트는 배경이미지를 fixed(고정배치)로 두고, 다른 컨텐츠 등을 position:absolute를 줘서 절대배치 시킬 것.

간단한 배경정도의 구조에 적합한 형태이다.

 

 

3. CSS + jQuery로 페럴렉스 효과

첫번째 단계. css로 페럴렉스 효과주기.