ScrollReveal funktioniert nicht im benutzerdefinierten Ansichtsfenster

Question

Ich habe viele Tutorials gelesen, aber ich habe Mühe, ScrollReveal zur Arbeit zu bringen. Ich habe zwei große Spalten, wobei die linke eine Bildlaufleiste und die rechte keinen Bildlauf verwendet.

Es gibt keine Fehler in der Konsole, und ich das, wenn ich das div-Element überprüfen, die ich aufgedeckt werden sollen:

<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>

Hier ist, was im Kopfteil ist:

<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>

Recht vor dem schließenden Body-Tag, ich habe dies:

<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>

Schließlich, wenn ich ScrollReveal in die Konsole eingeben, bekomme ich diese:

ScrollReveal 15 : 10: 28.907 ƒ e (n) {return "undefined" == typeof this || Object.getPrototypeOf (this)! == e.prototype? New e (n) :(O = dies, O.version = "3.3 .6 ", O.tools = neu E, O.isSupported()? (O.tools.extend (O.dedefaults, n || {}), O.de faults.container = ...

Irgendwelche Ideen, was ich falsch mache?

This is my live site.

Answer 1

werde ich diese Funktionen Schritte erläutern:

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 

}); 

Sie sicher, dass Sie haben jQuery geladen und dann auf das Skript die obige Funktion hinzuzufügen. Ich muss jetzt gehen, aber diese Funktion ist sehr erweiterbar, ich werde es später aktualisieren. Hier

ist ein Link mit einer Demo:

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