JSFiddle - React, Tailwind, and code Playground

by orjan

HTML

<div class="content">
</div>
<div class="paralax">
  <div class="image">
    <img src="https://via.placeholder.com/1200x576.png?text=placeholder" class="dummy" />
  </div>
</div>
<div class="content">
</div>

CSS

body {
  margin: 0;
}

.content {
  height: 100vh;
  background-color: black;
  position: relative;
  z-index: 3;
}

.paralax {
  max-width: 100%;
  overflow: hidden;
  position: relative;
  display: block;
  height: auto;
}

.dummy {
  position: relative;
  z-index: 1;
  height: 100%;
  visibility: hidden;
}

.image {
  bottom: 0;
  left: 0;
  width: 100%;
  max-width: 100%;
  display: block;
  position: fixed;
  overflow: hidden;
  z-index: 2;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  background-size: cover;
}

JavaScript

function paralaxInit() {
  $('.paralax').each(function() {
    var paralax = $(this);
    var image = paralax.find('.image');
    var dummy = paralax.find('.dummy');
    var dummyHeight = dummy.outerHeight();
    image.css({
      'height': dummyHeight,
      'background-image': 'url(' + dummy.attr('src') + ')'
    });
    paralax.css('height', dummyHeight);
  });
}
paralaxInit();

function paralaxScroll() {
  $('.paralax').each(function() {
    var scroll = $(window).scrollTop();
    var paralax = $(this);
    var image = paralax.find('.image');
    var paralaxOffset = paralax.offset().top;
    var windowOffset = scroll + $(window).height();
    console.log(scroll);
    var nextContentOffset = paralax.next().offset().top;
      if (scroll > paralaxOffset && scroll < nextContentOffset) {
          image.css({
        'transform': 'translate(0, -' + .3 * (windowOffset - paralaxOffset) + 'px)',
      });
      }
      else {
      	image.css({
        'transform': 'translate(0,0)'
      });
      }
  });
}
paralaxScroll();

$(window).on('scroll', paralaxScroll);
$(window).on('resize', paralaxScroll);