Scrolling Background-Image Paralax

스크롤링시 백그라운드 이미지의 속도를 조절하여 패럴럭스 느낌을 나게 해주는 스크립트 소스입니다.

응용하여 일반 태그에도 사용 가능합니다.

코드펜 URL : https://codepen.io/roborich/pen/wpAsm

Scrolling Background-Image Paralax

<div class='box1'>
  <span class='title'>Normal</span>
</div>
<div class='box2'>
  <span class='title'>1/2 Speed Parallax</span>
</div>
<div class='box3'>
  <span class='title'>1/4 Speed Parallax</span>
</div>
<div class='box4'>
  <span class='title'>Fixed Position</span>
</div>

* {
  margin: 0;
  padding: 0;
}
div {
  height: 3000px;
  width: 20%;
  margin: 2.5%;
  float: left;
  background: white;
  background-image: linear-gradient(#ECF0F1 50%, #bdc3c7 50%);
  background-size: 50px 50px;
  font-size: 20px;
  box-sizing: border-box;
  text-align: center;
  font-weight: bold;
  position: relative;
}
.box4 {
  background-attachment: fixed;
  background-position: 0 26px;
}
span {
  display: block;
  position: fixed;
  width: 20%;
  box-sizing: border-box;
  padding: 3px 10px;
}

// javascript
function background_image_parallax_j (el, multiplier) {
  multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
  multiplier = 1 - multiplier;
  window.addEventListener('scroll', function(){
    let from_top = window.scrollY || document.documentElement.scrollTop;
    console.log(from_top);
    
    let bg_css = '0px ' + (multiplier * from_top) + 'px';
    el.style.backgroundPosition = bg_css;
  });
}
background_image_parallax_j(document.querySelector('.box2'));
background_image_parallax_j(document.querySelector('.box3'), 0.15);

// jQuery
function background_image_parallax ($object, multiplier) {
  multiplier = typeof multiplier !== 'undefined' ? multiplier : 0.5;
  multiplier = 1 - multiplier;
  var $doc = $(document);
  $(window).scroll(function(){
    var from_top =  $doc.scrollTop();
    var bg_css = '0px ' + (multiplier * from_top) + 'px';
    $object.css({'background-position' : bg_css});
  });
}

background_image_parallax($('.box2'));
background_image_parallax($('.box3'), 0.15);