Question

如今，存在动画页面元素的趋势。所以，当我们向下滚动到页面时，我会想到动画元素。为了实现这一点，我采取了一些JQuery的帮助，其余的是Html和CSS。

<div class="noanimate imgleft">  
</div>
<div class="noanimate imgright">
</div>

左图像和图像右图分别表示右侧和左侧的浮动元素。默认情况下，没有使用零不透明度隐藏动画元素，以及动画的过渡属性。

创建Html part.let之后给它的css： -

.noanimate{
    display:inline-block;
    opacity:0;
    transition:0.55s ease-in;
}
.imgleft.noanimate{
    left:-20%;
}
.imgright.noanimate{
    right:-20%;
}

在这个css中你看到我们已经将元素向左右移动了减去20％。所以它们就像浮动一样。现在是最重要的J Query部分。在向我们添加动画之前，我们必须检查我们的元素在视口中是否可见。所以，我已经完成了部分代码。

答： - 首先找到我们必须添加动画的所有元素＆amp;窗口滚动功能。

var $section=$(".noanimate"),
$window=$(window);
$window.on('scroll',function(){
    $section.each(function(i,elem){
        if($(elem).hasClass('view')){
            return ;
        }
        else {
            checkView(elem);
        }
    }); 
});

B： - 在视口中检查元素是否可见是通过两种方法完成的，如

1.Window滚动。

2.Element container。

如果元素容器在窗口滚动内，则元素可见。我已经通过此代码实现了这个难题。

function checkView(elem){
    var viewTop=$(window).scrollTop(),
    viewBottom=viewTop+$(window).height(),
    sectTop=$(elem).offset().top,
    sectBottom=sectTop+$(elem).height();

    if(sectTop>=viewTop && sectBottom<=viewBottom){
        switchClass(elem);
    }
    function switchClass(elem){
        $(elem).removeClass('.noanimate').addClass('view');
    }
}

您可以随时检查JavaScript中的浏览器版本，以便在无法进行CSS3转换时强制查看这些元素。

以下是小提琴链接： - JsFiddle

快乐编码：）

Answer 1

人我只做了一些修改，因为它只适用于向下滚动，但当你执行向上滚动时没有任何事情发生，因为图像已经被加载

所以这是我尝试做得更好的

你可以查看这个

 $(function(){
     var $section=$(".noanimate");
     var $window=$(window);
     $window.on('scroll',function(){
       $section.each(function(i,elem){        
           checkView(elem);         
       });
     });

     function checkView(elem){
       var viewTop=$(window).scrollTop();
       var viewBottom=viewTop+$(window).height();
       var sectTop=$(elem).offset().top;
       var sectBottom=sectTop+$(elem).height();

       if(sectTop>=viewTop && sectBottom<=viewBottom){
	        switchClass(elem);
       }else{
  	   		switchClassBack(elem);
       }
       function switchClass(elem){
         $(elem).removeClass('.noanimate').addClass('view');
       }
       function switchClassBack(elem){
         $(elem).removeClass('view').addClass('.noanimate');
       }
     }
 });

这里是这个演示的jsfiddle

<强> Demo For better

滚动

1 个答案: