Веб-анимация с плагинами JQuery: wow slideInUp не работает

-2

Я пытаюсь анимировать мою веб-страницу, используя плагин wow.js, но, к сожалению, единственная анимация, которую я хочу использовать, по-видимому, не работает в моем случае. Когда я пытаюсь выполнить slideInDown, slideInLeft и другие, это отлично работает. Я использую Bootstrap для моего гибкого веб-дизайна.Веб-анимация с плагинами JQuery: wow slideInUp не работает

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
 
<!DOCTYPE html> 
 
<html lang="en"> 
 
    <head> 
 
<meta charset="utf-8"/> 
 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1 maximum-scale=1, user-scalable=no"/> 
 
    <title>Bootstrap 101 Template</title> 
 

 
    <!-- Bootstrap --> 
 
    <link href="bootstrap/css/bootstrap.css" rel="stylesheet"/>> 
 
    <link rel="stylesheet" href="bootstrap/css/animate.css"> 
 
    <link rel="stylesheet" href="bootstrap/css/site.css"> 
 
    </head> 
 
    <body> 
 
<div class="organic container"> 
 
     <div class="row"> 
 
     <div class="col-xs-7 col-xs-offset-4 col-sm-7 col-sm-offset-4 col-md-7 col-md-offset-4 col-lg-7 col-lg-offset-4"><img src="elem/photo-1-idea.jpg" alt="organic infusions"/></div> 
 
     <h2 class="col-xs-2 col-xs-offset-2 col-sm-2 col-sm-offset-2 col-md-2 col-md-offset-2 col-lg-2 col-lg-offset-2 wow slideInUp" data-wow-offset="10" data-wow-duration="5s"> ORGANIC</h2> 
 
     <p class="col-xs-5 col-xs-offset-2 col-sm-5 col-sm-offset-2 col-md-4 col-md-offset-2 col-lg-4 col-lg-offset-2 wow slideInUp" data-wow-offset="10" data-wow-duration="5s" data-wow-iteration="20"> Nos infusions en tige offrent une nouvelle façon de consommer les plantes issues de terroirs exceptionnels.</p> 
 
     </div> 
 
    </div> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> 
 
    <script src="bootstrap/js/bootstrap.min.js"></script> 
 
    <script src="bootstrap/js/wow.min.js"></script> 
 
    <script> 
 
     wow = new WOW(
 
     { 
 
      animateClass: 'animated', 
 
      offset:  100, 
 
      callback:  function(box) { 
 
      console.log("WOW: animating <" + box.tagName.toLowerCase() + ">") 
 
      } 
 
     } 
 
    ); 
 
     wow.init(); 
 
    </script> 
 
    </body> 
 
</html>

источник

2016-06-21 Yanis Ismail

Проверьте правильность выполнения соединительной детали. Я не уверен, но я думаю, что эта ошибка вызвана тем, что вы неправильно сделали ссылку. Проверьте и посмотрите – Bhugy

О, хорошо, хорошо! но не могли бы вы уточнить, что касается ссылок, которые я, вероятно, пропустил? Потому что все выглядит отлично для меня .. –

Не могли бы вы показать структуру вашей папки? это может помочь. – Bhugy

animate.css из "github.com/matthieua/WOW" относятся к animate.css из "github.com/daneden/animate.css".

В WOW я не могу найти определение slideUp в animate.css.

Но, я могу найти определение slideUp в daneden/animate.css.

animate.css WOW не является последней версией.

Вы можете заменить старое animate.css на обновление, чтобы оно работало хорошо.

источник

2016-06-21 08:06:26 langyu

Да, bounceIn Up работает хорошо! но не реально, что я должен сделать .. Мне нужно сделать небольшой слайд-эффект, сдержанный, около 20px –

Я предлагаю вам использовать 'https: // github.com/daneden/animate.css', это будет хорошо работать для вашего требования ответ был обновлен. – langyu

Но, если я прав, я уверен, что Wow.js уже использует animate.css, поэтому .. Вот что я уже делаю –

Я изменил css на последнюю версию animate.css, но все же это не сработало, я понятия не имею, почему, но если я переименую класс «slideInUp» css на другой, такой как slideUpIn, он работает для меня!

Надеюсь, это поможет!

источник

2017-03-03 15:10:48 Puchi

Веб-анимация с плагинами JQuery: wow slideInUp не работает

ответ

Смежные вопросы