JavaScript(jQuery)에서 패럴렉스 이펙트

JavaScript(jQuery)에서 패럴렉스 이펙트

1. 스크롤 수치를 취득

어느 정도 스크롤할 수치를 취득한다. 이것만으로는 아직 패럴렉스도 아무것도 아니지만 모든 것은 여기에서 시작된다.

$(function() {

  $(window).scroll(function() {

    var value = $(this).scrollTop();  //스크롤 수치를 취득

    $('#scrollValue').text(value);

  });

});

View demo

스크롤을 하면 그 수치가 화면 우상단에 표시된다.

2. Position값을 변경하여 움직임을 붙인다. 

취득한 스크롤 수치를 사용하여 사각형을 움직여본다.

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

취득한 수치를 계산처리를 더해 사각형의 움직임에 변화를 붙인다.

3. 사각형을 옆으로 움직여 본다

top에 더헤 left의 수치를 변경해본다. 요령은 위의 샘플과 동일하다.

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

4. 배경화면을 움직여본다.

- 컨텐츠 영역의 배경화면을 스크롤으로 움직여본다.

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

Area1과 Area2는, 화면의 가장 위까지 오면 거기에서 위치가 고정된다. 

Area3은 가장 위까지 오면 이번에는 아래로 내려가는 움직임을 한다. 

Area4는 화면 가장 위까지 위로부터가 아니라 도중에서 위치가 고정되어 거기에 Red color area가 통과하도록 움직인다.

5. Transform 시켜본다

스크롤에 의한 종횡의 움직임 뿐 아니라 CSS3의 Transform 프로퍼티도 조작해본다.

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

Transform은 CSS3의 기능이므로 IE8 등의 옛날 브라우저에서는 동작하지 않지만 간단하게 화려한 움직임을 실현하는 것이 가능하다.

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