I have just tried to implement wow.js to my site but it wont work. I have linked everything but i don't know why it isn't working. I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src=".11.3/jquery.min.js"></script>
<title> Vids </title>
<a href="index.html"> <header> <img src="images/Logo.png" > </header></a>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});
I have just tried to implement wow.js to my site but it wont work. I have linked everything but i don't know why it isn't working. I even added the wow.js and linked it to the html but there still seems to be nothing that is working. I also added the animate.css and still there is no effect.
HTML
<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="animate.css">
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<title> Vids </title>
<a href="index.html"> <header> <img src="images/Logo.png" > </header></a>
</head>
<body>
<div class="vids-title">
<p>Vids</p>
</div>
<div class="video-1 wow slideInRight">
<h>Shia LaBeouf delivers the most intense motivational speech of all-time</h>
<iframe width="550" height="435"
src="https://www.youtube./embed/nuHfVn_cfHU">
</iframe>
</div>
<div class="video-2 wow slideInLeft">
<h>Truth or Drink (Exes)</h>
<iframe width="550" height="435"
src="https://www.youtube./embed/pxYpvNMbdXQ">
</iframe>
</div>
<div class="video-3 wow slideInRight">
<h>Walker broke his arm</h>
<iframe width="550" height="435"
src="https://www.youtube./embed/5-NXguyFFko">
</iframe>
</div>
javascript
$(function(){
new WOW().init();
});
- Try linking it below your jQuery link – Matt Hammond Commented Jun 15, 2015 at 22:23
- Nope that doesn't seem to be working – Gusic industry Commented Jun 15, 2015 at 22:24
- Where is your JavaScript file in relation to your html file? Is it in the same folder or in a different folder? – joshmcode Commented Jun 15, 2015 at 22:26
- all the files are all in the same folder – Gusic industry Commented Jun 15, 2015 at 22:27
- there isnt an error, its just not playing the animation when i scroll – Gusic industry Commented Jun 15, 2015 at 22:34
5 Answers
Reset to default 8There is nothing wrong with your code - its working fine
https://jsfiddle/k3qaoyxe/
I included the directories as external resources and then
$(function(){
new WOW().init();
});
worked fine.
Are you sure you have included all the libraries properly and they are loading correctly - check the network tab in your developer console.
Libraries included from cdn:
https://cdnjs.cloudflare./ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare./ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare./ajax/libs/wow/1.1.2/wow.js
For me, it worked well after calling WOW at the window load event in addition to document ready event:
//At the document ready event
$(function(){
new WOW().init();
});
//also at the window load event
$(window).on('load', function(){
new WOW().init();
});
<script language="javascript" type="text/javascript"src="javascript.js"></script>
<script language="javascript" type="text/javascript" src="wow.js"></script>
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
should probably be
<script src="https://ajax.googleapis./ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="wow.js"></script>
<script src="javascript.js"></script>
You can also get rid of language and type attributes, they're useless and not W3C pliant.
Animate CSS have been updated to v4.+ (Link-https://animate.style/)
Previously as shown in the official wow.js documentation (LINK - https://wowjs.uk/docs.html)
Outdated syntax to initialize wow animation :
<script>
wow = new WOW(
{
animateClass: 'animate' // old default
}
)
wow.init();
</script>
The new syntax is as follows :-
<script>
wow = new WOW(
{
animateClass: 'animate__animated' //updated default animate 4.+
}
)
wow.init();
</script>
Hence, you can't simply use this code anymore, it is not valid :
<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>
if you have set overflow property to body,html or on parent container of wow box it will not work .remove overflow property from body or html