| Главная » Файлы » Прочие скрипты » jQuery |
Оживляем тень через CSS и плагин Shadow animation на jQuery
| 23.06.14, 09:37:36 | |
 Очень интересный плагин, который позволяет придать тени под объектами более реалистичный вид Для начала посмотрите ДЕМО Установка: После /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> Внимательно изучите код, чтобы понять, как применять эти типы анимации к другим объектам. Так же изучите настройки каждой анимации Осталось лишь залить скрипт из прикреплённого архива в папку js и стиль в папку css Материал подготовлен Apocalypse | |
| Просмотров: 451 | Загрузок: 0 | | |
| Всего комментариев: 0 | |
|
| |