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