Главная » Файлы » Прочие скрипты » 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
Категория: jQuery | Добавил: Apocalypse | Теги: CSS, Тень, Shadow, Оживляем, Через, на, плагин, JQuery, animation
Просмотров: 292 | Загрузок: 0 | Рейтинг: 0.0/0
Всего комментариев: 0
Имя *:
Email: