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
Поблагодарить:
автора записи
+2
01:12
440
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?
vladimird 100 руб. 22.01
482 10 руб. 22.01
482 10 руб. 21.01
Гость 10 руб. 21.01
482 10 руб. 20.01
482 15 руб. 19.01
Гость 5 руб. 17.01
красн 200 руб. 16.01
vladimird 200 руб. 10.01
unlocked 50 руб. 09.01
lakomet 100 руб. 09.01
EAstomin 1 руб. 09.01
EAstomin 1 руб. 08.01
Гость 1 руб. 08.01
Марина 5 руб. 07.01
Марина 5 руб. 07.01
EAstomin 1 руб. 07.01
Гость 15 руб. 05.01
Марина 20 руб. 04.01
Марина 15 руб. 03.01
Марина 15 руб. 02.01
vikont 500 руб. 31.12
vladimird 100 руб. 29.12
vikont 250 руб. 28.12
vladimird 100 руб. 28.12
Milyana 150 руб. 27.12
shuma 15 руб. 26.12
lakomet 50 руб. 25.12
Лиловая Лиса 100 руб. 25.12
vladimird 100 руб. 24.12
Рухнул сайт? Пишите на форуме, и не забудьте скопировать текст-ошибки и (или) подробно описать проблему.
InstantCMS (c) 2018 | Template create on SiteKreator addon