Продолжаем развивать тему hover effects и обратим наше внимание на весьма интересный плагин на jQuery, при помощи которого можно реализовать кучу различных эффектов ховера.
В приведенных в демо примерах используются ховер картинки, при наведении на которые, появляется описание в различных вариациях. Структуру HTML можно менять, к примеру, вместо div прописать ссылки, главное - сохранять классы.
Подключаем файлы:
<link href="mosaic.css" rel="stylesheet" type="text/css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="mosaic.1.0.1.min.js" type="text/javascript"></script>
HTML структура выглядит так:
<div class="mosaic-block circle">
<div class="mosaic-overlay">
</div>
<div class="mosaic-backdrop">
</div>
</div>
Как я уже упомянул, не обязательно использовать структуру из div, плагин может работать практически со всеми тегами. Обратите внимание на классы:
- mosaic-block - класс для блока-контейнера, прописывая его, даем браузеру понять, что отсюда начнется отработка плагина;
- circle - класс, который будем использовать для назначения эффектов ховера, его придумываем сами и применяем при задании функции JavaScript;
- mosaic-overlay – в блок с этим классом помещаем контент для hover effect, который будет появляться при наведении;
- mosaic-backdrop – сюда кладем нашу красивую картинку или анимашку, ну или чего-нибудь еще.
Вызываем плагин:
$(function(){
$(".circle").mosaic({
opacity: 0.8
});
});
У плагина есть свои настройки:
- animation – возможные эффекты (fade – плавное затухание картинки бекграунда и slide – эффект выдвигаемого блока);
- speed – скорость нашей анимации в миллисекундах;
- opacity – прозрачность (работает только с эффектом fade);
- anchor_x – выполнение анимации по горизонтали;
- anchor_y – выполнение анимации по вертикали;
- hover_x – горизонтальные наложения hover позиции;
- hover_y – вертикальные наложения hover позиции.
При известных вариациях настроек и CSS стилей могут получиться очень красочные hover effects, поэтому скачиваем архив и не боимся экспериментировать!