顯示在滾動

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

我不要瘦k有一種方法可以在沒有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。它們提供的功能類似於您正在尋找的功能。看看這個鏈接 - >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/