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

1 апреля 2015 Антон Кулешов 1960 0

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

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

Социальные кнопки поделиться – пишем сами! Часть 2. Добавляем счетчик

10 июня 2015 Антон Кулешов

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

Всплывающие подсказки на чистом CSS

16 апреля 2015 Антон Кулешов

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

Прогресс бар заполнения формы

15 июня 2016 Антон Кулешов

Необходимость заполнения длинных форм, зачастую, очень не нравится пользователям. Чтобы как-то снивелировать негативный эффект можно прикрепить к форме анимированный прогресс бар её заполнения. Сегодня речь пойдёт об JavaScript библиотеке под названием fort.