Lightbox screen effect with JavaScript, CSS3 transitions, and Gimp

From left to right: Before and after clicking Featured Examples

The screenshot on the right illustrates a lightbox screen effect that’s triggered by clicking on the Featured Examples link at corehtml5canvas.com. Click on the image or go to the website to see the full effect.

In Gimp, I selected one of the various colors in the site’s background, and made that color fully transparent. Then I saved the resulting see-through background as a new image.

When you click Featured Examples, I change the visibility and opacity of a DIV that is overlaid exactly on top of the cover image, like this:

   this.featuredExamplesLink.onclick = function (e) {
      ...
      self.overlayDiv.style.display = ‘block';
      self.overlayDiv.style.opacity = 0;

      setTimeout ( function (e) {

         // The timeout is necessary because changing opacity to 0
         // and back to 1.0 on the same thread will not trigger
         // the DIV's associated CSS transition

         self.overlayDiv.style.opacity = 1.0;
       }, 50);
   };

I specify the background and a CSS transition for the DIV:

.overlay {
   ...
   background: url('images/see-through-background.png');
   ...
   -webkit-transition: opacity 3.0s;
   -moz-transition: opacity 3.0s;
   -o-transition: opacity 3.0s;
   transition: opacity 3.0s;
}

Finally, I display the carousel on top of the overlay DIV by giving the carousel a higher z-index.

Advertisements

• Posted in: HTML5 How To