网页屏幕滚动到显示的地方才加载动画,保证用户实时看到动画!--好空间网络!

正文 /News

网页屏幕滚动到显示的地方才加载动画,保证用户实时看到动画

2020/3/6 13:5:59 \| 阅2621	来源：好空间网络 [打印] [关闭]

第一步定义一个动画CSS,取名animate.css

.transi-up { opacity: 0; filter: alpha(opacity=0)\9; -webkit-transform: translate3d(0, 30px, 0); transform: translate3d(0, 30px, 0) }

.is-visible .transi-up { opacity: 1; filter: alpha(opacity=100)\9; -webkit-transition: opacity 0.8s, -webkit-transform 0.8s; transition: opacity 0.8s, transform 0.8s; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0) }

.is-visible .delay-08 { -webkit-transition-delay: .8s; transition-delay: .8s }

这个主要是定义了由下往上的滚动,并且设置了 delay-08为0.8秒

第二步:定义一个js文件,用来判断屏幕在什么位置,什么时候执行动画

$(window).scroll(function () {
    checkScroll()
});
function checkScroll() {
    var am = $(".preload:not([class*='is-visible'])");
    if ($(am).length > 0) {
        var h = $($(am)[0]).offset().top - $(window).scrollTop();
        if (h <= 720) {
            $($(am)[0]).addClass("is-visible")
        }
    }
}

第三步:写html文件

<!DOCTYPE html>
<html><meta charset="UTF-8" />
<meta name="renderer" content="webkit" />
<meta name="force-rendering" content="webkit" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1" />
<title>XXX</title>
<link rel="stylesheet" href="ss/animate.css" />
<link href="favicon.ico" rel="icon" type="image/x-icon" />
<body>    
    <div class="preload">
      
            <p class="transi-up delay-08">
                <b class="blue">无忧</b>服务 </p>
            <p class="transi-up delay-08">一站式管家服务</p>
     
        <div style="height: 2000px; width: 500px;background-color: blueviolet;">
        </div>
    </div>   

<script src="ss/jquery-1.8.3.min.js"></script>
<script src="ss/common.js"></script>
</body>
</html>

这里有覆盖需要注意

1:导入css 和js文件

2:把要延时动画的div 放到

<div class="preload"></div> 里面

注意,这里要考虑个问题,就是一打开网站应该有最上面的动画不应该放在这里,只有高度大于720的位置的地方才要加入到这里,这样当用户滚动的时候,才加载

3:为如果要延时,需要加这个代码

<div style="height: 2000px; width: 500px;background-color: blueviolet;">
        </div>

他是负责把网页的高度设置大于720,否则小雨720的时候是不会有效果的

您的姓名：	(*)
验证码：	(*) 点击更换
您的评论：