首先不要忘了,这是个jQuery代码,记得先引入jQuery。

初始化代码:

页面初始化时添加默认class,在这个class上可以编写默认的样式。即初始状态。

function commonAnimationInitial() {
    var $object = $(".common-animate-item");
    $object.each(function () {
        var $this = $(this);
        $this.addClass("normalmove");
    });
}
位置监测代码:
function commonAnimationAction() {
    var $object = $(".normalmove");
    $object.each(function () {
        var $this = $(this);
        if ($this.length) {
            var $a = $(this).offset().top;
            var $b = $(window).scrollTop();
            var $c = $(window).height() * 0.75; //指定元素(从屏幕顶部算起)进入屏幕的75%的位置时添加Class
            var $d = $(window).height();
            var $selfHeight = $(this).height();
            if (($b > ($a - $c)) || ($b > ($a - $d + $selfHeight))) {
                $this.addClass("normalanimate");
            }
        }
    });
}
执行代码:
$(function(){
commonAnimationInitial();
commonAnimationAction();
});
$(window).on("scroll",function(){
commonAnimationAction()
});
可参考样式:
.normalmove { transition-duration: 0.6s; transform: translateY(50px); opacity: 0; }
.normalmove.normalanimate { transform: translateY(0px); opacity: 1; }
本篇文章相关标签: