5 025 Скрипты / Animation

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

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

HTML

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

<div class="effect-container">
    <div class="effect-details">startEffect : grayscale, hoverEffect : normal (для HTML5 браузеров)</div>
    <img class="img-style row6" src="img/gallery-images/6_1.png"/>
    <img class="img-style row6" src="img/gallery-images/6_2.png"/>    
</div>
<div class="effect-container">
    <div class="effect-details">startEffect : normal, hoverEffect : popout</div>
    <img class="img-style row1" src="img/gallery-images/1_1.png"/>
    <img class="img-style row1" src="img/gallery-images/1_2.png"/>
</div>
<div class="effect-container">
    <div class="effect-details">startEffect : overlay, hoverEffect : sliceDown</div>
    <img class="img-style row2" src="img/gallery-images/1_1.png"/>
    <img class="img-style row2" src="img/gallery-images/1_2.png"/>
</div>
<div class="effect-container">
    <div class="effect-details">startEffect : transparent, hoverEffect : boxRandom</div>
    <img class="img-style row3" src="img/gallery-images/3_1.png"/>
    <img class="img-style row3" src="img/gallery-images/3_2.png"/>
</div>
<div class="effect-container">
    <div class="effect-details">startEffect : overlay, hoverEffect : foldLeft</div>
    <img class="img-style row4" src="img/gallery-images/4_1.png"/>
    <img class="img-style row4" src="img/gallery-images/4_2.png"/>
</div>
<div class="effect-container">
    <div class="effect-details">startEffect : transparent, hoverEffect : boxRainGrowReverse</div>
    <img class="img-style row5" src="img/gallery-images/3_1.png"/>
    <img class="img-style row5" src="img/gallery-images/4_2.png"/>
</div>

CSS

.adipoli-wrapper
{
    margin:auto;
    position:relative;
    display: inline-block;
}
.adipoli-wrapper>img
{
    position: absolute;
    z-index: 1;
}
.adipoli-before
{
    position: absolute;
    z-index: 5;
}
.adipoli-after
{
    position: absolute;
    z-index: 10;
}
.adipoli-slice {
    display:block;
    position:absolute;
    z-index:15;
    height:100%;
}
.adipoli-box
{
    display:block;
    position:absolute;
    z-index:15;
}

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

.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 эффектов:

$(function(){
    $('.row1').adipoli({
        'startEffect' : 'normal',
        'hoverEffect' : 'popout'
    });
    $('.row2').adipoli({
        'startEffect' : 'overlay',
        'hoverEffect' : 'sliceDown'
    });
    $('.row3').adipoli({
        'startEffect' : 'transparent',
        'hoverEffect' : 'boxRandom'
    });
    $('.row4').adipoli({
        'startEffect' : 'overlay',
        'hoverEffect' : 'foldLeft'
    });
    $('.row5').adipoli({
        'startEffect' : 'transparent',
        'hoverEffect' : 'boxRainGrowReverse'
    });
    $('.row6').adipoli({
        'startEffect' : 'grayscale',
        'hoverEffect' : 'normal'
    });
});


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

  • 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
Скачать 1775Загрузок 891,4 Kb
Демо

Комментарии

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

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