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