Animate.js / Улучшение / Плагины Bootstrap | BootstrapТема

1
2
3
4
5

Версия: v1.3.1

Каталог: Плагины Bootstrap

Категория: Улучшение

Bootstrap: 3, 4

Для CMS: HTML, Drupal, Joomla, uCoz, WordPress, Magento, OpenCart, PrestaShop, Shopify

Язык: Английский

Вес файла: 48.2 Kb

Уникальный ID: 1298

Посмотрели: 1740 раз

Скачать бесплатно

Помощь: установка & настройка

Скачали бесплатно: 45 раз

Прокомментировали: 0 раз

Рейтинг: 5.0 / 5 - 2 голосов

Тип лицензии: CC BY 4.0

Авторство: https://github.com/jshjohnson/Animate

Информация: Пользователям

Информация: Правообладателям

Теги: scroll, jQuery, Plugin, js, ANIMATE, Bootstrap

Поделился: BootstrapТема

Добавлено: 2016-09-16 в 08:13

Метка: 1588868073

⇄ ⇅

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" />
<link href="https://bootstraptema.ru/plugins/2016/animate-js/animate.css" rel="stylesheet" />
<script src="https://bootstraptema.ru/plugins/2016/animate-js/animate.js"></script>

<div class="container">
<div class="row">

<div class="col-xs-12 box visible" data-animate data-animation-classes="animated tada"><img src="http://drawings-girls.ucoz.net/2016/09/temnovolosaya-devushka-v-rozovom-platie.jpg" class="img-responsive" alt="" /></div>
<div class="col-xs-12 box visible" data-animate data-animation-classes="animated shake"><img src="http://drawings-girls.ucoz.net/2016/09/devushka-oboronyaushayasya-mechom.jpeg" class="img-responsive" alt="" /></div>
<div class="col-xs-12 box visible" data-animate data-animation-classes="animated jello"><img src="http://drawings-girls.ucoz.net/2016/09/molodaya-devushka-s-mechom.jpg" class="img-responsive" alt="" /></div>
<div class="col-xs-12 box visible" data-animate data-animation-classes="animated wobble" data-animation-offset="0.5, 1"><img src="http://drawings-girls.ucoz.net/2016/09/devushka-v-shlyape-s-posohom.jpg" class="img-responsive" alt="" /></div>
<div class="col-xs-12 box visible" data-animate data-animation-classes="animated rubberBand"><img src="http://drawings-girls.ucoz.net/2016/09/devushka-s-pilaushim-jezlom.jpg" class="img-responsive" alt="" /></div>
<div class="col-xs-12 box visible" data-animate data-animation-classes="animated swing" data-animation-scrolled="true"><img src="http://drawings-girls.ucoz.net/2016/09/zadumchivaya-devushka-s-kuvshinom.jpg" class="img-responsive" alt="" /></div>

<script>
 var animate = new Animate({
 target: '[data-animate]',
 animatedClass: 'visible',
 offset: [0.5, 0.5],
 delay: 0,
 remove: false,
 reverse: true,
 scrolled: false,
 debug: true,
 onLoad: true,
 onScroll: true,
 onResize: false,
 callbackOnInit: function() {
 console.log('Initialised');
 },
 callbackOnAnimate: function(element) {
 console.log(element)
 }
 });

animate.init();
 </script>

</div>
</div>