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


ПРИМЕР

Шаг 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>

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

Опубликовал: TIK_TAK в категорию Скрипты и хаки для ucoz - Дата добавления: 19.10.2017, 10:00

Теги: очень, шапка, Скрипты и хаки для ucoz, Красиво, Затухающая

Сообщить о новой версииПроблемы со скачиванием?
Источник/Автор: http://ruseller.com
ССЫЛКИ

Комментарии:


Оставить комментарий

Имя *:
Email *:

Все смайлы | Регистрация

Популярные файлы

Друзья сайта

Всё для Counter-Strike 1.6

Теги

  
     

Вход на сайт

     
     

Информация:

Онлайн всего: 1
Гостей: 1
Пользователей: 0

Статистика