0

I am using scroolReveal and fullPage in my project to reveal DOM elements while I am scrolling on the page. However, when I load the page, it is already revealing all elements below, which I do not want to happen. What I want is to reveal elements if I see the element on page and reset it. Those below are my codes:

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>

I saw a few issues on both revealScroll and fullPage usage in revealScroll repository. However, it is still the same without fullPage. I think, it is not caused by fullPage.

The script might be awkward, since I tried anything to reveal on scroll, but I could not manage.

Environment

  • Opera 35
  • revealScroll
  • fullPage
Eray Erdin
  • 2,633
  • 1
  • 32
  • 66

2 Answers2

1

If you read the fullpage.js FAQs you'll see the following:

Parallax, as well as many other plugins which depends on the scrolling of the site, listens the scrollTop property of javascript and the scroll event. fullPage.js doesn't actually scroll the site but it changes the top or translate3d property of the site. Only when using the fullPage.js option scrollBar:true or autoScrolling:false it will actually scroll the site in a way it is accessible for the scrollTop property.

fullpage.js doesn't really "scroll" the site. Therefore any external library depending on that event (such as scrollReveal) won't have any effect on it.

It won't fire the scroll event unless you use scrollBar:true or autoScrolling:false.

The answer can easily be found by just googling "scrollReveal fullpage.js".

Alvaro
  • 40,778
  • 30
  • 164
  • 336
  • Okay, at first, I assumed that, too. Found a couple of issues as I told above. However, whenever I deactivate fullpage, scrollReveal still reveals all elements at once. This is still an issue. – Eray Erdin Jun 20 '16 at 10:49
1

Your scrollreveal configurations are using the sequence feature. Sequences are fired on page load and will reveal all elements at once with the timeout specified (in your case 250ms).

If you want a staggered animation on scroll, you should remove the sequence and use the following.

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');

Before the reveal is triggered, I increment a delay class if multiple elements have the same top position. You can easily add the delay with incline css or classes applied in your stylesheet.

Hope that helps!

tyau
  • 186
  • 1
  • 2