5 413 Скрипты / Animation

Adipoli - эффекты при наведении

Adipoli - jQuery плагин позволяющий производить над изображениями стильные эффекты при наведении на них мышкой.

HTML

Приведен пример из демо, хотя с помощью данного плагина можно создать более 20 эффектов наведения:

CSS

И дополнительно для демо:

.effect-container
{
    float: left;
    width: 100%;
    padding-top: 10px;
    padding-bottom: 10px;
    text-align: center;
}
.effect-container .img-style
{
    margin: 7px;
}
.effect-details
{
    font-family: 'Advent Pro', sans-serif;
    font-size: 20px;
    color: #666;
}

JS

Подключаем jQuery и плагин:

<script type="text/jаvascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="js/jquery.adipoli.min.js" type="text/jаvascript"></script>

И скрипт инициализации плагина. В данном случае для 6 эффектов:


Доступные опции:

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

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

  • transparent
  • normal
  • overlay
  • grayscale

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

  • normal
  • popout
  • sliceDown
  • sliceDownLeft
  • sliceUp
  • sliceUpLeft
  • sliceUpRandom
  • sliceUpDown
  • sliceUpDownLeft
  • fold
  • foldLeft
  • boxRandom
  • boxRain
  • boxRainReverse
  • boxRainGrow
  • boxRainGrowReverse
Скачать 1792Загрузок 891,4 Kb
Демо

Комментарии

  • Facebook
  • Вконтакте

Похожие статьи