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