Продолжаем «наводить красоту» на наших сайтах, и сегодня поговорим о плагине под названием 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, чтобы отделить их от других на странице:
<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>
Вызываем плагин после загрузки страницы:
$(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, можно увидеть в материале демо, как и выше описанный пример.