使用js滚动的CSS动画无法正常工作

Question

I tried to make an animation on my landing page for whenever the user scrolls down and up.

I use WOW.js and Animate.css on this project. I've looked for many references but none worked. I think there is a fault in my code, so this my code:

<div class="row">
    <div class="col-sm-12">
        <h4 class="title-colcenter animation-test" data-wow-delay="1s" id="fiturtitle">FITUR</h4>
    </div>
</div>

this is what I do on style.js

$(document).ready(function(){

    $("#fiturtitle").hide();

    $(function(){
        $(window).scroll(function(){
            $(".animation-test").each(function(){
                var imagePos = $(this).offset().top;
                var imageHeight = $(this).height();
                var topOfWindow = $(window).scrollTop();

                if(imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow){
                    $('#fiturtitle').addClass("bounce");
                }
                else{
                    $('#fiturtitle').removeClass("bounce");
                }
            });
        }); });
    });

JSFiddle

Answer 1

Finally: I've made some changes to make it work, still I guess you want to do something different: fiddle

if(imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow){

        $('#fiturtitle').removeClass("bounce");
    }else{
        $('#fiturtitle').addClass("bounce");
        $("#fiturtitle").show(); //this makes the title appear
    }

And

<h4 class="title-colcenter animation-test wow" id="fiturtitle" data-wow-delay="0.1s">

Added wow class and changed to data-wow-delay="0.1s"

It seems that wow class is needed for the animation bounce .

UPDATE : I've changed somethings in the code to reset the animation and make it repeat when you go up and down again.

New version fiddle

CSS:

.fitur-wrap {
        margin-top: 100px;
    }
    .content-fitur{
        position:relative;
        z-index: 2;
    height: 900px;
        background: -moz-linear-gradient(top,  rgba(247,247,247,1) 0%, rgba(247,247,247,0) 37%, rgba(0,0,0,0) 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(top,  rgba(247,247,247,1) 0%,rgba(247,247,247,0) 37%,rgba(0,0,0,0) 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to bottom,  rgba(247,247,247,1) 0%,rgba(247,247,247,0) 37%,rgba(0,0,0,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#00000000',GradientType=0 ); /* IE6-9 */
    }

    .content-fitur .image-center{
        text-align: center;
        margin:0 auto 40px auto;
    }

    .toanim {
        position: fixed;
        background-color: white;
        top: 0;
        left: 0;
        height: 80px;
        width: 100%;
        display: none;
        z-index: 9999;
    }
    .title-colcenter{
    text-align: center;
    font-weight: bold; 
    color: #e45b5b;
    padding-top: 25px;
    padding-bottom: 25px;
    margin: 0;
    font-size: 30px;
    }

 .show {
    display:block;
 }

HTML:

<div class="toanim">
    <h4 class="fiturtitle title-colcenter wow" data-wow-delay="0.1s">FITUR</h4>
</div>

<div class="fitur-wrap content-fitur">
    <div class="container">
        <div class="row row-vertical-middle">
            <div class="col-xs-12 col-sm-4">
                <div class="image-center wow bounceInLeft" data-wow-delay="0.1s">
                    <img src="http://placekitten.com/g/200/300" alt="Bootstrap Image Preview" class="image_container">
                </div>
            </div>
        </div>
    </div>
</div>

JS:

new WOW().init();
var obj = '<h4 class="fiturtitle title-colcenter animation-test wow" data-wow-delay="0.1s">FITUR</h4>';
    $(window).scroll(function(){
        console.log($(window).scrollTop());
            if($(window).scrollTop() == 0){ 
                $('.toanim').removeClass("show");
                $('.fiturtitle').removeClass("bounce");
                $(".toanim").append(obj);
                $(".toanim").find(':first-child').remove();
            }
            else{
                if(!$( ".fiturtitle" ).hasClass( "bounce" )) {
                    $('.fiturtitle').addClass("bounce");
                    $('.toanim').addClass("show");
                    console.log("added bounce");
                }
            }
        });

Answer 2

Check this: q7Lwqqf2/2

Based on this-jQuery-docs

$( document ).ready(function() {
  // Handler for .ready() called.
});

Equivalent to the recommended way of calling:

$(function() {
  // Handler for .ready() called.
})

---

So, some changes were:

(script):

• Do NOT ignite WOW object too soon. Wait document ready, so it should be wrapped under your

  $(function(){ <..code..> })

(styles):

.content-fitur .image-center{
 :
 :
 visibility: hidden;
}

By default image-center should be hidden and let animate lib assign inline-css to them.

---

By the way, I'm not sure what you are doing with this line:

if(imagePos < topOfWindow + imageHeight && imagePos + imageHeight > topOfWindow){

What do you intend to do with the .animation-test on scroll event??