Сайт ищет нового владельца по разумной цене :) По всем вопросам: promonik1@ya.ru, skype: nik-luck007, https://vk.com/promonik
2
Вы не авторизованы!
Присоединяйтесь к нашему сообществу :)
авторизация
Вакансии
На сайт требуется контент-менеджер
смотреть вакансии

Adipoli - эффекты при наведении на изображение

Украшения 2013-Мар-04 OkJkeee 2.4k 121 1


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;
}


javascript


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

Код
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
  <script src="js/jquery.adipoli.min.js" type="text/javascript"></script>


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

Код
<script type="text/javascript">
   
  $(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'
  });
  });
   
  </script>



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

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

Офф. страница плагина: http://jobyj.in/adipoli/

Источник: не указан
1 комментарий
avatar
1
Красивая штука, думаю в скором времени пригодится. Автор - Спасибо.
avatar