Эффекты 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 5 | |
|
| |
