javascript - サイトの画像スライダーとコンテンツに反応する透明なPNG

Question

私はちょうどこの人のサイトに出くわしました：http：//mantia.me/

彼は、サイトが現在表示しているコンテンツに反応する素晴らしいロゴを持っています。彼のホームページで待つと、画像のスライドショーでロゴが変化します。誰かが効果を再現する方法を知っているかどうか疑問に思いました。マスターの背景が回転する透明なpngだと思いますが、サイトは上に重ねられていますが、おそらく間違っています。

似たようなものを作る方法について何か推測はありますか？

画像：

Answer 1

彼が持っているものは本当に簡単です。おっしゃるように、これは指定された背景（この場合は白）に一致し、その上に。を付けて配置する透明なPNGですz-index。残りはjQueryfadeInとfadeOut画像だけです。

画像のトランジションの上にpngを表示できます。

つまり、基本的には、幅と高さdivを設定する必要があります。position:relative次にdiv、jQueryスライドショーを含む別のデータをその中に追加し（これをチェックしてください：http：//medienfreunde.com/lab/innerfade/）、それを設定します。z-index:0次に、別のdiv（スライダーの上に表示されます）を追加し、backgroundよりz-index高い何かに0とあなたは行ってもいいです。

Answer 2

これが彼のやり方です：

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>

フィドルを参照してください。