Build­ing a full-screen overlay

Publisher: TJ Fogarty

Modified: 2018-03-13

I’m cur­rent­ly work­ing on a project that requires a full-screen over­lay for var­i­ous com­po­nents — I’m going to share what I have at the moment, though I’m sure it can be refined.

DIS­CLAIMER: I’m not a mad bas­tard when it comes to JavaScript. I’m still learning.

I’m using the incred­i­ble GSAP library for ani­mat­ing the var­i­ous parts, and I’ve found that once you get into it, it’s an invalu­able tool. It also plays nice­ly with jQuery.animate() via a plu­g­in if you’re so inclined.

jQuery is being used as well, though you can eas­i­ly use some­thing like Zep­to or any­thing else you fancy.

The Over­lay object is going to work as follows:

  • var overlay = new Overlay(); — this instan­ti­ates the object, but doesn’t cre­ate it in the DOM.
  • overlay.create(); — we then cre­ate an emp­ty div in the page.
  • overlay.show(); — this ani­mates it in.
  • overlay.hide(); — does what you imagine.
  • overlay.destroy(); — removes it from the DOM.

Mon!

var Overlay = (function() {
  var $body = $(‘body’); // We need to put the overlay somewhere

    // We can modify this to accept an object instead of setting everything here, but this works fine for now
  function Overlay() {
    this.assignClass = ‘c-overlay’;
    this.el = false; // check if it exists
    this.animate = {
      duration: 0.3,

      visible: {
        display: ‘block’,
        autoAlpha: 0.7,
        ease: Power3.easeInOut
      },

      hidden: {
        display: ‘none’,
        autoAlpha: 0,
        ease: Power3.easeInOut
      }
    };
  }

  return Overlay;
})();

This is the start of our over­lay. It’s basi­cal­ly just some con­fig­u­ra­tion, and it can be mod­i­fied to accept an object as an argu­ment so we can spec­i­fy what we want the prop­er­ties to be. For the moment, how­ev­er, this’ll work fine to get us up and running.

Grand job, so let’s add it to the DOM when we call create().

  Overlay.prototype.create = function() {
    var self = this;

    this.el = $(‘<div/>’, {
      ‘class’: this.assignClass
    }).appendTo($body);

    $(this.el).on(‘click’, function() {
        self.hide();
    });
  };

We’re also bind­ing a click event in here that hides the over­lay once clicked.

Now we’re going to show it using TweenLite from GSAP. We’re going to pass in parts of the ani­mate object we cre­at­ed ear­li­er, and we’re going to pass these into a fromTo() method.

  Overlay.prototype.show = function() {
    $body.addClass(‘prevent-overflow’);
    TweenLite.fromTo(this.el, this.animate.duration, this.animate.hidden, this.animate.visible);
  };

That extra class is just a helper, and not nec­es­sary. It just pre­vents scrolling when the over­lay is active.

You’ll notice as well that the ani­mate object spec­i­fies that we’re ani­mat­ing from display: block; to display: none;. These prop­er­ties will be applied once the oth­er prop­er­ties have been ani­mat­ed. In this case we’re ani­mat­ing opacity using autoAlpha.

The dif­fer­ence between opacity and autoAlpha is as fol­lows, found on Get­ting Start­ed with GSAP:

the same thing as opac­i­ty” except that when the val­ue hits 0”, the vis­i­bil­i­ty” prop­er­ty will be set to hid­den” in order to improve brows­er ren­der­ing per­for­mance and pre­vent clicks/​interactivity on the tar­get. When the val­ue is any­thing oth­er than 0, vis­i­bil­i­ty” will be set to vis­i­ble”.

Hid­ing it is going to be the same idea as show­ing it. We’re just going to swap some of the argu­ments around:

  Overlay.prototype.hide = function() {
    $body.removeClass(‘prevent-overflow’);
    TweenLite.fromTo(this.el, this.animate.duration, this.animate.visible, this.animate.hidden);
  };

Final­ly, we need a method for destroy­ing it. 

  Overlay.prototype.destroy = function() {
    $body.removeClass(‘prevent-overflow’);
    $(this.el).remove();
    this.el = false;
  };

See the Pen Full-screen over­lay by T.J. Fog­a­r­ty (@tjFogarty) on Code­Pen.

It’s not the most incred­i­ble thing you’ve ever seen, but if you have mod­ules that need an over­lay, it’s easy to just drop this in for re-use.