Анимированная тень через плагин Shadow animation на jQuery

Разместил: Apocalypse
Опубликовано: 5 июля 2015

Очень интересный плагин, который позволяет придать тени под объектами более реалистичный вид Для начала посмотрите ДЕМО Установка: 1#: После /head на нужных страницах вставляйте:

<link href="/css/demo.css" rel="stylesheet">
<script src="/js/jquery.animate-shadow-min.js"></script>

1 2	<link href="/css/demo.css" rel="stylesheet"> <script src="/js/jquery.animate-shadow-min.js"></script>

2#: Блоки с тенью оформляются следующим способом:

<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>

<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 файл из прикреплённого архива в папку js и CSS файл в папку css

Автор публикации

не в сети 5 месяцев

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Комментарии: 393Публикации: 1096Регистрация: 27-08-2018

Метки: jQuery Shadow animation Анимированная Тень

Apocalypse

Я не понял вашего вопроса, но постараюсь на него ответить...

Вам может также понравиться...

0 Комментарий

Старые

Межтекстовые Отзывы

Посмотреть все комментарии

Всевидящее око

Новый комментарий от пользователя Эдуард: «Забыл добавить. Снег появляется то в футере (когда ставил перед закрывающим тегом body), то наоборот почему-то в самом верху (причем сам блог сдвигался вниз), когда ставил его после открывающего тега, как было указано в статье.» в материале Приятный Новогодний снежок на HTML5 Canvas

2024-12-29 16:26:03

VVL99

Всех с новым годом!

2025-01-02 17:46:18

Всевидящее око

Новый комментарий от пользователя Acıbadem su kaçak tespiti: «Acıbadem su kaçak tespiti Kadıköy su kaçağı tespiti: Kadıköy’deki su sızıntılarında noktasal tespit için yanınızdayız. https://www.grand-indonesia.com/author/kacak/» в материале Фон из анимированных самолётов на CSS3

2025-01-02 18:25:49

Всевидящее око

Новый комментарий от пользователя elavil for anxiety reviews: «elavil for anxiety reviews

elavil for anxiety reviews» в материале Крутой анимированный индикатор загрузки в виде снежка на CSS3

2025-01-03 19:51:39

Всевидящее око

Новый комментарий от пользователя how long can you take elavil: «how long can you take elavil

how long can you take elavil» в материале След за курсором из частиц на HTML5 Canvas

2025-01-05 15:00:13

stalker1313

Привет. Может кто-нибудь знает почему не получается зайти на сайт playstation через vpn и как это исправить? Без vpn захожу на сайт, но не могу зарегать акк.
Ошибка:
Страница недоступна
Сайт playstation.com не отправил данных.
ERR_EMPTY_RESPONSE

2025-01-08 18:00:15

Al-Sher

@stalker1313, Привет. Возможно впн блочит их сайт. Попробовал со своим личным впном - сайт открывается

2025-01-08 19:56:24

stalker1313

@Al-Sher, бесплатный, хороший vpn посоветуете?

2025-01-08 22:01:35

stalker1313

Можно как-то сохранить все статьи с сайта wp в отдельные вордовские документы?

2025-01-09 19:50:03

Al-Sher

@stalker1313, Увы, я уже давно пользуюсь только личным впн на своей впске)

2025-01-10 20:41:42

......

Для публикации сообщений в чате необходимо авторизоваться