Question

我正在使用此链接中的教程来使内容在滚动时加载动画。 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脚本链接之前添加http:即可。如果您在本地设置上运行演示，而不是在线运行，则需要它。

如何在滚动页面时制作动画内容

1 个答案: