如何在滚动页面时加载动画内容

Question

我正在使用此 link 中的教程来使内容在滚动时加载动画。 http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery/ 但是当我创建所有它时效果不佳。它不是动画.. 这是我的代码。

<!DOCTYPE html>
<html lang="en">
<head>  
<meta charset="utf-8">
<title>Scroll effects with CSS animation</title>
<link rel="stylesheet" type="text/css" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" /> 
<link rel="stylesheet" type="text/css" href="http://www.web2feel.com/freeby/scroll-effects/assets/animate.css" />
<link rel="stylesheet" type="text/css" href="http://www.web2feel.com/freeby/scroll-effects/assets/demo.css" />

</head>

<body>

<div class="topbar">
    <a href="http://www.web2feel.com/tutorial-for-animated-scroll-loading-effects-with-animate-css-and-jquery">Back to the article</a>
</div>

<div class="container">

    <header class="top">

        <h1 class="site-title"><a href="index.html"> Animated Scroll effects </a></h1>
        <ul>
            <li> <a href="http://www.web2feel.com/">web2feel.com</a> </li>
            <li> <a href="http://daneden.github.io/animate.css/">CSS Animate</a> </li>
            <li> <a href="https://github.com/dirkgroenen/jQuery-viewport-checker">Viewport Checker</a> </li>
        </ul>
    </header>

    <nav class="effects">
        <ul>
            <li> <a href="index.html"> Demo 1 </a> </li>
            <li> <a href="index2.html"> Demo 2 </a> </li>
            <li> <a href="index3.html"> Demo 3 </a> </li>
            <li> <a href="index4.html"> Demo 4 </a> </li>
            <li> <a href="index5.html"> Demo 5 </a> </li>
            <li> <a href="index6.html"> Demo 6 </a> </li>
        </ul>
    </nav>


    <div class="post">
        <span class="icon fa fa-anchor"> </span>
        <h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
        <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
    </div>


    <div class="post">
    <span class="icon fa fa-shield"> </span>
        <h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
        <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
    </div>



    <div class="post">
        <span class="icon fa fa-globe"> </span>
        <h2> Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h2>
        <p> At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, At accusam aliquyam diam diam dolore dolores duo eirmod eos erat, et nonumy sed tempor et et invidunt justo labore Stet clita ea et gubergren, kasd magna no rebum. sanctus sea sed takimata ut vero voluptua. est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat.</p>
    </div>




</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> 
<script src="http://www.web2feel.com/freeby/scroll-effects/assets/viewportchecker.js"></script> 
<script type="text/javascript">
jQuery(document).ready(function() {
    jQuery('.post').addClass("hidden").viewportChecker({
        classToAdd: 'visible animated fadeIn', // Class to add to the elements when they are visible
        offset: 100    
       });   
});            
</script>

</body>
</html>

请帮我出个好办法

Answer 1

只需在 jQuery 和 Fontawesome 脚本 link 之前添加 http:。如果您是运行本地安装演示而不是运行在线演示，则需要它。

如何在滚动页面时加载动画内容

How to i can make Animated Contents Loading while Scroll the page

javascript

css

jquery

animated