Прозрачный PNG, реагирующий на сайты, слайдеры изображений и контент

Question

Я только что наткнулся на этот сайт парней: http://mantia.me/

У него есть потрясающий логотип, который реагирует на контент, отображаемый в данный момент на сайте, если вы ждете на его домашней странице, логотип меняется с показом слайдов изображений. Мне было интересно, если кто-нибудь знает, как повторить эффект. Я предполагаю, что это прозрачный png с вращающимся основным фоном, тогда сайт расположен сверху, но я, вероятно, ошибаюсь.

Есть предположения, как сделать что-то похожее?

Изображения:

Answer 1

Это действительно просто то, что он имеет. Как вы упомянули, это прозрачный PNG, который соответствует заданному фону (в данном случае белый) и помещает его поверх него с помощью z-index. Остальное - просто jQuery с fadeIn и 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>

См. Скрипка .