滚动条动画

最新推荐文章于 2024-09-21 11:48:19 发布

Wxinin

最新推荐文章于 2024-09-21 11:48:19 发布

阅读量996

点赞数 3

文章标签： css jquery js

本文链接：https://blog.csdn.net/weixin_44283589/article/details/114760094

版权

要实现滚动条动画效果

1.我们首先要做的就是给在浏览器中打开的窗口绑定滚动条的监听事件

<script>
$(window).scroll(function(){

})
</script>

2.想要在给应盒子加上滚动条动画就要知道滚动条当前所在位置,即:

<script>
var scrollTop = $(document).scrollTop()
</script>

3.当然,我们也要获取要加动画盒子的位置

<script>
var targetTop = $('选择器').offset().top//获取目标盒子高度
</script>

4.现在的 targetTop 仅仅是距离浏览器顶部的距离,我们要减去屏幕的高度(分辨率),才能实现目标盒子从底部出现的时候就执行动画

<script>
var screenTop = window.screen.height
</script>

5.哎注意关键时刻来了! 此时想要的值我们已经都获取到了,是的没错,简单粗暴,加判断,

<script>
  ①滚动条只从上向下滑时执行
if(scrollTop>targetTop-screenTop){
$('选择器').addClass('类名')//此处的类名自己在css中提前写好即可
}else{
$('选择器').removeClass('类名')
}
  ②滚动条向下向上滑都执行(滚动条向下滑时高度大于目标盒子出现的高度,滚动条向上滑时小于目标盒子高度的时刻执行)
if(scrollTop>targetTop-screenTop&&scrollTop<targetTop+$('选择器').innerHeight()){
$('选择器').addClass('类名')//此处的类名自己在css中提前写好即可
}else{
$('选择器').removeClass('类名')
}

ps:$('选择器').innerHeight()为目标盒子的自身高度
</script>

滚动条动画就是这些啦,感兴趣的话不妨试一试吧 !

附上我自己做的例子:

<style>
		.activeDemo li{
            width: 440px;
            height: 80px;
            background: #FFFFFF;
            margin-top: 20px;
            /*padding: 20px 21px;*/
            box-sizing: border-box;
            cursor:pointer;
            transition: all .8s;
            position: relative;
        }
		.activeDemo li h4 i{
            color: #FFFFFF;
            border-radius: 25%;
            display: inline-block;
            font-size: 12px;
            color: #fff;
            /*font-style: italic;*/
            padding: 0px 8px 0px 5px;
            border-radius: 6px;
        }
        .newI{
            background: #ff893b;
            margin-right: 8px;
        }
        .hotI{
            background: #ff3b3b;
        }
        .activeDemo li:nth-of-type(3n-2){
            transform: translate(0,250px);
            opacity: 0;
        }
        .activeDemo li:nth-of-type(3n){
             transform: translate(0,250px);
             opacity: 0;
         }
        .activeDemo li:nth-of-type(3n-1){
            opacity: 0;
            transform: scale(0);
            transform: translate(0,250px);
        }
		.itemizeActive1{
            transform: translate(0,0) !important;
            opacity: 1 !important;
            transform: scale(1) !important;
        }
</style>
<body>
<ul class="activeDemo">
  <li>
                <h4><span>云服务器</span><i class="newI">NEW</i><i class="hotI">HOT</i></h4>
                <p>安全稳定，高弹性的计算服务</p>
            </li>
            <li>
                <h4><span>项目管理</span><i class="hotI">HOT</i></h4>
                <p>高效的研发协同工具</p>
            </li>
            <li>
                <h4><span>云监控</span><i class="hotI">HOT</i></h4>
                <p>一站式监控、报警、可视化数据分析</p>
            </li>
            <li>
                <h4><span>短信</span><i class="hotI">HOT</i></h4>
                <p>快速稳定、简单易用得短信服务</p>
            </li>
            <li>
                <h4><span>私有网络</span><i class="hotI">HOT</i></h4>
                <p>独立隔离的网络空间</p>
            </li>
            <li>
                <h4><span>文件存储</span><i class="hotI">HOT</i></h4>
                <p>可共享的文件存储服务</p>
            </li>
            <li>
                <h4> <span>专家服务</span><i class="hotI">HOT</i></h4>
                <p>专家提供得技术服务支持</p>
            </li>
            <li>
                <h4><span>脸部识别</span><i class="hotI">HOT</i></h4>
                <p>精准实时稳定得脸部识别服务</p>
            </li>
</ul>
<script>
 $(window).scroll(function() {
        var scrollToppx = $(document).scrollTop();
        // console.log(scrollToppx)
        if (scrollToppx >= $('.activeDemo').offset().top - window.screen.height) {
            $('.activeDemo li:nth-of-type(3n-2)').addClass('itemizeActive')
            setTimeout(() => {
                $('.activeDemo li:nth-of-type(3n-1)').addClass('itemizeActive')
            }, 250);
            setTimeout(() => {
                $('.activeDemo li:nth-of-type(3n)').addClass('itemizeActive')
            }, 450);
        }
</script>
</body>