Core HTML5 Canvas

by David Geary

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 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) {
      ... = ‘block'; = 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
 = 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.


Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: