-2

I'm trying to animate my web page, using the wow.js plugin, but unfortunately, the only animation that I wanna use seems to not work in my case. When I try slideInDown, slideInLeft and others this works fine. I use Bootstrap for my responsive web design. 

<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>

4

3 回答 3

0

The animate.css of "github.com/matthieua/WOW" refer to the animate.css of "github.com/daneden/animate.css".

In WOW, I can not find the definition of slideUp in animate.css.

But, I can find the definition of slideUp in daneden/animate.css.

The animate.css of WOW is not the latest version.

You can replace the old animate.css with the update to make it work well.

于 2016-06-21T08:06:26.073 回答
0

I changed the css to the latest animate.css but still it didn't worked, I have no idea why but if I rename the "slideInUp" class of the css to another one like slideUpIn, it works for me!

Hope it helps!

于 2017-03-03T15:10:48.627 回答
0

I don't know why it doesn't exist, but it's this:

@keyframes slideInUp {
    0% {
        opacity: 0;
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);
      }
    
      100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
      }
}
    
.slideInUp {
      -webkit-animation-name: slideInUp;
      animation-name: slideInUp;
}

You can put in your style.css

于 2021-03-18T15:54:09.950 回答