paralaxx

by jonahe

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.11/lodash.min.js"></script>
<div id="box" class="box">
  agg
</div>

CSS

body {
  padding: 2%;
  overflow-x: hidden;
}
.box {
  display: flex;
  min-height: 160vh;
  margin-top: 20%;
  margin-bottom: 200%;
  background: red;
}

JavaScript

const box = $("#box") ;
$(window).on('scroll', _.throttle(function(){
    // do heavy things
    console.log(box.offset())
    if(window.scrollTop < box.offset().top) return;
    box.css("transform", `translateX(${ window.scrollY* 0.9 }px)` )
}, 1000 / 60));