ScrollReveal.js将无法运行

时间:2016-05-04 18:05:37

标签: javascript css

enter image description here

我正在尝试使用Julian Lloyd(ScrollReveal)广泛称赞的ScrollReveal.js

我已经按照页面上的说明指南以及其他网站进行了操作但是脚本没有提供所需的效果,实际上没有效果。

我添加了以下内容以使其发挥作用:

添加.js并初始化脚本:

    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="css/normalize.css">
        <link rel="stylesheet" href="css/main.css">
        <title>Aries Sercon Lda - Accounting, Tax and Consulting in Mozambique - Home</title>
        <meta name="description" content="Aries Sercon is an established firm providing accounting, tax and human resource services in Mozambique">
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
        <link rel="icon" type="img/png" href="favicon-32x32.png" sizes="32x32"/>
        <link href='https://fonts.googleapis.com/css?family=Roboto:400,900' rel='stylesheet' type='text/css'>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script type="text/javascript" src="scripts/scrollReveal.min.js"></script>  
        <script>
        window.sr = new scrollReveal();
        sr.reveal('#landing');
        sr.reveal('#checks');
        sr.reveal('#process');
        sr.reveal('#clients');
        sr.reveal('#footer');
        </script>
    </head>

为每个元素添加了引用(&#34; data-sr&#34;)

    <div class="wrapper">

            <div class="checks" id="checks" data-sr>

With all these, it does not work. I have checked the path which is correct.
                <p class="promo center">We are an independent group of accountants and tax professionals based in Mozambique. We have been operating in the market for over 30 years, long enough to witness and be part of the incredible growth of the country.</br></br>

                Together we have helped small and large businesses, novices and even veterans in finding and setting up a space for them in Mozambique, and in doing so have developed an acute understanding of the country's changing business dynamics.</br></br>

                Mozambique has seen consistent growth through a decade-long trend strongly driven by the extractive industries and large infrastructure projects. However, opportunities exist for small and medium size business ventures. A long coastline and an ideal geographic location also make it attractive for investment and trade.</p>

                <a href="#process" class="smoothScroll"><img src="assets/arrow.svg" class="arrows" alt="Go down"></a>

            </div>



        </div>

1 个答案:

答案 0 :(得分:2)

我不认为使用data-sr属性是使用此插件的有效方法。我还没有在插件的代码中找到此属性(版本为3.1.4)。

您的代码无效,因为应该&#34;显示&#34;没有初始化。

尝试将以下代码粘贴到您的文档中:

window.sr = ScrollReveal();
sr.reveal('#checks');

// if you have other elements, add them like this
sr.reveal('#other-element');
sr.reveal('#another-element');

我还为演示创建了一个小提琴:https://jsfiddle.net/82n10mk4/