스크롤 시 움직이는 이펙트

한번쯤은 아래와 같은 스크롤 시 이미지가 움직이는 사이트를 본 적이 있을 것이다.

애플 공식 홈페이지에 이러한 효과들이 많기로 유명하며 나도 언젠간 이런 걸 만들어 보고싶다는 생각을 했다.

그래서 비슷하게 만들어 보았는데

window.addEventListener('scroll', function(){
  console.log(window.scrollY)
  $('.Box2').text(window.scrollY);
  $('.Box2').css({'top':100-window.scrollY*1.3});
  $('.Box1').css({'right':100-window.scrollY});
  $('.Box3').css({'left':250-window.scrollY});
});

자바스크립트의 window.addeventlistener scroll 기능을 사용하고
position:fixed 속성을 이용하여
스크롤 시 scrollY값이 변함에 따라 객체들을 이동시키도록 만들었다.

JQuery를 이용하여 Y좌표가 움직일 때마다 top, bottom, left, right등의 값을 변경시켜 객체들이 움직이게 만들었고 컨테이너 객체에 overflow:hidden 속성을 주어 그것을 빠져 나갈때 사라지는 것처럼 보이게 만들면 된다.