Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS (Часть 2)

Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS (Часть 2)

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

В комментариях были как положительные отзывы так и отрицательные. Вот некий Юрий возразил, что реализация никчемна и в ней много нюансов.

Я решил доработать свой метод и вот он перед Вами.

На мою публикацию Юрий написал, что:

... у тебя Картинка одна! сделать красивую анимацию не получиться это просто примитивно и все. в случае с двумя картинками есть поле для творчества.

Я ничего не доказываю, а показываю как сделать надо для того, что бы люди могли воплощать с ЭТИМ кодом гораздо больше чем простой сдвиг.

Всем только польза будет...

Основная претензия была, что нельзя было реализовать анимацию при наведение. В этом посте я постарался его разрушить.

Я не утверждаю, что это одна из лучших реализаций, но разбивать на 2 изображения и подставлять второе только после того как пользователь наведен на первое мышкой – это неправильно, так как у тех людей, кто сидит на медленном 3G-модеме, может заметить вашу подмену и лицезреть дерганье всего шаблона страницы.

Как это выглядит?

Сразу же хотелось показать как это работает. Выглядит конечный вариант вот так:

И при том при всем это чистый CSS, то есть во всех нормальных браузеров, вплоть до мобильных это будет отображаться так как Вы это запланировали.

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

В этом примере никто не отменял сложность создания такого изображения, зато без использования jQuery или Flash, все на чистом CSS. Лучше пусть заморачивается вебмастер, чем испытывает дискомфорт Ваш посетитель.

Как это работает?

Как я уже написал выше и в том посте, оригинал изображения выглядит так:
Эффект смены картинки, при наведения мышкой на ссылку c помощью CSS (Часть 2)

Ваш посетитель заходя на сайт, видит только верхнюю часть изображения, а когда наводит на него, ему показывается нижняя часть. Все гениальное просто.

Весь код CSS выглядит примерно так и его нужно вставить в ваш CSS-файл или вставить выше вывода изображения:

#rollover {
 background: url(/images/logo_fd.png);
 display: block;
 width: 80px;
 height: 74px;
 }
 #rollover:hover {
 background-position: 0 -74px;
 }

В том месте, где хотите его непосредственно вывести, нужно вставить вот этот DIV:

<div id="rollover"></div>

И всего делов-то.

P.S. Кстати, недавно нашел очень качественный ресурс, на котором много всякого по программингу. Вообще на coding4.net – создание сайтов на asp.net mvc, но очень много полезной информации для тех кто хочет научиться программировать на ASP.NET.

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

  1. Танюша опубликовал комментарий 27 Октябрь 2015, 18:58 #

    По вашему методу сделала – все получилось! А вот читала на другом ресурсе – ну не получается и все! Может, расписано не ясно для меня было, не знаю)))

    | Ответить
Имя
e-mail
Сайт
Текст комментария: