Question

我试图在我的目标网页上制作动画，以便用户向下滚动。

我在此项目中使用Private Sub Workbook_Open() Call SetTimer End Sub Private Sub Workbook_BeforeClose(Cancel As Boolean) Call StopTimer End Sub Private Sub Workbook_SheetCalculate(ByVal Sh As Object) Call StopTimer Call SetTimer End Sub Private Sub Workbook_SheetSelectionChange(ByVal Sh As Object, _ ByVal Target As Excel.Range) Call StopTimer Call SetTimer End Sub和WOW.js。我找了很多参考资料，但都没有。我认为我的代码有问题，所以这是我的代码：

Animate.css

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

上所做的

style.js

JSFiddle

Answer 1

最后：我做了一些改动让它发挥作用，但我想你还想做一些不同的事情： fiddle

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

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

和

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

添加了wow课程并更改为data-wow-delay="0.1s"

动画wow似乎需要bounce类。

更新：我已更改代码中的某些内容以重置动画，并在您再次上下时重复播放。

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

请检查：q7Lwqqf2/2

基于this-jQuery-docs

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

相当于推荐的致电方式：

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

所以，有些变化是：

（脚本）：

请勿过早点燃WOW对象。等待文档准备就绪，因此它应该包含在您的
之下
$(function(){ <..code..> })

（样式）：

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

默认情况下应隐藏image-center并让动画库为它们分配内联css。

顺便说一下，我不确定你在这条线上做了什么：

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

您打算如何处理滚动事件上的.animation-test

使用js滚动的CSS动画无效

2 个答案: