JSFiddle - React, Tailwind, and code Playground

by Emily Humphrey

HTML

<div class="horizon-image JS-horizon-images">
  <img src="//lorempixel.com/400/200/" />
</div>
<div class="horizon-image JS-horizon-images">
  <img src="//lorempixel.com/500/800" />
</div>
<div class="horizon-image JS-horizon-images">
  <img src="//lorempixel.com/300/800" />
</div>
<div class="horizon-image JS-horizon-images">
  <img src="//lorempixel.com/400/1100" />
</div>

SCSS

body{
  padding: 0; 
  margin: 0;
}
img{
  display: block;
  width: 100%;
}
.horizon-image{
  &{
    position: relative;
    z-index: 1;
  }
  &::after{
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
    height: 100%;
    width: 100%;
    background: #fff;
    transform-origin: top left;
    transition: .3s linear;
  }
  &.display::after{
    transform: scaleY(0);
  }
  img{
    position: relative;
    z-index: 1;
  }
}

JavaScript

const $horizonImages = document.querySelectorAll(".JS-horizon-images");
const horizonImages = [];

HorizonImage.prototype = {
	_defaultOptions: function(){
  	
  },
  _checkLoad: function(){
  	return this.$image.complete;
  },
  initialize: function($element){
		this.display();
  },
  display: function(){
    if(this._checkLoad()){
      this.$wrapper.classList.add("display");
    } else{
    	let garcon = setInterval(()=>{
        if(this._checkLoad()){
          clearInterval(waiter)
          this.$wrapper.classList.add("display");
        }
      }, 300)
    }
  }
}

function HorizonImage($element){
	this.$wrapper = $element;
  this.$image = $element.querySelector("img");
  this.initialize()
}



for(let i = 0; i < $horizonImages.length; i++){
 const img = new HorizonImage($horizonImages[i]);
 horizonImages.push(img);
}