.blank
  h1 Scroll down
.hero
  h1.top(data-delighter) From Top
  h1.left(data-delighter) From Left
  h1.right(data-delighter) From Right
  h1.bottom(data-delighter) From Bottom
.blank
  .gallery
    img.img-small.left(src="https://images.unsplash.com/photo-1453227588063-bb302b62f50b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" data-delighter)
    img.img-small.top(src="https://images.unsplash.com/photo-1496661269814-a841e78df103?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" data-delighter)
    img.img-small.right(src="https://images.unsplash.com/photo-1505134222155-9a141dc0594d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" data-delighter)
    img.img-small.bottom(src="https://images.unsplash.com/photo-1545677133-b1d20e43f69b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" data-delighter)
    img.img-small.right(src="https://images.unsplash.com/photo-1475954704693-ac6850a71ee0?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" data-delighter)
    img.img-small.bottom(src="https://images.unsplash.com/photo-1550469434-2e20fe65dad1?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60" data-delighter)
    img.img-small.top(src="https://images.unsplash.com/photo-1549866908-bf549cdcb506?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80" data-delighter)
    img.img-small.left(src="https://images.unsplash.com/photo-1421098518790-5a14be02b243?ixlib=rb-1.2.1&auto=format&fit=crop&w=1489&q=80" data-delighter)

.blank {
  width: 100%;
  min-height: 100vh;
  background: black; 
  display: flex;
  justify-content: center;
  align-items: center;
  color: white;
}

h1 {
  margin: 4rem 0;
  text-align: center;
}

.hero {
  min-height: 100vh;
  padding: 150px 0;
}
// Top
.top.delighter {
  transition: all .7s ease-out;
  transform: translateY(-150px);
  opacity: 0;
}

.top.delighter.started {
  transform: none;
  opacity: 1;
}

//Left
.left.delighter {
  transition: all .7s ease-out;
  transform: translateX(-150px);
  opacity: 0;
}

.left.delighter.started {
  transform: none;
  opacity: 1;
}

//Left
.right.delighter {
  transition: all .7s ease-out;
  transform: translateX(150px);
  opacity: 0;
}

.right.delighter.started {
  transform: none;
  opacity: 1;
}

// Bottom
.bottom.delighter {
  transition: all .7s ease-out;
  transform: translateY(150px);
  opacity: 0;
}

.bottom.delighter.started {
  transform: none;
  opacity: 1;
}

.img-small {
  max-width: 400px;
  height: auto
}

.gallery {
  width: 90%;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: auto;
}

/*
  Delighters - Add CSS animations to delight users as they scroll down.
  (c) 2018 - Q42
  Written by Martin Kool
  https://github.com/Q42/delighters
*/
var Delighters = new (function() {
  var self = this,
      dels = this.dels = [],

      // default options
      options = {
        attribute:  'data-delighter',
        classNames: ['delighter', 'started', 'ended'],
        start:      0.9, // default start threshold
        end:        0.8, // default end threshold
        autoInit:   true  // initialize when DOMContentLoaded
      };

  document.addEventListener("DOMContentLoaded", function() {
    if (options.autoInit) init();
  });

  function config(opts) {
    for (var name in opts) options[name] = opts[name];
  }
  
  function init() {   
    document.addEventListener('scroll', scroll)
    var els = document.querySelectorAll('[' + options.attribute + ']');

    for (var i=0; i<els.length; i++) {
      var el      = els[i],
          def     = el.getAttribute(options.attribute, 2),
          pairs   = def.split(';'),
          del     = {};
          del.start = options.start;
          del.end = options.end;
      
      for (var j=0; j<pairs.length; j++) {
        var pair  = pairs[j].split(':'),
            name  = pair[0],
            val   = isNaN(pair[1] * 1)? pair[1] : pair[1] * 1;
        if (name) del[name] = (val === undefined)? true : val;
      }

      del.el = el;
      del.id = dels.length;
      dels.push(del);
      el.classList.add(options.classNames[0])
      if (del.debug) el.style.outline = 'solid red 4px';
    }
    scroll();
  }

  function scroll() {
    var viewportHeight = window.innerHeight;
    for (var i=0; i<dels.length; i++) {
      var del = dels[i],
          box = del.el.getBoundingClientRect(),
          factorStart = box.top / viewportHeight,
          factorEnd = box.bottom / viewportHeight;

      if (del.debug) {
        if (factorStart >= 0 && factorStart <= 1) {
          if (!del.startLine) {
            del.startLine = document.createElement('div')
            document.body.appendChild(del.startLine);
            del.startLine.style = 'position:fixed;height:0;width:100%;border-bottom:dotted red 2px;top:' + (del.start * 100) + 'vh';
          }
        }
        if (((factorEnd < del.end) || (factorStart > 1)) && del.startLine) {
          del.startLine.parentNode.removeChild(del.startLine);
          delete del.startLine;
        }
      }
      if (factorStart < del.start && !del.started) {
        del.started = true;
        del.el.classList.add(options.classNames[1])
      }
      else if (factorStart > del.start && del.started) {
        del.started = false;
        del.el.classList.remove(options.classNames[1])
      }
      if (factorEnd < del.end && !del.ended) {
        del.ended = true;
        del.el.classList.add(options.classNames[2])
      }
      else if (factorEnd > del.end && del.ended) {
        del.ended = false;
        del.el.classList.remove(options.classNames[2])
      }
    }
  }

  self.init = init;
  self.config = config;
})();