根据滚动事件进行页面动画

最新推荐文章于 2021-06-09 12:02:49 发布

一棵喂猪的白菜

最新推荐文章于 2021-06-09 12:02:49 发布

阅读量439

点赞数 2

分类专栏：源码

本文链接：https://blog.csdn.net/weixin_40308535/article/details/90288234

版权

源码专栏收录该内容

7 篇文章 0 订阅

订阅专栏

根据滚动事件进行页面动画

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        body {
            padding-top: 200px;
            height: 1000px;
        }

        .item {
            position: relative;
            left: -50px;
            top: -50px;
            width: 100px;
            height: 100px;
            display: inline-block;
        }

        .item1 {
            margin-left: 150px;
            background-color: red;
        }

        .item2 {
            background-color: blue;
        }

        .item3 {
            margin-left: 130px;
            background-color: aqua;
        }
    </style>
</head>

<body>
    <div id="anim">
        <div class="item item1" data-end-x=-130 data-end-y=0 data-scale=2 data-ratio=0></div>
        <div class="item item2" data-end-x=130 data-end-y=0></div>
         <div class="item item2" data-end-x="-110" data-end-y="130"></div> 
         <div class="item item3" data-end-x="-120" data-end-y="-110"></div> 
    </div>
    <script>
        // 父类
        var anim = document.getElementById('anim')
        console.log(anim)
        // 子类
        var animChild = anim.children
        // 所有需要动的元素
        var actList = []
        // 获取数据
        for (var i = 0, l = animChild.length; i < l; i++) {
            
            var _item = animChild[i]
            
            if (_item.dataset) {
                var _data = _item.dataset

                _data.scale = _data.scale || 1
                _data.ratio = _data.ratio || 0

                actList.push({
                    el: _item,
                    move: _data
                })
            }
        }

        console.log(actList)

        // 滚动事件
        window.onscroll = function () {
            // 滚动条数据
            var scrollY = window.scrollY
            // 遍历需要运动的元素
            for (var i = 0, l = actList.length; i < l; i++) {
                // 当前第几个
                var _item = actList[i]
                //运动参数
                var _actMove = { x: 0, y: 0, scale: 1 }

                //缩放大小
                var _scale = parseFloat(_item.move.scale)
                //倍率
                var _ratio = parseFloat(_item.move.ratio)
                //X轴
                var _endX = parseFloat(_item.move.endX)
                //Y轴
                var _endY = parseFloat(_item.move.endY)


                if (_endX < 0) {
                    _actMove.x = 0 - scrollY > _endX ? 0 - scrollY : _endX
                } else {
                    _actMove.x = scrollY < _endX ? scrollY : _endX
                }
                
                if (_endY < 0) {
                    _actMove.y = 0 - scrollY > _endY ? 0 - scrollY : _endY
                } else {
                    _actMove.y = scrollY < _endY ? scrollY : _endY
                }

                // 如果倍率存在
                if (_ratio) {
                    if (_scale < 1) {
                        _actMove.scale = 1 - (scrollY * _ratio) < 0 ? 0 : 1 - (scrollY * _ratio)
                    } else if (_scale > 1) {
                        _actMove.scale = 1 + (scrollY * _ratio) > _scale ? _scale : 1 + (scrollY * _ratio)
                    }
                }
                // 修改样式
                _item.el.style.transform = 'translate(' + _actMove.x + 'px,' + _actMove.y + 'px)  scale(' + _actMove.scale + ')'
            }
        }
    </script>
</body>

</html>

效果