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:
Поблагодарить:
автора записи
Дата публикации:
01:12
+3
01:12
1267
0
vladimird vladimird 2 года назад #
а как сделать, чтобы анимация срабатывала только тогда, когда прокручиваешь страницу до анимированного элемента?
0
vladimird vladimird 2 года назад #
а еще заметил, что если проставляешь яваскриптом анимацию сразу двум элементам, то у первого элемента будет анимация, а у второго нет.
0
vikont vikont 2 года назад #
Все сделал проще и наверно гибче — создал Скин 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, который у каждого свой (разные цифры) нашел так:
Ставлю курсор на кнопку доната и в меню по правой клавише выбираю Инспектировать (у вас это может называться иначе, зависит от браузера) и смотрю какая цифра у класса. Меняю сохраняю — все работает!
Правда попробовал так же анимировать кнопки подписки, что то ничего не получилось.
0
kreator kreator 2 года назад #
Так и правильно, если пользоваться компонентом SiteKreator. Я писал более обобщенно. Тут есть СайтКреатороФилы которые почему то не знают и не верят что с этим компонентом проще и удобнее.
0
vikont vikont 2 года назад #
Можно ли анимировать и другие кнопки сайта и как это сделать! С кнопками Подписка ничего не получилось
0
kreator kreator 2 года назад #
Любой объект если у него есть нужный класс анимации будет «анимироваться». Хоть целый виджет.
js выш прописан для того чтобы присвоить этот класс не исправляя шаблон.
0
vikont vikont 2 года назад #
Для двух кнопок JS выглядит так
$(function(){
    $('.uwd_129 .donate').addClass('animated tada');
});
$(function(){
     $('.subscribe_wrap .style-svg').addClass('animated tada');
});

Где ошибка? Вторая кнопка не анимируется
0
kreator kreator 2 года назад #
$(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');
});
0
kreator kreator 2 года назад #
Работает же все у вас. Колокольчик дергается же.
0
vikont vikont 2 года назад #
И это вся анимация??? Не ткнули бы носом, не заметил бы…
Рассчитывал, что вся кнопка будет дергаться.
0
kreator kreator 2 года назад #
Если бы вместо .subscribe_wrap .style-svg написали бы .subscribe_wrap то задергалась бы вся кнопка
0
vikont vikont 2 года назад #
Мимо! Заработало так .subscribe_wrap
Как успел заметить, если неправильно выбран класс или прописан не так, то рядом с ним не появляется класс animated tada и после этого должен идти путь на кнопку.
В предыдущем варианте класс .style-svg уводил анимацию за запись с кнопкой, поэтому и не дергалась… нечему было дергаться…
0
vikont vikont 2 года назад #
А вот анимировать весь виджет не получается. Пробовал с тем что на главной «Это важно»
0
vikont vikont 2 года назад #
Есть! Заработало! yahoo
0
Abirvalg Abirvalg 2 года назад #
Читал раз 10, ничего не понял. Может есть скин для SiteKreator и как анимировать виджет подробнее. Спасибо.
0
kreator kreator 2 года назад #
А что именно не понятно?
1. Создаете скин, подключаете в его head <link rel=«stylesheet»…
2. В владке js пише код выше
3. .uwd_85 .donate — вместо этого селектор вашего виджета
0
Abirvalg Abirvalg 2 года назад #
3. .uwd_85 .donate — вместо этого селектор вашего виджета
это и не понятно
0
kreator kreator 2 года назад #
Например у логотипа селектор #logo

0
Abirvalg Abirvalg 2 года назад #
Как, например, сделать чтобы виджет «Кто онлайн» выезжал справа налево?
0
kreator kreator 2 года назад #
1. В настройках виджета во вкладке дизайн добавляете стиль, например move
2. Делаете вышеуказанное и указываете селектор .move
3. Ставите анимацию (название) какую нужно
+2
vikont vikont 2 года назад #
Скин animate.json yadi.sk/d/P8fPmgJE8SES_g.
В закладке JS 3 строчки 1-анимация донате, 2-анимация системной кнопки Подписаться и 3-анимация моего виджета на главной. Замените на свои.
0
Abirvalg Abirvalg 2 года назад #
Спасибо!
+1
Abirvalg Abirvalg 2 года назад #
Можно ли сделать чтобы при прокрутке страницы срабатывала анимация?
+1
Abirvalg Abirvalg 2 года назад #
Нужно использовать
 
<script src="js/wow.min.js"></script>
<script>new WOW().init();</script>
 
0
kreator kreator 2 года назад #
ok
0
Abirvalg Abirvalg 2 года назад #
перед head
и пример JS
$('#widget_wrapper_71').addClass('fadeInRight wow');
0
kreator kreator 2 года назад #
Добавил оба плагина для подключения в 1 клик в компоненте SiteKreator.
В след версии будут.
Спасибо за наводку.
0
vladimird vladimird 2 года назад #
При наведении курсора мыши это работает?
0
kreator kreator 2 года назад #
Если вы зададите действие анимации по наведению курсора то будет по наведению.
0
kreator kreator 2 года назад #
Следующим уроком напишу как делать анимацию объекта при наведении на него.
0
vladimird vladimird 2 года назад #
Отлично! Будем ждать.
0
vladimird vladimird 2 года назад #
Может тогда и отдельный урок про анимацию при прокрутке? smile
0
kreator kreator 2 года назад #
А по прокрутке разве есть вопросы?
0
vladimird vladimird 2 года назад #
А у вас есть такой урок?
0
kreator kreator 2 года назад #
Опишите подробнее что и когда хотите анимировать?

Эта дополнительная вкладка для комментариев. Подробнее о дополнении >>>

Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.