Fun little easter egg for touch devices that uses overscroll ( rubber banding that happens past scroll bottom ) to reveal hidden content

overscroll.js

/**
 * Usage: 
 *
 * const overscroll = new Overscroll();
 * overscroll.init('/path/to/image.png');
 */
function Overscroll() {
  // Check if this is a mobile device that can actually support overscroll
  var supported = (typeof matchMedia !== 'undefined' && matchMedia('(hover: none)').matches);
  var $elm;

  this.init = function(imagePath) {
    if (supported) {
      // Create Image
      $elm = document.createElement('img');
      $elm.src = imagePath;

      // Initial Styling
      $elm.style.position = 'fixed';
      $elm.style.zIndex = 1000;
      $elm.style.bottom = '-10000px';

      // Update Styling after Loading Image
      $elm.onload = function() {
        this.style.left = 'calc(50% - ' + (this.width / 2) + 'px)';
        this.style.width = this.width + 'px';
        this.style.height = this.height + 'px';
        this.style.bottom = -(this.height) + 'px';
      };

      // Add it to Body
      document.body.appendChild($elm);

      // Listen for Scroll Event
      window.addEventListener('scroll', this.scroll);
    }
  }

  this.scroll = function() {
    if (supported) {
      var overscroll = (document.documentElement.scrollTop + window.innerHeight) - document.documentElement.scrollHeight;
      var offset = 100;
      var translate = overscroll - offset;

      if (overscroll >= 0 && translate < $elm.height) {
        $elm.style.transform = 'translateY(' + -(translate) + 'px )';
      }
    }
  }
}