Страница 1 из 11
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Легкая анимация теней через CSS и jQuery
Легкая анимация теней через CSS и jQuery
Kosten
Дата: Понедельник, 30.10.2017, 22:03 | Сообщение # 1
Администраторы
Сообщений:15806
Награды: 51


С помощью этого плагина jQuery вы можете расширить функцию анимации для поддержки свойства теневого окна CSS. Вы можете реанимировать цвет, также смещение радиуса размытия и безусловно распространения. Интересное приложение на плагин, с помощью которого веб мастер может придать элементам более реальный оттенок тени.



Приступаем к установке:

Скачиваем архив с папками js и стиль CSS и закидываем файловый менеджер.

После /head на нужных страницах вставляйте:

Код
<link href="/css/demo.css" rel="stylesheet">


Далее в самый низ после /body вставляйте:

Код
<script src="/js/jquery.animate-shadow-min.js"></script>


Устанавливаем там, где вам нужно, вообщем по месту, где будут присутствовать блоги с реалистичным оттенком.

Код
<div id="box1" onmouseover="$('#box1').stop().animate({shadow: '0 0 30px #44f'})" onmouseout="$('#box1').stop().animate({shadow: '0 0 10px #000'})">mouse over</div>

<div id="box2" onmouseover="$('#box2').stop().animate({shadow: '0 0 50px'}, 'fast')" onmouseout="$('#box2').stop().animate({shadow: '0 0 0'}, 'fast')">mouse over</div>

<div id="box3" onmousedown="$('#box3').stop().animate({shadow: '3px 3px 3px', top: 3}, 'fast')" onmouseup="$('#box3').stop().animate({shadow: '10px 10px 15px', top: 0}, 'fast')">click me</div>


[info]Как рекомендация, что нужно изначально внимательно изучить код, чтоб потом можно было применить на другие объекты на ресурсе. И не забываем, что у каждой анимации идет индивидуальная настройка.[/info]
Прикрепления: 6055661.png(17Kb) · sesktop.rar(1Kb)
Страна: (RU)
-SAM-
Дата: Вторник, 31.10.2017, 03:09 | Сообщение # 2
Проверенные
Сообщений:288
Награды: 14


Kosten, по поводу установки - стили подключаются перед /head, а скрипт - уже перед /body (но никак не после закрывающих). Эта ошибка написана у Apocalypse, материал которого опубликовали. Само решение из забугорных сайтов (плагин).

Страна: (UA)
-SAM-
Дата: Вторник, 31.10.2017, 03:15 | Сообщение # 3
Проверенные
Сообщений:288
Награды: 14


Собственно, вот Доступно только для пользователей (под хайдом).

Страна: (UA)
Форум про uCoz » Все для вебмастера » Начинающий Вебмастер » Легкая анимация теней через CSS и jQuery
Страница 1 из 11
Поиск: