JSFiddle - React, Tailwind, and code Playground

by Vince

HTML

<div class="bgWrapper">
    <span id="debug"></span>
</div>
<div class="shark"></div>
<div class="fish"></div>
<div class="mainWrapper">
  <!-- BOOM! -->
    
</div>

CSS

.bgWrapper {
  position: fixed;
  background: url(http://lorempixel.com/g/500/500/) top center no-repeat;
  height: 100%;
  width: 100%;
  left: 0;
  z-index: 1;
}
.shark {
  position: fixed; 
  background: url(http://placehold.it/250x187/&text=Shark);
  width: 250px;
  height: 187px;
  z-index: 1;
  left: 50%;
  margin-left: -600px;
  margin-top: 400px;
}
.fish {
  position: fixed;
  background: url(http://placehold.it/250x187/&text=Fish);
  width: 300px;
  height: 246px;
  z-index: 2;
  left: 50%;
  margin-left: 400px;
  margin-top: 500px;
}

JavaScript

$(document).ready(function () {
  $(window).bind('scroll', function (e) {
    //parallaxScroll();
      testScroll();
  });
  
  var newNum = 0;
  function parallaxScroll() {
    var scrolledY = $(window).scrollTop();
    $('.bgWrapper').css('background-position', 'center -' + (( scrolledY * 0.2 )) + 'px');
    $('.shark').css('top', '-' + (( scrolledY * 0.5 )) + 'px');
    $('.fish').css('top', '-' + (( scrolledY * 0.8 )) + 'px');
  }
    function testScroll() {
        $('#debug').text('Number: ' + newNum);
        newNum++;
    }
});