Логотип меняет свой вид при скроллинге страницы

Существуют сайты, на которых с помощью css реализован любопытный эффект, а именно: при скроллинге страницы изображение (логотип) меняет свой внешний вид.

Если вы достаточно хорошо знаете css или исследовали некоторые сайты в CSS ZEN GARDEN, тогда вы, возможно, осведомлены о технике CSS, в которой используется свойство background-attachment.

Ниже приведено описание данной техники.

Во-первых, необходимо сделать два разных логотипа, цельную версию (справа на изображ.) и схематическую версию (слева на изображ.). Вот две эмблемы, с которыми я буду работать:

У основного блока сайта (container) неподвижным (fixed) фоном будет наш схематический логотип.

CSS

#container { 
background: transparent url(images/demologo-wired.jpg) 
                              fixed no-repeat 30px 30px 
}

Значение fixed свойства background-attachment, стоит перед значением свойства background-repeat; хотя порядок при перечислении значений свойств семейства background значения не имеет. Фон сдвинут на 30px вниз относительно верха и на 30px вправо относительно левой стороны блока.

Внутри блока header расположим ссылку и зададим ей display: block. Цельный логотип сделаем фоном блока header, так чтобы фон охватывал ссылку.

CSS

#header 
{ background: #bbd5fd url(demologo.jpg) fixed no-repeat 30px 30px;
overflow: hidden; 
padding: 30px 0 30px 30px; 
height: 138px; 
} 
             
a#logo 
{ display: block; 
width: 138px; 
height: 138px; 
float: left; 
} 

Еще раз, фон зафиксирован (относительно блока header) и расположен в 30px от верхнего края и левой стороны, таким образом, положение фона соответствует положению схематичного логотипа. Если мы не зафиксируем (fixed) схематичное фоновое изображение, то логотип скроется как обычный элемент, и эффект будет потерян.

Большая часть CSS создана. Однако при скроллинге страницы вниз логотип перестает быть кликабельным. Эту проблему можно решить, добавив фиксированный блок с якорем. Это немного утяжелит ваш код, но совсем не намного.

С помощью данной техники вы сможете создать логотип, которые меняется при скроллинге страницы. Следует отметить, что данная техника работает только в том случае, если существует пустое пространство слева или, если измененный логотип не влияет на внешний вид и читабельность страницы.

Недостаток данного метода в том, что он не работает в IE6, хотя это легко исправить, создав код (хак) непосредственно для IE6.

Источник www.impressivewebs.com