JSFiddle - React, Tailwind, and code Playground

by iZenny

HTML

<img class="frame" id="frame1" src="http://lorempixel.com/output/abstract-q-g-200-200-4.jpg">
<img class="frame frameHide" id="frame0" src="http://lorempixel.com/output/abstract-q-g-200-200-10.jpg">

CSS

body {
  margin: 0;
  padding: 0;
  height: 10000px;
}
.frame {
    display: block;
    position: fixed;
    top: 0px;
    z-index: 1;
    transition: all 1s;
}
#hand0 {
    padding: 55px 155px 55px 155px;
    background-color: white;
}
.frameHide {
  opacity: 0;
  left: -100%;
}
.frameShow {
  opacity: 1;
  left: 0;
}

JavaScript

frame0 = document.getElementById("frame0");

var myScrollFunc = function() {
  var y = window.scrollY;
  if (y >= 800) {
    	frame0.className = "frame frameShow"
  } else {
    	frame0.className = "frame frameHide"
  }
};

window.addEventListener("scroll", myScrollFunc);