» »

Эффекты CSS наведении на изображения для uCoz


Эффекты CSS наведении на изображения для uCoz

Безусловно много сайтов, которые применяют в своем сайте всякие фишки и к ним отношу Эффекты CSS наведении на изображения для uCoz где присутствует красивое и в своем роде оригинальная комбинация. Это когда вы идите к примеру затемненную картинку и наводите на ее и как шторы вся тень скрывается и это очень красиво смотреться и можно поставить на вид материала. А если у кого подключен модуль фотографий, там это лучше применить, но с начало нужно посмотреть демонстрацию на все их, что вам и представляю.

Всем доброго времени суток! Не так давно мы уже устанавливали себе эффекты для изображений Коллекция CSS3 эффектов, но тогда у нас эффекты работали только на CSS3 стилях. В этот раз тоже не менее интересные эффекты но в этот раз один работают при помощи CSS стилей и jQuery.
Данный пример скрипта для ваших сайтов приведён в пяти вариантах, но можно настраивать и более двадцати эффектов но об этом я напишу в самом низу темы после того как мы установим эти пять эффектов.

Установка эффектов для изображения на сайтах

В первую очередь как и всегда вам нужно скачать архив и распаковать его а затем загрузить папку css и js в файловый менеджер вашего сайта.
После этого вам нужно установить HTML код данного скрипта, где написана ссылка или код изображения в то место прописываем путь до изображения которое нужно выводить или вставить код который выводит ваши изображения на сайте.

HTML код

Код
<div class="effect-container">
  <div class="effect-details">startEffect : normal, hoverEffect : popout</div>
  <img src="ссылка или код изображения" class="img-style row1"/>
  </div>

  

Что бы установить эффект один из примеров на демо страницы вам нужно в HTML коде заменить row1 на row2 или row3 и так далее.

Далее в нижнюю или в верхнюю часть сайта вставьте ниже указанный код, но лучше всего прописать его на всех страницах дизайна перед тегом /body того модуля где вы планируете настраивать эффекты.

Код
<link href="/css/adipoli.css" rel="stylesheet" type="text/css"/>
<script src="/js/jquery.adipoli.min.js" type="text/javascript"></script>
  <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


28.09.2015 Загрузок: 5 Просмотров: 744 Комментарий: (5)

Поделиться в социальных сетях

Материал разместил

Комментарий: 5
kredit-oformi
kredit-oformi 29.09.2015 00:261
0
прикольные плюшки))
Kosten
Kosten 29.09.2015 00:322
+1
Но они только идут в темном оттенке, а значит им место на светлом фоне.
AnTron
AnTron 29.09.2015 04:233
0
Посмотрел все эффекты и немного поправлю, они и на темный дизайн подойдут. Но спрашивается зачем они в материале, как написано виде его. Можно понять и установить к примеру на фотоальбом и они там прекрасно будут смотреться. Здесь на сайте есть светлый эффект вил материала, но он почти не заметный, а там слишком в глаза бросается и думаю весит будет хорошо, так как уже было сказано, все красивое всегда много весит и сайт подгружает этим.
Kosten
Kosten 29.09.2015 07:424
0
AnTron, но не разу не видел как на вид материала и комментариев также к нему, чтоб были такие эффекты. Даже не могу представить кроме фотоальбома, куда можно поставить.
Kosten
Kosten 29.09.2015 07:445
0
Просто есть сайты, где только реально изображение, это от обои на рабочий стол или Ava со смайлом, вообщем больше картинок, чем самого описание к ним.
avatar