Безусловно много сайтов, которые применяют в своем сайте всякие фишки и к ним отношу Эффекты
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
Не выводит сообщения в чат.
Игор приносим свои извинения за предоставленные не удобства, сайт проходит перекваливфикацыю, по эт
Спасибо, вы не виноват, эта все zornet не указывает авторов и источник, если ему так написать то ба
