环境

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存储库中看到了有关revealScroll和fullPage用法的一些问题。但是，如果没有fullPage，它仍然是相同的。我认为，它不是由fullPage引起的。

该脚本可能尴尬，因为我尝试在滚动中显示任何内容，但我无法管理。

环境

Opera 35
revealScroll
全页

Answer 1

如果您阅读fullpage.js FAQs，则会看到以下内容：

Parallax以及许多依赖于网站滚动的其他插件，会监听javascript的scrollTop属性和scroll事件。 fullPage.js实际上并不滚动网站，但它会更改网站的top或translate3d属性。仅当使用fullPage.js选项scrollBar：true或autoScrolling：false时，它才会以scrollTop属性可访问的方式实际滚动网站。

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

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

，否则不会触发滚动事件

只需使用Google搜索"scrollReveal fullpage.js"即可轻松找到答案。

Answer 2

您的scrollreveal配置正在使用序列功能。序列在页面加载时触发，并在指定超时时显示所有元素（在您的情况下为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或类轻松添加延迟。

希望有所帮助！

scrollReveal.js一次揭晓

的script.js

HTML

环境

2 个答案: