Эффект плавного перехода от черно-белого к цветному изображению с помощью jQuery

Эффект плавного перехода от черно-белого к цветному изображению с помощью jQuery

Не так давно кто-то спросил "Как мне сделать при наведении на фото эффект перехода от серого изображения к цветному?». В этом уроке я покажу вам, как это можно сделать с помощью двух отдельных изображений в сочетании с JQuery.

Об эффекте

Эффект довольно прост, его в основном создают два изображения, расположенные друг на друге посредством CSS. Когда пользователь помещает курсор на изображении, с помощью JQuery верхнее изображение исчезает, и появляется цветное. Такого же эффекта можно добиться на HTML5, но я уверен, что потребуется намного больше кода для этого, в будущем я может коснусь этой темы.

Приступаем к работе...

Создайте новый HTML-файл с подключением библиотеки JQuery и прилагаемыми в архиве стилями

Code

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">

<title>Greyscale To Color jQuery Transition</title>

<link href="styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

</head>
<body>
<img src="file:///C|/Users/gaffer/Desktop/greyscale_color_transition/01.gif" width="580" height="600">
</body>
</html>

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

Задайте каждому цветному изображению класс "color", а каждому черно-белому изображению класс «grey». Код должен выглядеть следующим образом.

Code

CSS стили

Добавьте следующие стили CSS

Code

.gallery li {
  float: left;
  margin-right: 20px;
  list-style-type: none;
  margin-bottom: 20px;
  display: block;
  height: 130px;
  width: 130px;
  position: relative;
}

img.grey {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
}

img.color {
  position: absolute;
  left: 0; top: 0;
}

Стили для элементов списка (.gallery li) позиционируют их в ряд, важную роль здесь играет "position: relative", без этого изображения в галерее будут просто налазить друг на друга.

Это набор наиболее важных стилей для изображений.

JQuery

Создайте пустой .js файл, затем скопируйте и вставьте код.

Code

$(document).ready(function(){
$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},
function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

Сохраните .js файл как "transition.js" в папку под названием "js". После сохранения подключите ссылку на js файл в секции HEAD HTML-файла.

Code

В данном коде jQuery показано, что как только вы наводите курсор мыши на изображение с классом "grey", уменьшается непрозрачность до 0%, показывая цветное изображение внизу.

Code

$(document).ready(function(){
$("img.grey").hover(
function() {
$(this).stop().animate({"opacity": "0"}, "slow");
},

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

Code

function() {
$(this).stop().animate({"opacity": "1"}, "slow");
});
});

Заключение

Так что вы думаете? Вы бы использовали эту технику в своих проектах? Позвольте мне узнать в комментариях ниже.

Источник
Перевод и описание: PS-Studio.Info

Ссылка:

BB-код:

HTML-код:

Ещё по теме:

Всего комментариев: 6

Понравилось: +1

6 saw 2011-10-21, 20:55

в решении, представленном на сайте,вся соль заключается в плавном переходе

Нет оценки: 0

5 testus 2011-10-21, 05:27

Спасибо, я нашёл чуть другое решение

Code

Но и вашему решению я найду применение =)

Нет оценки: 0

4 saw 2011-10-20, 21:04

к сожалению, видимо авторесайз возможен только скриптом и то скорее на php, а так средствами ucoz можно лишь выставить в настройках модуля размеры мини-изображения ,к примеру, те же 130х130 и метод: "Обрезание фото", но такая установка будет действовать только на вновь добавленные фото.

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

Нет оценки: 0

3 testus 2011-10-20, 12:41

Да, на uCoz всё работает замечательно со своей библиотекой. Только у меня ещё 1 вопрос, по поводу размера картинок. В файле .css прописано height: 130px; width: 130px; так вот, пока я не прописал конкретный размер картинки оно было криво, дело в том что многие картинки бывают других размеров, как тогда быть? Пожно ли как то решить эту проблемку?

Понравилось: +1

2 saw 2011-10-19, 17:47

на ucoz не тестировал,не знаю,но думаю,что это <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> подключать не нужно будет, там есть своя подключенная библиотека jquery 1.6.1

насчёт картинок, их размеры могут быть другими,главное чтобы размеры черно-белого и цветного варианта совпадали

Нет оценки: 0

1 testus 2011-10-19, 17:29

Отличный скрипт, только у меня вопрос, на uCoz нужно подключать это <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
И картинки должны быть все только определённого размера? например как в примере только 130х130 ?

Метки

Опрос: Чего добавлять больше?

Результаты опроса

Главная » 2011 » Октябрь » 19 » Эффект плавного перехода от черно-белого к цветному изображению с помощью jQuery

Эффект плавного перехода от черно-белого к цветному изображению с помощью jQuery