hwa

by uiwwnw

HTML

<div>
  <h2>Lorem ipsum dolor sit amet.</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Asperiores explicabo blanditiis nesciunt ducimus. Esse id fugit recusandae velit tenetur iusto nisi, voluptate libero quidem deleniti porro sequi ipsum veritatis aut voluptatem asperiores molestiae
    ea vitae eius illo ex. Mollitia exercitationem laborum labore alias ab corrupti quasi rerum incidunt. Ullam repellat tempore quisquam molestiae tempora ea exercitationem reiciendis sed, similique fugit placeat est illo ab, repudiandae mollitia! Culpa
    quasi dignissimos harum perspiciatis ab, porro eligendi. Tempora tempore ullam rem quae recusandae, quod suscipit aut quas molestiae deserunt error magnam ea quasi laudantium magni ratione eum quaerat, amet necessitatibus impedit repellat. Officia.</p>
  <h2>Lorem ipsum dolor.</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quo nemo deleniti, assumenda vel ipsum quis, explicabo repellat non natus? Ea voluptatem est asperiores nisi laboriosam, libero, earum quia fuga, odio animi at voluptatibus quidem, praesentium
    ipsam non itaque laudantium cupiditate. Labore aliquam quo minima, quod, voluptates mollitia nam. Veniam dolorem minus quaerat dolorum obcaecati corporis nisi. Enim veniam facilis ab sapiente velit harum dignissimos soluta placeat blanditiis ullam
    vitae nemo necessitatibus, aliquam ducimus. Maxime consectetur architecto fuga adipisci dicta, excepturi ullam! Delectus sapiente deserunt dolorem placeat atque possimus dolorum, ipsam tempora provident obcaecati alias magni molestiae non repellendus
    officiis doloribus error iusto ut ex consectetur eaque dolore, consequatur. Esse adipisci tempore eum fuga aut aperiam reprehenderit quo saepe velit voluptatum molestiae, consequatur doloremque veniam, commodi tempora autem in dolores! Adipisci animi
    quisquam accusamus perferendis repellat inventore, unde nobis eaque quis? Quam magni culpa architecto laudantium, saepe,...

SCSS

h2 {
  position: relative;
  transition: transform .3s ease-out;
  .down & {
    transition: transform 1s ease-out;
    transform: translateY(-10px);
  }
  .up & {
    transition: transform 1s ease-out;
    transform: translateY(10px);
  }
}

JavaScript

var sto;
window.onscroll = function(e) {
  var direct = this.oldScroll > this.scrollY;
  if(!direct) {
    document.getElementsByTagName('body')[0].classList.remove('up');
    document.getElementsByTagName('body')[0].classList.add('down');
  } else {
    document.getElementsByTagName('body')[0].classList.remove('down');
    document.getElementsByTagName('body')[0].classList.add('up');
  }
  clearTimeout(sto);
  sto = setTimeout(function() {
    document.getElementsByTagName('body')[0].classList.remove('down');
    document.getElementsByTagName('body')[0].classList.remove('up');
  }, 200);
  this.oldScroll = this.scrollY;
}