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
Ссылки
