Search code examples
javascriptcssslideshowtransparentgraphical-logo

Transparent PNG Reacting to Sites Image Sliders and Content

I just stumbled across this guys site: http://mantia.me/

He has an awesome logo that reacts to the content the site is currently showing, if you wait on his homepage the logo changes with the slide show of images. I was wondering if anyone knows how to replicate the effect. I'm guessing it's a transparent png with a rotating master background then the site is layered on top, but I'm probably wrong.

Any guesses on how to make something similiar?

Images:enter image description here enter image description here

Solution

  • It's really simple what he has. Like you mention it's a transparent PNG that matches the given background ( in this case white ) and places it on top of it with z-index. The rest is just jQuery with fadeIn and fadeOut images.

    You can view the png on top of the image transitions. enter image description here

    So basically you just need a div with position:relative set the width the height of it; then add another div inside it which has the jQuery Slideshow (check this out: http://medienfreunde.com/lab/innerfade/), set it a z-index:0 Then add another div (which will go on top of the slider) and add it a background with z-index to something higher than 0 and you're good to go.