滚动显示

Question

I'm trying to make the h1 fade in once visible on scroll

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

I don't think there is a way to do this without JavaScript. If you are using jQuery, you can add a handler to $(window).scroll() that checks to see if your h1 is in viewport and adds the animation class. You can use the jQuery inViewport plugin to detect if an element is in viewport: http://www.appelsiini.net/projects/viewport

Answer 2

I have put some elements around it to make it more clear, but this should do the job.

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);
    }
});

Answer 3

You can try headroom js. They provide the functionality similar to what you are looking for. Check out this link -> http://wicky.nillia.ms/headroom.js/

Answer 4

I've started using this js plugin that seems to cater for all I need

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