JSFiddle - React, Tailwind, and code Playground

by khamer

HTML

<script src="https://imarc.github.io/boilerplate/js/stickyElement.plugin.js"></script>
<img class="scene" data-modifier="30" src="https://s.electerious.com/parallaxscene/p0.png">
<img class="scene" data-modifier="18" src="https://s.electerious.com/parallaxscene/p1.png">
<img class="scene" data-modifier="12" src="https://s.electerious.com/parallaxscene/p2.png">
<img class="scene" data-modifier="8" src="https://s.electerious.com/parallaxscene/p3.png">
<img class="scene" data-modifier="6" src="https://s.electerious.com/parallaxscene/p4.png">
<img class="scene" data-modifier="0" src="https://s.electerious.com/parallaxscene/p6.png">

CSS

.scene {
  position: absolute;
}

body {
  height: 3000px;
}

JavaScript

$(function() {
	$('.scene').each(function() {
  	let endOffset = $(this).data('modifier');
    
    $(this).fix({
    	startOffset: 300 + endOffset * -10,
      endOffset: 0
    });
  })
});