web页面滚动动画效果（性能方面）

原创已于 2022-03-02 18:09:51 修改

· 1.6k 阅读

2 ·

版权

文章标签：

#前端 #动画 #vue.js

于 2022-03-02 15:19:02 首次发布

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍了前端页面滚动动画的实现，如wow.js和vue3 Composition API，以及元素在视窗内判断的方法，包括IntersectionObserver API。还讨论了回调执行频率、页面内容高度初始化填充、图片预加载和骨架屏技术，以防止白屏问题。同时，分享了一个瀑布流布局的示例代码，展示了如何实现布局的动态调整。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、页面滚动动画

1、wow.js

2、可视区域插入动效vue3 Composition API

https://www.cnblogs.com/xiaonian8/p/15065727.html

二、元素是否在视窗内的判断

1、第一种方案——传统计算

function isInViewPort(element) {
  const viewWidth = window.innerWidth || document.documentElement.clientWidth;
  const viewHeight = window.innerHeight || document.documentElement.clientHeight;
  const {
    top,
    right,
    bottom,
    left,
  } = element.getBoundingClientRect();
 
  return (
    top >= 0 &&
    left >= 0 &&
    right <= viewWidth &&
    bottom <= viewHeight
  );
}
 
// usage
const.log(document.querySelector('.target')) // true or false

2、第二种方案——Intersection Observer API 注册回调

使用教程

DEMO

三、回调执行的频率

四、页面内容高度的初始化填充

五、怎么保证页面图片显示不白屏

1、预加载

2、骨架屏方法

六、瀑布流

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>text-shadow-文字描边</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .box {
            position: relative;
            margin: auto;
            transition: all .5s ease-out;
        }
        
        .box div {
            float: left;
            text-align: center;
            transition: all .5s ease-out;
            margin: 10px;
        }
        
        .w1 {
            width: 100px;
            height: 240px;
            background: #f44336;
        }
        
        .w2 {
            width: 100px;
            height: 100px;
            background: #2196f3;
        }
        
        .w3 {
            width: 100px;
            height: 300px;
            background: #ffc107;
        }
        
        .w4 {
            width: 100px;
            height: 400px;
            background: #009688;
        }
        
        .w5 {
            width: 100px;
            height: 70px;
            background: #ff9800;
        }
    </style>
</head>

<body>
    <div class="box">
        <div class="w1"></div>
        <div class="w2"></div>
        <div class="w3"></div>
        <div class="w4"></div>
        <div class="w5"></div>
        <div class="w1"></div>
        <div class="w2"></div>
        <div class="w3"></div>
        <div class="w4"></div>
        <div class="w5"></div>
        <div class="w1"></div>
        <div class="w2"></div>
        <div class="w3"></div>
        <div class="w4"></div>
        <div class="w5"></div>
    </div>
    <script>
        var boxDivWidth = 0, //元素的宽度
            boxArr = [], //存放每列的高度
            columnCount = 0; //共有几列
        boxDiv = Array.prototype.slice.call($('.box div')); //所有子元素的 数组
        //页面加载完成执行
        window.addEventListener('load', function() {
            resort();
        });
        //视口大小改变执行
        window.addEventListener('resize', function() {
            resort();
        });

        function resort() {
            var boxDiv = $('.box div');
            boxDivWidth = getWidth(boxDiv[0]); //获取单个子元素宽度
            columnCount = Math.floor((window.innerWidth - 20) / boxDivWidth); //-20 视口宽度是为了不显示水平滚动条
            $('.box')[0].style.cssText = 'width:' + boxDivWidth * columnCount + 'px;'; //计算最外层父元素 宽度 + margin 实现水平居中
            boxArr = [];
            for (var i = 0; i < columnCount; i++) { //为每列赋初值
                boxArr[i] = 0;
            }
            boxDiv.forEach(function(item) { //转换伪数组 遍历 每个子元素
                var divItemHeight = getHeight(item);
                var minValue = boxArr[0]; //高度最低列 的值
                var minIndex = 0; //高度最低列 的索引
                for (var i = 0; i < columnCount; i++) {
                    if (boxArr[i] < minValue) { //查找 高度最低的列
                        minValue = boxArr[i];
                        minIndex = i;
                    }
                }
                item.style.cssText = 'position:absolute;left:' + minIndex * boxDivWidth + 'px;top:' + minValue + 'px;'; //设置元素 left top 定位
                boxArr[minIndex] += divItemHeight; //对应列加上新增的 高度
            });
        }

        function $(domtext) {
            return document.querySelectorAll(domtext);
        }

        function getWidth(dom) {
            var style = getComputedStyle(dom); //getComputedStyle方法可以获取 外部样式表中的样式
            return parseInt(style.marginLeft.slice(0, -2)) + parseInt(style.marginRight.slice(0, -2)) + dom.offsetWidth;
        }

        function getHeight(dom) {
            var style = getComputedStyle(dom);
            return parseInt(style.marginTop.slice(0, -2)) + parseInt(style.marginBottom.slice(0, -2)) + dom.offsetHeight;
        }
    </script>
</body>

</html>