Сегодня я расскажу, как создать затухающую шапку на jQuery. Такой эффект придаст динамики и привлекательности шапке на Вашем сайте.
Шаг 1. Скачаем и подключим jQuery к нашему документу:
Code
<script type="text/javascript" src="jquery.js"></script>
Между тегами
или в отдельном 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>
В начале тела документа (после открывающегося тега
) вставим блок шапки с идентификатором header, в качестве ссылки укажем произвольный текст (в данном случае Header)Code
<div id="header"><a href="">Header</a></div>
Источник: ruseller.com
