Главная » 2009 » Июль » 4 » Затухающая шапка, очень красиво (Скрипты для ucoz)
04.07.2009, 19:38

Затухающая шапка, очень красиво



Пример

Шаг 1.

Скачаем и подключим jQuery к нашему документу:

Code
<script type="text/javascript" src="jquery.js"></script>

Шаг 2.

Между тегами или в отдельном CSS файле пропишем следующие стили:

Code
body {  

background: #534741;

font-family: Helvetica, Arial, sans-serif;

color: #fff;

width: 810px;

margin: 0 auto;

padding-bottom: 50px;

}

#header {

margin: 0;

padding: 0;

text-indent: -9999px;

width: 400px;

height: 225px;

position: relative;

margin-left: -1em;

background: url(header.jpg) no-repeat;

}

#header a {

position: absolute;

top: 0;

left: 0;

width: 400px;

height: 225px;

display: block;

border: 0;

background: transparent;

overflow: hidden;

}

#header .fake-hover {

margin: 0;

padding: 0;

width: 400px;

height: 225px;

display: block;

position: absolute;

top: 0;

left: 0;

background: url(header.jpg) no-repeat 0 -240px;

}

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

Для шапки нужно использовать картинку, которая условно состоит из двух частей: верхняя половина - это картинка до наведения мышью, а нижняя - после.

В нашем случае используется картинка размером 400х450 px. Следовательно, половина ее высоты равна 225 px (эта высота прописана в стиле #header).

И если высота Вашей картинки будет другая, то ее нужно изменить в CSS стиле, а также изменить отступ no-repeat 0 -240px в стиле #header .fake-hover, умножив половину высоты картинки на -1,0667.

Т.е. 225 х -1,0667 = -240

Если же половина высоты картинки будет 150 px, то:

150 х -1,0667 = -160

Шаг 3.

Между тегами пропишем следующий скрипт:

Code
<script type="text/javascript">

  var Header = {

addFade : function(selector){

$("<span class=\"fake-hover\"></span>").css("display", "none").prependTo($(selector));  

$(selector+" a").bind("mouseenter",function(){

$(selector+" .fake-hover").fadeIn("slow");

});

$(selector+" a").bind("mouseleave",function(){

$(selector+" .fake-hover").fadeOut("slow");

});

}

};

$(function(){

Header.addFade("#header");

});

</script>

Шаг 4.

В начале тела документа (после открывающегося тега ) вставим блок шапки с идентификатором header, в качестве ссылки укажем произвольный текст (в данном случае Header)

Code
<div id="header"><a href="">Header</a></div>

Вот и все! Надеюсь, этот эффект пригодится Вам в дизайне сайтов!

Материал взят с сайта infoscript.ru
Внимание! Копирование данного материала запрещено без указания ссылки на сайт Infoscript.ru
Источник/Автор: www.ruseller.com
Категория: Скрипты uCoz | Просмотров: 3525 | Добавил: antisept | Рейтинг: 5.0/2 |
Теги: Затухающая шапка, очень красиво
Всего комментариев: 2
0  
1 MrChert   (08.11.2010 16:26) [Материал]
Аватар пользователя
А может у кого-нибудь есть еще похожие "ляпы" (брызги) для такой вот шапки. Просто я надпись красиво сделаю, а эффект при наведении не придумаю. Можно ссылочку на урок фотошоп...

0  
2 MrChert   (08.11.2010 17:08) [Материал]
Аватар пользователя
Ну можно и так, реализовать... happy

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]