CODEWITHSUNDEEP
javascripthtmlcss
Gusic industry
Gusic industry

Reputation: 133

wow.js is not working

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.com/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.com/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.com/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.com/embed/5-NXguyFFko">
</iframe>

    </div>

javascript

$(function(){
new WOW().init(); 

});

Upvotes: 4

Views: 24133

Answers (5)

Nilay Kumar
Nilay Kumar

Reputation: 23

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>

Upvotes: 1

sumit dubey
sumit dubey

Reputation: 123

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

Upvotes: 0

Skoua
Skoua

Reputation: 3603

<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.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

should probably be

<script src="https://ajax.googleapis.com/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 compliant.

Upvotes: 1

Shadi Alnamrouti
Shadi Alnamrouti

Reputation: 13288

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(); 
});

Upvotes: 1

Craicerjack
Craicerjack

Reputation: 6332

There is nothing wrong with your code - its working fine https://jsfiddle.net/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.com/ajax/libs/animate.css/3.3.0/animate.css
https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js
https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.js

Upvotes: 8

Related Questions