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

Adipoli – красивое представление ваших изображений

Hover effects Adipoli

Продолжаем «наводить красоту» на наших сайтах, и сегодня поговорим о плагине под названием Adipoli, при помощи которого можно создавать красивые hover effects.

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

Подробнее остановимся на настройках плагина:

  • startEffect – настройка отвечает за начальное состояние картинки (до наведения на нее курсора мыши);
  • hoverEffect – собственно, сам ховер эффект;
  • imageOpacity – задаёт уровень прозрачности изображения или затемнения соответственно, используем с эффектами transparent или overlay для опции startEffect;
  • animSpeed – назначает скорость анимации;
  • fillColor – цвет фона наложения;
  • overlayText – html-текст, который будет по умолчанию показан на наложении;
  • textColor – цвет текста, если таковой будем выводить;
  • slices – число кусочков на которое будет разбиваться изображение при использовании slice анимации;
  • boxCols – количество столбцов, если применяем box-анимацию;
  • boxRows – количество строк соответственно;
  • popOutMargin – отступы для изображения при опции popout;
  • popOutShadow – протяженность теней при использовании popout изображения. Тени работают только в браузерах поддерживающих свойство CSS text-shadow.

Начальные эффекты:

  • transparent – изображение полупрозрачное;
  • normal – изображение стандартное, т.е. какую картинку положили – такую и увидели;
  • overlay – изображение затемнено;
  • grayscale – изображение в серых тонах.

Эффекты при наведении:

  • normal – возвращает изображение к его естественному состоянию;
  • popout – приближает изображение к пользователю, объемность создается при помощи возникающей тени у блока;
  • sliceDown – начальное состояние изображения дробиться на кусочки и скатывается в указанном направлении;
  • sliceUp;
  • sliceUpRandom;
  • sliceDownLeft;
  • sliceUpLeft;
  • sliceUpDownLeft;
  • sliceUpDown;
  • fold – эффект в виде занавеса или жалюзи;
  • foldLeft;
  • boxRandom – эффект чем-то похож на slice, основное отличие в том, что разбиение изображения производится точно по указанному количеству строк-столбцов;
  • boxRain;
  • boxRainReverse;
  • boxRainGrow;
  • boxRainGrowReverse.

Теперь рассмотрим пример добавления и работы с плагином. Для того чтобы добавить к себе на страницу красивые ховер эффекты, необходимо подключить jQuery библиотеку и файлы плагина.

<link href="css/adipoli.css" rel="stylesheet" type="text/css"/>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="js/jquery.adipoli.min.js" type="text/javascript"></script>

Теперь добавляем картинки, на которые будут применяться ховер эффекты. Для этого им дописываем класс adipoli, чтобы отделить их от других на странице:

<img class="adipoli" src="img/row1_1.jpg" alt="hover effects adipoli"/>
<img class="adipoli" src="img/row1_2.jpg" alt="hover effects adipoli"/>
<img class="adipoli" src="img/row1_3.jpg" alt="hover effects adipoli"/>

Вызываем плагин после загрузки страницы:

$(function(){

	$(".adipoli").adipoli({
		startEffect: "overlay",
		hoverEffect: "boxRain",
		imageOpacity: 0.4,
		animSpeed: 400,
		fillColor: "#3caa3c",
		boxCols: 7,
		boxRows: 4
	});
});

В этом примере начальным эффектом является картинка, с наложенным на неё фоном (overlay), а при наведении, этот фон будет плавно исчезать при помощи box анимации (boxRain). Так же добавлен цвет фона fillColor, изменена прозрачность imageOpacity и число box-ов. Тут следует отметить, что при указании boxCols и boxRows надо быть крайне внимательными, так при больших числах браузер будет подвисать и даже зависать. Плагин сам создает все ему нужные элементы, не затрагивая других, что весьма удобно и позволяет без лишней головной боли прикрутить скрипт к уже обросшим контентом страницам. Другие эффекты, которых можно добиться при использовании Adipoli, можно увидеть в материале демо, как и выше описанный пример.

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

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