scrollreveal.js立即揭示

Question

我正在使用项目中的scrooreveal和完整页面来揭示我在页面上滚动时的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>

我在Replayscroll存储库中看到了一些揭示卷和全页使用情况的问题。但是，它仍然没有完整页面。我认为，这不是由整页引起的。

脚本可能很尴尬，因为我尝试了任何东西要在滚动中揭示，但是我无法管理。

---

环境

• 歌剧35
• 揭示croll
• 全页

Answer 1

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

视差以及许多取决于网站滚动的其他插件，都会听取JavaScript的ScrollTop属性和滚动事件。FullPage.js实际上没有滚动该站点，但它更改了网站的顶部或翻译3D属性。仅当使用fullpage.js选项scrollbar：true或autoscrolling：false实际上它将以scrolltop属性访问的方式滚动该站点。

fullpage.js并没有真正"滚动"该站点。因此，根据该事件的任何外部库（例如ScrollReveal）都不会对此产生任何影响。

除非您使用scrollBar:true或autoScrolling:false。

，它不会发射滚动事件。

可以通过搜索" scrollreveal fullpage.js"。

可以轻松找到答案。

• 在fullpage.js问题论坛
• 在Scrollreveal问题论坛中

Answer 2

您的卷轴配置使用了序列功能。序列在页面加载上触发，并将在指定的超时（在您的情况下250ms）中立即显示所有元素。

如果您想在滚动上进行交错的动画，则应删除序列并使用以下内容。

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或类轻松添加延迟。

希望有帮助！