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

21 февраля 2015 Антон Кулешов 1111 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
Читайте далее

1em или 16px

31 октября 2015 Антон Кулешов

1em – высота шрифта заданная в браузере по умолчанию или настроенная пользователем, и, на мой взгляд, начисто забытая верстальщиками, а зря! Конечно, на это есть и некоторые причины: пиксели привычнее, ощутимее и не зависят от настроек браузера. Вот мы и лепим их везде, борясь за то, чтобы наши проекты везде и всегда выглядели одинаково, только вопрос, а надо ли? Да, кроссбраузерность это хорошо и к этому надо стремиться, но согласитесь – рассматривать страничку в 1024рх на мониторе в 24 дюйма как-то совсем не очень, сайт сразу теряет свой колорит. Даже так называемая «резиновая» верстка не спасает ситуацию, а почему? Да потому, что хоть и задали ширины в процентах, а шрифты и отступы оставили в px, и таких примеров кучи!

Социальные кнопки поделиться – пишем сами

3 мая 2015 Антон Кулешов

С ростом популярности социальных сетей и сервисов кнопки поделиться прочно укоренились на страницах большинства сайтов. Имея свою колонку на «Фейсбуке» или «Вконтакте», человек волей-неволей собирает на неё интересующий его материал, так почему бы не предложить ему поделиться статьёй и с нашего сайта. Для этих целей сегодня мы и попытаемся реализовать функционал кнопок поделиться для основных соцсетей.

Растянутый на всю ширину HTML список

20 июля 2014 Антон Кулешов

Использовать HTML список можно по разному, но, несомненно, чаще всего его применяют при создании меню для сайта. Дизайнерская мысль в этом направлении бьет ключом, а верстальщику приходится приспосабливаться, орудуя не столь многочисленным набором инструментов. С проблемой красивого вписания меню в уже заданные габариты, я и столкнулся совсем недавно.