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

ScrollReveal在自定义视口中不起作用

1 个答案: