Javascript 卷轴展示

我正试图使h1在卷轴上显示后淡入

HTML

<div class="hero">
    Scroll down
    </div>

<h1 class="animated fadeInUp">Animate fadeIn</h1>

<div class="hero">
    Scroll down
    </div>

<h1 class="animated fadeInUp" id="fadein">Animate fadeIn</h1>
<div class="hero" id="spacer"></div>

---

我认为没有JavaScript就没有办法做到这一点。如果您使用的是jQuery，则可以向$（window）.scroll（）添加一个处理程序，该处理程序检查h1是否在视口中，并添加动画类。

---

您可以使用jQuery inViewport插件来检测元素是否在视口中：

我在元素周围放置了一些元素，以使其更清晰，但这应该可以完成这项工作

HTML

<div class="hero">
    Scroll down
    </div>

<h1 class="animated fadeInUp">Animate fadeIn</h1>

<div class="hero">
    Scroll down
    </div>

<h1 class="animated fadeInUp" id="fadein">Animate fadeIn</h1>
<div class="hero" id="spacer"></div>

Javascript（带jQuery）

---

你可以试试净空js。它们提供的功能与您正在寻找的功能类似。查看此链接->

我已经开始使用这个js插件，它似乎满足了我的所有需要

---

像这样吗？但它失去了向上移动的CSS动画

$(window).scroll(function() {
    var $this = $(window);

    if ($this.scrollTop() >= 800) {
        $("#spacer").css('margin-top', '0');
        $("#fadein").fadeIn(1000);
    }
});