Показать Меню
falbar Hover Effect

«Дюжина» ховер эффектов в одном флаконе!

Hover Effect

Всем привет! Продолжаем развивать тему 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' – возможные эффекты (fade – плавное затухание картинки бекграунда и slide – эффект выдвигаемого блока);
  • speed: 150 – скорость нашей анимации в миллисекундах;
  • opacity: 1 – прозрачность (работает только с эффектом fade);
  • anchor_x: 'bottom' – выполнение анимации по горизонтали;
  • anchor_y: 'left' – выполнение анимации по вертикали;
  • hover_x: '0px' – горизонтальные наложения hover позиции;
  • hover_y: '0px' – вертикальные наложения hover позиции.

При известных вариациях настроек и CSS стилей могут получиться очень красочные Hover Effects, поэтому скачиваем архив и не боимся экспериментировать!

Подписаться на обновления

Комментариев еще не оставлено