С помощью нехитрой манипуляции, описанной в данном посте, вы сможете с помощью небольшого количества CSS-кода и пары строк кода на jQuery сделать очень красивый эффект черно-белого изображения.
Несмотря на то, что для страниц с большим количеством фотографий данный способ будет малоэффективным из-за проблем с производительностью (это по большей части касается такого замечательного браузера, как Internet Explorer), его можно с успехом применять в тех частях сайта, где такой эффект будет уместен (например с помощью такой технологии можно организовать красивейший просмотр ваших работ в портфолио, или каком-нибудь фотоальбоме).
Каркас из HTML
|
1 2 3 4 5 6 |
<ul class="gallery">
<li>
<a class="thumb" href="#"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Image Name</a></h2>
</li>
</ul> |
Стоит заметить, что каждое изображение обернуто в тег <span>. Данный тег необходим для того, чтобы была возможность отсечь только ту часть изображения, которая нам нужна (с помощью CSS-свойства overflow:hidden). Посмотрите на изображение ниже, чтобы лучше понять это:
Добавляем CSS
Стили у нас будут стандартными для практически любой галереи. Но за одним исключением – свойство overflow у элемента span будет установлено как hidden (об этом я писал выше).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 |
ul.gallery {
width: 600px;
list-style: none;
margin: 0; padding: 0;
}
ul.gallery li {
float: left;
margin: 10px; padding: 0;
text-align: center;
border: 1px solid #ccc;
-moz-border-radius: 3px;
-khtml-border-radius: 3px;
-webkit-border-radius: 3px;
display: inline;
}
ul.gallery li a.thumb {
width: 204px;
height: 182px;
padding: 5px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
ul.gallery li span {
width: 204px;
height: 182px;
overflow: hidden;
display: block;
}
ul.gallery li a.thumb:hover {
background: #333;
}
ul.gallery li h2 {
font-size: 1em;
font-weight: normal;
text-transform: uppercase;
margin: 0; padding: 10px;
background: #f0f0f0;
border-top: 1px solid #fff;
}
ul.gallery li a {text-decoration: none; color: #777; display: block;} |
jQuery – добавляем анимацию
Будем считать, что сама библиотека у вас уже подключена, поэтому перейдем сразу к делу.
Реализация нашего плана будет такова: мы постепенно затеним картинку (эффект FadeOut) и добавим к элементу <a> фоновое изображение. Используя CSS спрайты, мы спозиционируем изображение на “передний план” таким образом, чтобы черно-белая картинка стала видна нам.
Итак, код:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
$(document).ready(function() {
$("ul.gallery li").hover(function() { //При наведении мыши
var thumbOver = $(this).find("img").attr("src"); //Получить адрес картинки на сервере
//установить эту картинку как фон ссылки, в которой картинка находится
$(this).find("a.thumb").css({'background' : 'url(' + thumbOver + ') no-repeat center bottom'});
//Эффект FadeOut (прозрачность стремиться к 0)
$(this).find("span").stop().fadeTo('normal', 0 , function() {
$(this).hide() //Скрыть изображения после изменения прозрачности
});
} , function() { //когда мышь вышла за пределы изображения
//Восстановить прозрачность изображения
$(this).find("span").stop().fadeTo('normal', 1).show();
});
}); |
Ну вот собственно и все. Напоследок хочу привести демо-версию эффекта черно-белого изображения при помощи CSS и jQuery
FF 3.6 – не пашет )
Chrome 10 – не пашет =\
Chrome 10 – нестабильная версия, текущая стабильная на момент написания комента – 8-я. Так что ничего слышать не хочу.
на восьмом хроме не пашет
не пашет!
Все починено и работает!!! Кликаем по ссылке и радуемся!