0

I am using animate.css which is nice and simple as I am a beginner. I can get the animation to work and can delay the animation with animation-duration: 3s and animation-delay: 0s; But I can't find how to trigger it when it comes into my viewport as I scroll down to it. Here is the code I have tried so far:

HTML

<div class="about-container">
         <p>Content here...</p>
     </div>

CSS

.about-container{
    background-color: #a3c17f;
    width: 500px;
    height:500px;
    margin: 0 auto;    
}

JAVASCRIPT

$(function() {
   if ($("#about-container").length > 0) {
      addClass('animated pulse')
   }
});  
     </script>
cigarette_unicorn
  • 298
  • 4
  • 18

4 Answers4

1

Try this:

"OnScreen JS"

A jQuery plugin that does stuff to elements when they enter or leave the viewport

https://silvestreh.github.io/onScreen/

Surender Lohia
  • 349
  • 3
  • 12
0

Look at your element. You are using class. So it should be $('.about-container'). However you can change it into ID.

$(function() {
   if($('#about-container').length > 0) { // check if there's an element
      $('#about-container').addClass('animated pulse'); // this is how you add class in jquery
   }
});

Plain Javascript

var abtContainer = document.getElementById('about-container');

if(abtContainer.length > 0) {
    abtContainer.classList.add('animated pulse'); 
}

However this method don't work on IE8 and below.

So you need to use this if you are supporting old browsers.

abtContainer.className += ' animated pulse';

http://codepen.io/anon/pen/QERZpz

hdotluna
  • 5,514
  • 4
  • 20
  • 31
  • I tried this too but it isn't working. Do you think it might be because it is with animate.css? – cigarette_unicorn Aug 24 '16 at 04:29
  • I am using Chrome. – cigarette_unicorn Aug 24 '16 at 04:31
  • No. It's because of your javascript. If you want to try it. Try to remove all javascript and put this $('#about-container').addClass('animated pulse'); I also used animate.css before. And that's how I do it. You need to target the element and addClass on it. – hdotluna Aug 24 '16 at 04:32
  • 1
    But how to I trigger it to animate only when it is in the viewport?? – cigarette_unicorn Aug 24 '16 at 04:37
  • What do you mean of viewport? When the user is on desktop or mobile viewport? – hdotluna Aug 24 '16 at 04:38
  • This works but only when the page loads and not when it comes into the viewport. – cigarette_unicorn Aug 24 '16 at 04:44
  • Ideally I would like it to be both, so I'd imagine the easiest way would be when it is a certain amount of pixels from the top of the screen? I thought `(abtContainer.length > 0` would do the job – cigarette_unicorn Aug 24 '16 at 04:46
  • What you mean is, you don't want the element to overflow into the screen. Am I right? If that's the case, you better move the element and manipulate the element after the animation. Animate.css has their documentation to oncomplete function. Maybe it can help you. – hdotluna Aug 24 '16 at 04:50
  • Sorry, I realise the confusion. By viewport I mean it triggers when the user scrolls down to it and it is in view since it won't be the first element on landing on the page – cigarette_unicorn Aug 24 '16 at 04:51
  • I updated the pen. http://codepen.io/anon/pen/QERZpz You need something like this. – hdotluna Aug 24 '16 at 04:59
  • Brilliant. That's what I was looking for! Only thing is it only triggers once if you knew a quick fix for that otherwise that is perfect! – cigarette_unicorn Aug 24 '16 at 05:04
  • Updated! You just need to removeClass if you want it to. – hdotluna Aug 24 '16 at 05:07
0
   function addClass(elem, clazz) {
     if (!elemHasClass(elem, clazz)) {
    elem.className += " " + clazz;
      }
    }

         function elemHasClass(elem, clazz) {
          return new RegExp("( |^)" + clazz + "( |$)").test(elem.className);
         }

try this 

      jQuery('.row.homeCats').addClass("hideme").viewportChecker({
            classToAdd: 'visible animated fadeInDown',

        });
satwick
  • 135
  • 9
0

From your code, it seem you are adding addClass('animated pulse'). Since addClass supports multiple class your code is right. For testing your code you can try applying class like this manner .addClass('animated ').addClass('pulse'); But use $(this).addClass('animated pulse') in order to append class to '.about-container' DIV.

From your given HTML DIV you dont have ID #about-container, So replace , 

        $(function() {
         if ($(".about-container").length > 0) {
          $(this).addClass('animated pulse');   // Add class supports multiple class
    //OR
      $(this).addClass('animated'). addClass('animated'); // But try this also 
   }
   });
rajiv
  • 64
  • 1
  • 6