在卷轴上显示

Reveal on scroll

本文关键字：显示      更新时间：2023-09-26

我试图让 h1 在滚动时淡入

http://jsfiddle.net/robcleaton/dfggat6b/

.HTML 

<div class="hero">
    Scroll down
    </div>
<h1 class="animated fadeInUp">Animate fadeIn</h1>

.CSS

.hero {
    background: green;
    height: 1000px;
}
.animated {
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
}
.fadeInUp {
  -webkit-animation-name: fadeInUp;
          animation-name: fadeInUp;
}
我认为

没有JavaScript就没有办法做到这一点。如果你使用的是jQuery，你可以向$（window）.scroll（）添加一个处理程序，该处理程序检查你的h1是否在视口中并添加动画类。您可以使用jQuery inViewport插件来检测元素是否在viewport中：http://www.appelsiini.net/projects/viewport

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

http://jsfiddle.net/chkrmqmx/

.HTML 

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

.CSS

.hero {
    background: green;
    height: 1000px;
}
.animated {
    display: none;
    height: 200px;
}
#spacer {
    margin-top: 200px;
}

Javascript（with jQuery）

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

你可以试试净空js。它们提供的功能类似于您正在寻找的功能。查看此链接 -> http://wicky.nillia.ms/headroom.js/

我已经开始使用这个 js 插件，它似乎可以满足我的一切需求

http://www.jqueryscript.net/demo/jQuery-Plugin-For-Element-Fade-Slide-Effects-As-You-Scroll-FadeThis/

相关文章：