javascript - ScrollReveal 在自定义视口(viewport)中不起作用

Question

我读过很多教程，但我很难让 ScrollReveal 正常工作。我有两个主要列，左侧使用滚动条，右侧不滚动。

控制台中没有错误，当我检查我想要显示的 div 元素时，我得到了这个:

<div class="foo" data-sr-id="1" style="; visibility: visible;  -webkit-transform: translateY(0) scale(1); opacity: 1;transform: translateY(0) scale(1); opacity: 1;-webkit-transition: -webkit-transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; transition: transform 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s, opacity 0.5s cubic-bezier(0.6, 0.2, 0.1, 1) 0s; ">
    text1
</div>

以下是头部部分的内容:

<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<script>
    window.sr = ScrollReveal();
</script>
<style>
    /* Ensure elements load hidden before ScrollReveal runs */
    .sr .fooReveal {
        visibility: hidden;
    }
</style>

就在结束正文标记之前，我有这个:

<script>
    // window.sr = ScrollReveal();
    // as a DOM node...
    var fooContainer = document.getElementById('fooContainer');

    sr.reveal('.foo', {
        container: fooContainer
    });
    console.log(fooContainer)

    // as a selector...
    sr.reveal('.bar', {
        container: '#barContainer'
    });
</script>

最后，当我在控制台中输入 ScrollReveal 时，我得到:

ScrollReveal 15:10:28.907 ƒ e(n){return"undefined"==typeof this||Object.getPrototypeOf(this)!==e.prototype?new e(n):(O=this,O.version="3.3.6",O.tools=new E,O.isSupported()?(O.tools.extend(O.defaults,n||{}),O.defaults.container=…

知道我做错了什么吗？

This is my live site.

Answer 1

我将解释这个函数的步骤:

 jQuery(window).on('load',function() {
  var windowHeight, windowScrollPosTop, windowScrollPosBottom = 0;  // init where we are

  function calcScrollValues() {
    windowHeight = jQuery(window).height();
    windowScrollPosTop = jQuery(window).scrollTop();
    windowScrollPosBottom = windowHeight + windowScrollPosTop;
}
  jQuery.fn.revealOnScroll = function(direction, speed) {
    return this.each(function() {

        var objectOffset = jQuery(this).offset();
        var objectOffsetTop = objectOffset.top;

        if (!jQuery(this).hasClass("hidden")) {

            // if argument is "right"
            if (direction == "right") {
                jQuery(this).css({
                    "opacity"   : 0,
                    "right"     : "700px",
                    "position"  : "relative"
                });
            // if argument is "left"
            } else {
                jQuery(this).css({
                    "opacity"   : 0,
                    "right"     : "-700px",
                    "position"  : "relative"
                });

            }
                jQuery(this).addClass("hidden");    


                        }

        if (!jQuery(this).hasClass("animation-complete")) {

            // if the page has been scrolled far enough to reveal the element
            if (windowScrollPosBottom > objectOffsetTop) {
                jQuery(this).animate({"opacity" : 1, "right" : 0}, speed).addClass("animation-complete");
            } // end if the page has scrolled enough check

        } // end only reveal the element once

    });
}

  function revealCommands() {




    jQuery("h1").revealOnScroll("left", 1500);
      jQuery("li:odd").revealOnScroll("left", 1500);
      jQuery("li:even").revealOnScroll("left", 1500);
      jQuery("s").revealOnScroll("left", 1500);
      jQuery("div").revealOnScroll("right", 900);


}
  calcScrollValues();
revealCommands();

// run the following on every scroll event
jQuery(window).scroll(function() {
    calcScrollValues()
    revealCommands();
 }); // end on scroll

 });

只需确保已加载 jQuery，然后将上述函数添加到脚本中即可。我现在得走了，但是这个功能是可以扩展的，我稍后会更新它。

这是一个演示链接:

https://codepen.io/damianocel/pen/pjdrWr