Raduken Raduken -3 years ago 241
CSS Question

Wow js not working with scroll

I am using wow js and animated.css its fantastic I really enjoy I just got a small problem when i tried run a effect when the user scroll 500px.

I can see the jquery is inserting the class for run the effect but I can't see the effect, as well if my jquery is ugly please feel free to fix too.

I am inserting the wow and animated.css classes manual on my page and works very well, this error just happen when I try use with jquery there is the code.

html before:

<footer>
</footer>


html after run the effect:

<footer class="wow shake" style="visibility: visible; animation-name: shake;">


js:

var fixed = false;
$(document).scroll(function() {
if( $(this).scrollTop() >= 500 ) {
if( !fixed ) {
fixed = true;
// $('footer').css({position:'fixed',top:20});
$('footer').addClass('wow shake').css({visibility: 'visible', 'animation-name': 'shake'});

// .one('animationend webkitAnimationEnd mozanimationend MSanimationend oAnimationEnd');
}
} else {
if( fixed ) {
fixed = false;
$('footer').removeClass('wow shake');
}
}
});

Answer Source

You code is close enough, inspected the behavior, and found out you should add an additional class animated to work.

However, what you want to do seems not need the wow.js to achieve, just use

$(target).addClass('animated shake').show(); 

to display with animation, then use

$(target).hide();

to hide it should be enough, added an example to snippet.

Please point me out if I misunderstood what you want to achieve.

new WOW().init();
var fixed = false;
// These are the classes when the animation is processing.
var animateGroup = 'wow shake animated';
$(document).scroll(function() {
    if( $(this).scrollTop() >= 500 ) {
        if( !fixed ) {
            fixed = true;
            // Make them show.
            $('footer')
                .addClass(animateGroup)
                .css({visibility: 'visible', 'animation-name': 'shake'}); 
          
            // Demo without wow.js
            $('.noWow').addClass('animated shake').show();
        }
    } else {
        if( fixed ) {
            fixed = false;
            // Remove anything we just added.
            $('footer')
                .removeClass(animateGroup)
                .removeAttr('style');
                // Or if you have other styles, use below to remove specific style instead.
                //.css({visibility: '', 'animation-name': ''});
          
          // Demo without wow.js
          $('.noWow').hide();
        }
    }
});
body {
    width: 100%;
    height: 2000px;
    background-color: gray;
}

footer {
    visibility: hidden;
    position: fixed;
    top: 20px;
    width: 50px;
    height: 20px;
    background-color: cyan;
}

.noWow {
    display: none;
    position: fixed;
    top: 20px;
    left: 100px;
    width: 50px;
    height: 20px;
    background-color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/wow/1.1.2/wow.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.4.0/animate.min.css">

<footer>
 </footer>
<div class="noWow">
 </div>

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download