1년 차 디자이너도 설치할 수 있습니다!발락스 입문

며칠 전에 간단한 시차 효과를 설치해 보았지만, 프로그램 라이브러리를 사용하지 않고 간단하게 했기 때문에 어떻게 했는지 귀결해 보려고 합니다.
이번에 제작된 발락스의 동작은 다음과 같은 인상을 준다.

시차 구조

각 영역이 굴러가는 속도를 바꾸어 앞과 뒤가 다른 공간으로 보일 수 있도록 합니다.
이번 상황은 점 배경 부분의 굴림 속도를 느리게 함으로써 시차 효과를 발생시킨다.(상기 Gif 이미지 참조)

코드 (예비)

먼저 HTML을 준비하세요.
핵심은 스크롤 속도를 바꾸고 싶은 모든 요소에 id를 사용해야 한다는 것이다.
이번에는 "dot"부분만 천천히 이동하고 싶어서 "dot"클래스가 있는 div에서 "id="first"를 사용합니다.
그 외의 일반적인 속도로 움직이는 부분, 특히 아무것도 맞히지 않아도 괜찮았으면 좋겠어요. 하지만 이번에는 이해하기 쉽도록'id='second'를 맞혔어요.
parallax.html

<div class="content">
  <div id="first" class="dot">
    コンテンツ1
  </div>
  <div id="second" class="box">
    <div class="horizontal-stripe">
      コンテンツ2
    </div>
    <div class="pale-purple">
      コンテンツ3
    </div>
    <div class="violet">
      コンテンツ4
    </div>
  </div>
</div>

'id='first'는 분홍색으로 둘러싸인 부분,'id='second'는 파란색으로 둘러싸인 부분에 대응한다.

다음은 CSS입니다.
다음은 시차에 관한 기술만 기재하지만 실제로 쓸 때는 임의의 풍격을 결합하여 추측해 보세요.
parallax.css

.content {
  position: relative;
}

.dot {
  height: 300px; /*任意の高さを指定*/
  position: fixed;
  top: 0;
  z-index: -1;
}

.box {
  position: absolute;
  top: 300px; /*'dot'に指定した高さ分下げる*/
}

상술한fixed는 매우 중요하다.
만약dot 부분에fixed가 없으면 시차가 작용하지 않습니다.

jQuery로 보기

내가 이번에 설치한 코드는 간단하게 쓰면 다음과 같은 느낌이 든다.
parallax.js

$.when(function() {
  var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
  $(scrollTag).animate({ scrollTop: 0 }, '1', 'swing', function(){
    $('#first').css('top', 0);
  });
}).done(function(){
  var top = $('#first').offset().top; //y座標の初期値を取得
  $(window).scroll(function() {
    var value = $(this).scrollTop();  //スクロール値を取得
    $('#first').css('top', top + value / -3); //スクロールを遅くする
  });
});

분해 후 해설하다.
이번에는'.when(A.done)'을 사용합니다.
이것은 "A의 처리가 끝나면 B를 수행합니다."
이번에는 어쨌든 A부터 처리하고 싶어서 이렇게 했습니다.
전반전
parallax.js

$.when(function() {
  var scrollTag = ( window.chrome || 'WebkitAppearance' in document.documentElement.style )? 'body' : 'html';
  $(scrollTag).animate({ scrollTop: 0 }, '1', 'swing', function(){
    $('#first').css('top', 0);
  });
})...

앞부분의 "when ~"부분에서 페이지를 읽을 때마다 맨 위로 스크롤하도록 지정합니다.
"id="first"부분은"position:fixed;"그래서 읽을 때 화면 위치가 중도에서 멈추면 좀 어려워요.
fixed가 지정한 특성상 점 배경의 부분은'화면 top:0px에 비해;'이다.의 위치, 위로 돌아갈 때 점 배경의 일부가 버려져 사라졌습니다.

뒷부분
parallax.js

... .done(function(){
  var top = $('#first').offset().top; //y座標の初期値を取得
  $(window).scroll(function() {
    var value = $(this).scrollTop();  //スクロール値を取得
    $('#first').css('top', top + value / -3); //スクロールを遅くする
  });
});

후반부,'done~'부분은 우선'id='first'가 첨부된 점 배경 부분의 시작 위치(y 좌표)를 얻는다.
※ 앞부분을 먼저 처리하려는 이유는 뒷부분에'id='first'의 y 좌표를 얻어야 한다는 것을 알고 싶습니다.
그곳에서 굴러갈 때마다 "scroll Top"에서 현재 굴러간 값이 얼마나 되는지 가져옵니다.
이후'id='first'가 있는 점 배경 부분의 css에'top: 스크롤 값/-3'값을 추가합니다.
예를 들어, 현재 600px를 스크롤한다고 가정합니다.
그리고 마지막 동작$('#first').css('top', 0 + 600 / -3);, 값은 -200입니다.즉, 화면이 -200px에 있는 위치에 비해 top이 있는 상태이다.

깨진 숫자는 이동하고 싶은 속도와 방향에 따라 자신의 취향에 따라 조정하세요.
이런 느낌으로 시차를 설치해 봤어요.
이번에는 이해하기 쉽도록 px로 썼지만 실제로'id='first'의 높이를 px로 지정하고 싶지 않아 js로 윈도우의 세로 폭을 조정하는 처리도 추가했다.
그거에 대해서 기회가 된다면 다시 쓰고 싶어요!
나는 팔락스 자체도 더 예쁜 방법이 있다고 생각하기 때문에 앞으로도 배워야 한다.