scrollReveal.js立即披露

Question

当我在页面上滚动时，我在我的项目中使用scroolReveal和fullPage来显示DOM元素。但是，当我加载页面时，它已经显示了下面的所有元素，这是我不希望发生的。如果我看到页面上的元素并重新设置它，我想要显示元素。以下是我的代码：

script.js

window.sr = ScrollReveal({
    viewFactor : 0.15,
    duration   : 800,
    distance   : "0px",
    scale      : 0.8
});

sr.reveal(".reveal", {
    origin: "top",
    duration: 1000,
    delay: 0,
    distance: "20px",
    mobile: true,
    reset: true,
    useDelay: "always",
    viewFactor: 0.2,
    viewOffset: {
        top: 0,
        right: 0,
        bottom: 0,
        left: 0
    }
}, 250);

HTML

    <div class="section">
        <div style="margin-top: 15vh; margin-bottom: 15vh;">
            <h1 class="main-page-text reveal">Yeni Bir Sözlük Anlayışı</h1>
        </div>
        <ul class="main-page-text" style="font-size: 14px; list-style-type: none;">
            <li class="reveal">Geleneksel sözlük anlayışında bazı <em>eksiklikler</em> ve <em>sorunlar</em> mevcuttu.</li>
            <li class="reveal">Yazarları kıdemli yapan, toplam girdi sayılarıydı.</li>
            <li class="reveal">Bilgiler, yazarların değerleri altında değerliydiler.</li>
            <li class="reveal">Bilginin yapısı oldukça basitti. Ulamlar, girdinin içeriğine göre ya da doğrudan yazar aracılığıyla gerçekleştiriliyordu.</li>
            <li class="reveal">Ulamlar, yazarlar tarafından doğrudan değil, önerilerle gerçekleştiriliyordu.</li>
            <li class="reveal">Sözlükteki denetim (moderatör) ve süzgeçler (çaylaktan yazara), insanların istediği gibi yazmasına izin vermiyordu.</li>
            <li class="reveal">Görmek istediğiniz dışındaki şeyi, bir veri yığınını görüyordunuz.</li>
        </ul>
        <div style="margin-top: 15vh;">
            <h3 class="main-page-text reveal">Biz de alternatif bir sözlük sistemini üretmenin ihtiyaç olduğunu düşündük.</h3>
        </div>
    </div>
    <div class="section"><h1>Placeholder</h1></div>
    <div class="section"><h1>Placeholder</h1></div>

我看到了一些关于revealScroll和fullPage在revealScroll存储库中使用的问题。然而，没有fullPage，它仍然是一样的。我想，这不是fullPage造成的。

这个脚本可能会很尴尬，因为我试图在滚动中显示任何东西，但我无法处理。

环境

• 歌剧35
• revealScroll
• fullPage

Answer 1

如果您阅读fullpage.js常见问题，您将看到以下内容：

视差以及许多依赖于站点滚动的其他插件都会监听javascript和滚动事件的scrollTop属性。fullPage.js实际上并没有滚动站点，但它更改了站点的顶部或translate3d属性。只有在使用fullPage.js选项滚动条:true或autoScrolling:false时，它才会以scrollTop属性可访问的方式实际滚动站点。

fullpage.js并没有真正“滚动”这个网站。因此，依赖于该事件的任何外部库(如scrollReveal)都不会对其产生任何影响。

除非使用scrollBar:true或autoScrolling:false，否则不会触发滚动事件。

只要在谷歌上搜索"scrollReveal fullpage.js“，就可以很容易地找到答案。

• 在fullpage.js问题论坛
• 在scrollReveal问题论坛

Answer 2

滚动显示配置使用的是序列特性。序列是在页面加载时触发的，并将在指定的超时(在您的例子中为250 in)中同时显示所有元素。

如果您想要滚动的交错动画，您应该删除序列并使用以下内容。

var srIndex = 0,
    srLastPos = 0,
    srCurrentPos;

var srConfig = {
    beforeReveal: function (domEl) {
        srCurrentPos = domEl.offsetTop;

        if (srLastPos == srCurrentPos) {
            srIndex++;
        }
        else {
            srIndex = 0;
        }

        srLastPos = srCurrentPos;
        domEl.className += ' delay-' + srIndex;
    }
};

window.sr = ScrollReveal(srConfig);
sr.reveal('.js-reveal');

在触发显示之前，如果多个元素具有相同的顶部位置，则增加一个延迟类。您可以很容易地在样式表中使用倾向css或类来添加延迟。

希望这能帮上忙！