当用户向下滚动时，元素会淡入，如何添加动画

我有这样的代码可以做我想做的事情，当用户向下滚动页面时，内容会淡入视图，效果很好。但是我希望每个div都能在他们进入视野时变得生气勃勃。问题是动画一次只发生一次，而不是元素的淡入。有没有办法来解决这个问题？当用户向下滚动时，元素会淡入，如何添加动画

的jsfiddle：https://jsfiddle.net/3ox0hn8w/

HTML

<body> 

<div class="headerWrap"> 
    <h1> A scrolling fade in test</h1> 
</div> <!--headerWrap--> 

<div class="fadeInsWrap"> 

<div class="fadeInBlockLeft left"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockRight right"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockLeft left"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockRight right"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockLeft left"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockRight right"> 
    <h1> Fade in </h1> 
</div> 

<div class="fadeInBlockLeft left"> 
    <h1> Fade in </h1> 
</div> 


</div> <!--fadeInsWrap--> 
</body>

CSS

body { 
    height: 700px; 
} 

.headerWrap { 
    text-align: center; 
    margin-top: 5%; 
} 

.fadeInsWrap { 
    width: 50%; 
    height: 1000px; 
    margin: 0 auto; 
    border: 1px solid; 
    padding-top: 5%; 
} 

.left { 
    border: 1px solid; 
    width: 50%; 
    text-align: center; 
    clear: both; 
} 

.right { 
    width: 50%; 
    float: right; 
    border: 1px solid; 
    text-align: center; 
} 

.fadeInBlockLeft, 
.fadeInBlockRight { 
    opacity: 0; 
    margin-bottom: 7%; 
} 

.animate-inLeft { 
    -webkit-animation: inLeft 600ms ease-in-out forwards; 
    display: block; 
} 

@-webkit-keyframes inLeft { 
    0% { 
    -webkit-transform: translateX(900px); 
    } 
    100% { 
    -webkit-transform: translateX(0px); 
    } 
} 

.animate-inRight { 
    -webkit-animation: inRight 600ms ease-in-out forwards; 
    display: block; 
} 

@-webkit-keyframes inRight { 
    0% { 
    -webkit-transform: translateX(-900px); 
    } 
    100% { 
    -webkit-transform: translateX(0px); 
    } 
}

JQuery的

$(document).ready(function(){ 

    $(window).scroll(function(){ 

     $(".fadeInBlockLeft, .fadeInBlockRight").each(function(i){ 
      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 

      bottom_of_window = bottom_of_window + 50; 

      if(bottom_of_window > bottom_of_object){ 

       $(this).animate({'opacity':'1'},1000); 
       $('.fadeInBlockLeft').addClass("animate-inLeft"); 
       $('.fadeInBlockRight').addClass("animate-inRight"); 
      } 
     }); 
     }); 
    });

来源

2016-11-14 Sergi

我修改你的小提琴。我想我有什么是你在找什么？基本上，你只想淡入“这个”元素。上面的代码为每个具有类“fadeInBlockLeft”或“fadeInBlockRight”的元素执行动画。

$(document).ready(function(){ 
 
    
 
    $(window).scroll(function(){ 
 
    
 
     $(".fadeInBlockLeft, .fadeInBlockRight").each(function(i){ 
 
      var bottom_of_object = $(this).position().top + $(this).outerHeight(); 
 
      var bottom_of_window = $(window).scrollTop() + $(window).height(); 
 
      
 
    
 
      bottom_of_window = bottom_of_window + 50; 
 
      
 
      if(bottom_of_window > bottom_of_object){ 
 
       
 
       $(this).animate({'opacity':'1'},1000); 
 
       if($(this).hasClass('fadeInBlockLeft')){ 
 
       \t $(this).addClass("animate-inLeft"); 
 
       } 
 
       if($(this).hasClass('fadeInBlockRight')){ 
 
       \t $(this).addClass("animate-inRight"); 
 
       } 
 
      } 
 
     }); 
 
     }); 
 
    });

来源

2016-11-14 20:01:52

Np。你也可以尝试在你的css3动画中包含你的不透明动画。但这只是我的偏好。 –

你是对的，也改变了。 – Sergi

您必须引用$（本），而不是元素类（这是调用的所有元素）：

$(this).addClass("animate-inLeft"); 
$(this).addClass("animate-inRight");

Working JSFiddle

来源

2016-11-14 20:01:29 Alvaro

虽然这是问题的根源，那么所有的元素从左边进去。上面的答案是正确的。 – Sergi

当用户向下滚动时，元素会淡入，如何添加动画

回答

相关问题