Реклама
timeweb
falbar

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

21 февраля 2015 1282 0

Продолжаем развивать тему 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, поэтому скачиваем архив и не боимся экспериментировать!

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