考虑seo时淡入动画滚动（但只有一次）

我需要实现这种动画效果，例如在this页面中使用。我已经尝试了很多次在互联网上发现的一切，但没有一个解决方案像这样工作，我无法修复它。我想对于懂Javascript的人来说应该很容易（但我不是他们中的一员，这是我第一次需要这样的东西，我的研究持续了几个小时，所以我很抱歉，但我试过了问更多的JS有经验的人）。考虑seo时淡入动画滚动（但只有一次）

在理想的情况下，它不应该通过隐藏的东西解决，因为我害怕搜索引擎优化的不良影响。

$(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>

谢谢大家的帮助。

来源

2017-06-14 mdblzk

你可以添加你有问题的代码吗？看看[问]和[mcve] –

@TimHutchison我得到的最接近的是这个：https://jsfiddle.net/g2wLgz7c/（我问了一下之后，我取得了一些进展，但仍然觉得我的代码有点混乱，我担心不透明度：0;因为SEO）。因此，如果任何人都可以用纯代码发布一个简单的解决方案，而没有杂乱的东西，那就太好了:) – mdblzk

我将自己的代码添加到了问题本身中（您可能必须等到编辑经过同行评审后才能看到）。请将代码添加到您将来的问题中。 jsfiddle很好，但如果链接消失，那么问题的价值会大大降低，因为我们没有代码 –

没错，所以如果我正确理解这一点，那么只有当它不在屏幕上时才需要淡化。这是你需要为这个的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的白色渐变。如果你的页面上有按钮，这可能会导致一些问题，所以如果沿着这条路线走下去，给它一个小高度。

来源

2017-06-14 13:01:02 Amy

谢谢你的小提琴，但正如我所提到的，我害怕“不透明：0”（因为SEO）。有没有其他解决方案，然后设置0不透明度？我需要动画淡入一点点。向上移动很容易 ---- @keyframes slideUp { \t 0％{ \t \t transform：translateY（5％）; display：none; 不透明度：0; \t} 100％{ \t \t变换：平移Y（0％）; display：block; 不透明度：1; \t} \t } ---- 但不透明度0不在这里工作了......正如我所说，难道没有做到呢？ – mdblzk

如果你真的担心它，你总是可以添加一个固定在页面底部的具有最高z-index的淡色div。这也造成了一个衰落的效果，没有JavaScript需要 – Amy

我想Google不会对这个解决方案感到高兴。但是，谢谢你的另一个角度。我想，没有任何“更清洁”的解决方案，然后0到1不透明或淡入淡出的“淡入”动画的div？ – mdblzk

考虑seo时淡入动画滚动（但只有一次）

回答

相关问题