JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<section class="cat1" data-type="parallax" data-speed="10"></section>
<section class="cat2" data-type="parallax" data-speed="10"></section>

CSS

body {
  margin: 0;
  padding: 0;
}

.cat1 {
  background: url(http://bootstraptowordpress.com/wp-content/themes/bootstrap2wordpress/assets/img/hero-bg.jpg) 50% 0 repeat fixed;
  min-height: 1000px;
  height: 1000px;
  width: 100%;
  max-width: 1920px;
}

.cat2 {
  background: url(http://bootstraptowordpress.com/wp-content/themes/bootstrap2wordpress/assets/img/hipster-stuff.jpg) 50% 0 repeat fixed;
  min-height: 1000px;
  height: 1000px;
  width: 100%;
  max-width: 1920px;
  -webkit-box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
  box-shadow: 0 0 50px rgba(0, 0, 0, 0.8);
}

JavaScript

$(document).ready(function() {
  var $window = $(window);

  $('section[data-type="parallax"]').each(function() {
    var $bgobj = $(this); // assigning the object

    $(window).scroll(function() {
      var yPos = -($window.scrollTop() / $bgobj.data('speed'));

      // Put together our final background position
      var coords = '50% ' + yPos + 'px';

      // Move the background
      $bgobj.css({
        backgroundPosition: coords
      });
    });
  });
});