Geek asks and answers

Transparent PNG Reacts to image sliders and content

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

It has a wonderful logo that responds to the content that is displayed on the site if you are waiting for a logo on your home page, changing it with a slide show of images. I was wondering if anyone knows how to copy the effect. I assume that this is a transparent png with a rotating background, then the site is overlaid on top, but I'm probably wrong.

Any guesses on how to do something similar?

Images: enter image description hereenter image description here

+3
source share
2 answers

, . , PNG, ( ) z-index. - jQuery fadeIn fadeOut.

png . enter image description here

, div position:relative ; div , - jQuery ( : http://medienfreunde.com/lab/innerfade/), z-index:0 Then div ( ) background z-index - , 0, .

+6

:

HTML

<div id="content">
    <div id="feature"></div>
    <div id="navigation"></div>
</div>

CSS

#content {
    position: relative;
    width: 800px;
    margin: 64px auto;
    font: normal 13px/16px "myriad-pro-1","myriad-pro-2", sans-serif;
    color: #404040;
}

#navigation{
    position: absolute;
    z-index: 1000;
    top: 0;
    left: 0;
    width: 800px;
    height: 46px;
    background: transparent 
      url(http://mantia.me/wp- content/themes/minimalouie/img/nav.png) 
      no-repeat top left;
}

#feature {
    width: 800px;
    height: 466px;
    overflow: hidden;
    background-color: aqua;
}

img #feature.

<div id="feature">
    <img src="http://mantia.me/images/supermariobros_large.jpg" 
      alt="Super Mario Bros.">
</div>

. fiddle.

+1

More articles:


All Articles