考慮seo時淡入動畫滾動（但只有一次）

Question

我需要實現這種動畫效果，例如在this頁面中使用。 我已經嘗試了很多次在互聯網上發現的一切，但沒有一個解決方案像這樣工作，我無法修復它。我想對於懂Javascript的人來說應該很容易（但我不是他們中的一員，這是我第一次需要這樣的東西，我的研究持續了幾個小時，所以我很抱歉，但我試過了問更多的JS有經驗的人）。

在理想的情況下，它不應該通過隱藏的東西解決，因爲我害怕搜索引擎優化的不良影響。

$(document).ready(function() { 
 
    
 
    /* Every time the window is scrolled ... */ 
 
    $(window).scroll(function(){ 
 
    
 
     /* Check the location of each desired element */ 
 
     $('.hideme').each(function(i){ 
 
      
 
      var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
      
 
      /* If the object is completely visible in the window, fade it it */ 
 
      if(bottom_of_window+500 > bottom_of_object){ 
 
       
 
       $(this).addClass("slideUp"); 
 
       $(this).animate({'opacity':'1'}); 
 
        
 
      } 
 
      
 
     }); 
 
    
 
    }); 
 
    
 
});

.slideUp{ 
 
\t animation-name: slideUp; 
 
\t -webkit-animation-name: slideUp; \t 
 

 
\t animation-duration: 0.5s; \t 
 
\t -webkit-animation-duration: 0.5s; 
 

 
\t animation-timing-function: ease-in-out; \t 
 
\t -webkit-animation-timing-function: ease-in-out; \t \t 
 
\t 
 
} 
 

 
@keyframes slideUp { 
 
\t 0% { 
 
\t \t transform: translateY(5%); 
 
     display: none; 
 
     opacity: 0; 
 
\t } 
 
    100% { 
 
\t \t transform: translateY(0%); 
 
     display: block; 
 
     opacity: 1; 
 
\t } 
 
\t 
 
} 
 

 
@-webkit-keyframes slideUp { 
 
\t 0% { 
 
\t \t -webkit-transform: translateY(5%); 
 
     -webkit-display: none; 
 
     -webkit-opacity: 0; 
 
\t } 
 
\t 100%{ 
 
\t \t -webkit-transform: translateY(0%); 
 
     -webkit-display: block; 
 
     -webkit-opacity: 1; 
 
\t } \t \t \t 
 
} 
 

 
.red-bg {background-color: red; color: white; padding: 50px; margin-top: 25px;} 
 
.blue-bg {background-color: blue; color: white; padding: 50px; margin-top: 25px;} 
 

 
.hideme 
 
{ 
 
    opacity:0; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="hideme red-bg"> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
</div> 
 
<div class="hideme blue-bg"> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
</div> 
 
<div class="hideme red-bg"> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
<p> 
 
Lorem ipsum dolor sit amet sit veroeros sed et blandit consequat sed veroeros lorem et blandit adipiscing feugiat phasellus tempus hendrerit, tortor vitae mattis tempor, sapien sem feugiat sapien, id suscipit magna felis nec elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos lorem ipsum dolor sit amet. 
 
</p> 
 
</div>

謝謝大家的幫助。

Answer 1

沒錯，所以如果我正確理解這一點，那麼只有當它不在屏幕上時才需要淡化。這是你需要爲這個的JavaScript：

$(document).ready(function() { 

function fading() { 

    $('.hideme').each(function(i){ 

     var bottom_of_object = $(this).offset().top + $(this).outerHeight(); 
     var bottom_of_window = $(window).scrollTop() + $(window).height(); 

     /* If the object is completely visible in the window, fade it it */ 
     if(bottom_of_window > bottom_of_object){ 

      $(this).animate({'opacity':'1'},1000); 

     } 

    }); 

} 

fading(); 

$(window).scroll(function(){ 
    fading(); 
}); 

}); 

我重視這裏的小提琴： https://jsfiddle.net/e5qaD/7105/

另外，如果其opacity: 0;你擔心，你可以無視上述所有的只需添加一個固定在頁面底部的高度爲z-index的白色漸變。如果你的頁面上有按鈕，這可能會導致一些問題，所以如果沿着這條路線走下去，給它一個小高度。