Question

我试图在滚动

上看到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;
}

Answer 1

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

Answer 2

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

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（使用jQuery）

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

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

Answer 3

您可以尝试净空js。它们提供与您要查找的功能类似的功能。看看这个链接 - ＆gt; http://wicky.nillia.ms/headroom.js/

Answer 4

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

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

滚动显示

4 个答案: