Animate.css: Как добавить анимацию к элементам?

Animate.css: Как добавить анимацию к элементам?

Рассмотрим простейший способ как добавить анимацию к некоторым элементам страницы сайта.

Вы наверное уже обратили внимание как «дергается» ссылка «Помощь» в админке сайта, или кнопка в виджете сайдбара.

Проще это делать с помощью библиотеки animate.css, т.к. она уже есть в файлах системы, но подключена только в админке.

Первым делом подключим в head этот css файл:

<link rel="stylesheet" type="text/css" href="/templates/default/css/animate.css" />

Варианты анимации вы можете выбрать на странице библиотеки: daneden.github.io/animate.css

Теперь, чтобы при загрузке страницы элемент «анимировался» достаточно добавить ему класс, например «animated tada» как в примере с кнопкой справа. Здесь значение «tada» можно заменить на другое чтобы сменить анимацию.

Если нет желания править файлы шаблона для добавления таких «фишек», можно подключить css файл или js скрипт в компоненте SiteKreator.

Также, если вы не хотите править файлы шаблона для добавления классов для анимации, вы можете добавить на страницу jquery скрипт, который при загрузке страницы добавить к нужному элементу (селектору) необходимые классы. Например:

$(function(){
    $('.uwd_85 .donate').addClass('animated tada');
});
thumbs2
Поблагодарить:
автора записи
+3
01:12
699
RSS
22:44
а как сделать, чтобы анимация срабатывала только тогда, когда прокручиваешь страницу до анимированного элемента?
22:51
а еще заметил, что если проставляешь яваскриптом анимацию сразу двум элементам, то у первого элемента будет анимация, а у второго нет.
20:50
Все сделал проще и наверно гибче — создал Скин animate и в него все прописал!
В закладке CSS внес код animate.css взятый ЗДЕСЬ
В закладку HTML в HTML блок перед закрывающим тегом head внес код
<link rel="stylesheet" type="text/css" href="/templates/default/css/animate.css">

А в закладку JS вписал код
$(function(){
    $('.uwd_85 .donate').addClass('animated tada');
});

Класс, uwd_85, который у каждого свой (разные цифры) нашел так:
Ставлю курсор на кнопку доната и в меню по правой клавише выбираю Инспектировать (у вас это может называться иначе, зависит от браузера) и смотрю какая цифра у класса. Меняю сохраняю — все работает!
Правда попробовал так же анимировать кнопки подписки, что то ничего не получилось.
20:56 (отредактировано)
Так и правильно, если пользоваться компонентом SiteKreator. Я писал более обобщенно. Тут есть СайтКреатороФилы которые почему то не знают и не верят что с этим компонентом проще и удобнее.
22:01
Можно ли анимировать и другие кнопки сайта и как это сделать! С кнопками Подписка ничего не получилось
22:12
Любой объект если у него есть нужный класс анимации будет «анимироваться». Хоть целый виджет.
js выш прописан для того чтобы присвоить этот класс не исправляя шаблон.
22:24
Для двух кнопок JS выглядит так
$(function(){
    $('.uwd_129 .donate').addClass('animated tada');
});
$(function(){
     $('.subscribe_wrap .style-svg').addClass('animated tada');
});

Где ошибка? Вторая кнопка не анимируется
22:28 (отредактировано)
$(function(){
    $('.uwd_129 .donate').addClass('animated tada');
    $('.subscribe_wrap .style-svg').addClass('animated tada');
});

.subscribe_wrap .style-svg — если только в этом селекторе, верно ли он указан, а так, должно работать.

или так:
$(function(){
    $('.uwd_129 .donate, .subscribe_wrap .style-svg').addClass('animated tada');
});
22:30
Работает же все у вас. Колокольчик дергается же.
23:01
И это вся анимация??? Не ткнули бы носом, не заметил бы…
Рассчитывал, что вся кнопка будет дергаться.
23:10 (отредактировано)
Если бы вместо .subscribe_wrap .style-svg написали бы .subscribe_wrap то задергалась бы вся кнопка
23:33
Мимо! Заработало так .subscribe_wrap
Как успел заметить, если неправильно выбран класс или прописан не так, то рядом с ним не появляется класс animated tada и после этого должен идти путь на кнопку.
В предыдущем варианте класс .style-svg уводил анимацию за запись с кнопкой, поэтому и не дергалась… нечему было дергаться…
23:50
А вот анимировать весь виджет не получается. Пробовал с тем что на главной «Это важно»
23:59
Есть! Заработало! yahoo
10:10
Читал раз 10, ничего не понял. Может есть скин для SiteKreator и как анимировать виджет подробнее. Спасибо.
11:26
А что именно не понятно?
1. Создаете скин, подключаете в его head <link rel=«stylesheet»…
2. В владке js пише код выше
3. .uwd_85 .donate — вместо этого селектор вашего виджета
11:57
3. .uwd_85 .donate — вместо этого селектор вашего виджета
это и не понятно
12:00 (отредактировано)
Например у логотипа селектор #logo

12:40
Как, например, сделать чтобы виджет «Кто онлайн» выезжал справа налево?
12:47
1. В настройках виджета во вкладке дизайн добавляете стиль, например move
2. Делаете вышеуказанное и указываете селектор .move
3. Ставите анимацию (название) какую нужно
18:18
+2
Скин animate.json yadi.sk/d/P8fPmgJE8SES_g.
В закладке JS 3 строчки 1-анимация донате, 2-анимация системной кнопки Подписаться и 3-анимация моего виджета на главной. Замените на свои.
08:48
Спасибо!
13:27
+1
Можно ли сделать чтобы при прокрутке страницы срабатывала анимация?
13:44
+1
Нужно использовать
 
<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>
 
13:57
14:05
перед head
и пример JS
$('#widget_wrapper_71').addClass('fadeInRight wow');
14:15
Добавил оба плагина для подключения в 1 клик в компоненте SiteKreator.
В след версии будут.
Спасибо за наводку.
16:13
При наведении курсора мыши это работает?
20:55
Если вы зададите действие анимации по наведению курсора то будет по наведению.
21:19
Следующим уроком напишу как делать анимацию объекта при наведении на него.
22:11
Отлично! Будем ждать.
22:12
Может тогда и отдельный урок про анимацию при прокрутке? smile
22:14
А по прокрутке разве есть вопросы?
07:31
А у вас есть такой урок?
14:04
Опишите подробнее что и когда хотите анимировать?

Бесплатнометр

Хотите поддержать выход и поддержку бесплатных дополнений для InstantCMS?
Установив бесплатное дополнение не забудьте оставить свой отзыв на форуме. Мне необходима обратная связь от вас.
InstantCMS (c) 2018 | Template create on SiteKreator addon