Question

添加效果的新手。我的div对象在段落下面。我希望如果我向下滚动并转到那个部分，它只会触发事件。但是，它仅在页面加载时触发。我怎么能做到这一点？我搜索了脚本中的代码但是它只是在我之前说过的页面加载时触发。

HTML：

   <!DOCTYPE html>
    <html>
    <head>
    <link rel="stylesheet" type="text/css" href="bocss.css">
    </head>
    <body>
    <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
     <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>
      <p>"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore <br>
    magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. <br>
    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat <br>
     cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."</p> <br>


    <div id="object" class="slideLeft">Lorem ipsum</div>

    <script>
        $(window).scroll(function() {
            $('#object').each(function(){
            var wordPos = $(this).offset().top;

            var topOfWindow = $(window).scrollTop();
                if (wordPos < topOfWindow+400) {
                    $(this).addClass("slideLeft");
                }
            });
        });
    </script>
    </body>
    </html>

CSS：

.slideLeft{
    animation-name: slideLeft;
    -webkit-animation-name: slideLeft;  

    animation-duration: 1s; 
    -webkit-animation-duration: 1s;

    animation-timing-function: ease-in-out; 
    -webkit-animation-timing-function: ease-in-out;     

    visibility: visible !important; 
}

@keyframes slideLeft {
    0% {
        transform: translateX(150%);
    }
    50%{
        transform: translateX(-8%);
    }
    65%{
        transform: translateX(4%);
    }
    80%{
        transform: translateX(-4%);
    }
    95%{
        transform: translateX(2%);
    }           
    100% {
        transform: translateX(0%);
    }
}

@-webkit-keyframes slideLeft {
    0% {
        -webkit-transform: translateX(150%);
    }
    50%{
        -webkit-transform: translateX(-8%);
    }
    65%{
        -webkit-transform: translateX(4%);
    }
    80%{
        -webkit-transform: translateX(-4%);
    }
    95%{
        -webkit-transform: translateX(2%);
    }           
    100% {
        -webkit-transform: translateX(0%);
    }
}

#object{
    background-color: #fe5652;

    visibility: hidden;
}

Answer 1

您需要使用Javascript来查找一些JS示例。互联网上有一堆。

Answer 2

您必须从html代码中删除该类，并仅将其与脚本一起添加。

所以而不是

<div id="object" class="slideLeft">Lorem ipsum</div>

制作

<div id="object">Lorem ipsum</div>

您还需要将jQuery添加到您的页面，因为您正在使用它，但尚未加载库。

稍微看一下算法后，

更新，主要的另一个问题是，您应该检查视口的顶部，同时应该检查视口的底部。

所以将测试调整为

$(window).scroll(function() {
    $('#object').each(function() {
        var wordPos = $(this).offset().top;
        var bottomOfPage = $(window).scrollTop()+$(window).height();

        if (wordPos < bottomOfPage) {
            $(this).addClass("slideLeft");
        }
    });
});

https://jsfiddle.net/s4nuwmje/1/

演示

当用户滚动到元素时，它将触发动画

2 个答案: