Seriously outdone by WOW.js and integrates with animate.css

I'm working on building a portfolio. It goes well, but I got it in real style.

I am using one page and have made four divs so far to break up my work. I will have graphic design elements coming in from one side or the other as the user scrolls.

Now I have found WOW.js which should do exactly what I want, i.e. make my graphical illustration only when the user scrolls to it. BUT for my life I cannot make it work and it has to be so simple, doge. Such a surprise!

The graphics in question are the heart, and animate.css has a big "pulse" bit of CSS that I want to use. WOW.js is supposed to be fabulous with animate.css. But I am completely lost. My JS skills are still very basic, so please be patient.

As stated in the WOW.js docs, I linked to it:

<link rel="stylesheet" href="css/animate.css">

      

(my CSS folder is called public, but I don't see what it matters ...?)

This is at the bottom of my index page:

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

      

I added a CSS class to the HTML element like this:

<div class="wow">  Content to Reveal Here  </div >

      

Then you should add animate.css style to the element:

<div class="wow pulse">  Content to Reveal Here  </div >

      

But I'm missing something because nothing is working. I have been looking for this and I am not the only person who had problems with WOW.js, but I have tried everything and now I am reaching out to you.

In the parameter settings in the documents, additional settings are suggested:

wow = new WOW(
    {
    boxClass:     'wow',      // default
    animateClass: 'animated', // default
    offset:       0          // default
   }
)
wow.init();

      

I think since this is not the case at all, AM AME, it should be a different way for me, but it is still possible to use CSS animation.

LAST question: how can I continue the pulse animation? It pulses a few times, then stops, but I want it to continue over and over. Suggestions?

+3


source to share


2 answers


Just put this code in your index:

<script src="//cdnjs.cloudflare.com/ajax/libs/wow/0.1.12/wow.min.js"></script><script>new WOW().init();</script>

      



no need to call

<script src="wow.js"></script>

      

+8


source


a couple of things are going on here:

</div >

is not the correct closure for the html tag.

If WOW is not defined, you most likely did not include it wow.js

- make sure you have the correct file (see what's inside) and the correct path. When you get stuck - get rid of all the console errors and do the bare minimum, a bare bone solution that should work - it's less confusing and easier to find what's causing the problem.



how to repeat the pulse animation - just not. In the old days there were those <blink>

and <marquee>

, and they are gone for some reason - you shouldn't use it. The same goes for Comic Sans if your site is about doge.

now the following example worked for me:

<html>
<head>
<link rel="stylesheet" href="animate.css">
</head>
<body>
<script src="wow.js"></script>
<script>
  new WOW().init();
</script>
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" /><br>

<div class="wow  bounceInUp">
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>

<div class="wow pulse">
<img  src="https://dl.dropboxusercontent.com/u/19020828/heavy3.jpg" />
</div>

</body>
</html>

      

0


source







All Articles