仿ElementUI首页滑动图片变色效果

实现效果

实现思路

通过分析服务器托管网ElementUI官网，发现是用两张图片结合滚动条的位置来实现图片变色的效果

我们通过监听当前滚动条的位置，来控制第二张图片的高度，覆盖到第一张图片上

最终实现这个效果

实现代码

    
    
    
    


    body {
        margin: 0 auto;
        padding: 0;
    }

    .root {
        height: 1600px;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .jumbotron-red {
        margin-top: -535px;
        z-inde服务器托管网x: 2;
        overflow: hidden;
    }



    

        
    
    

        
    


    const jumbotron = document.querySelector(".jumbotron-red")
    document.addEventListener("scroll", e => {
        jumbotron.style.height = window.scrollY * 1.3 + "px"
        if (jumbotron.offsetHeight > 530) {
            jumbotron.style.height = "530px"
        }
    })

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net

相关推荐: 解析线性回归：从基础概念到实际应用

目录 前言 1 什么是线性回归 2 线性回归的一些概念 2.1 样本集与样本 2.2 实际值与估计值 2.3 模服务器托管网型参数与最小二乘法 2.4 残差与拟合优度 3 线性回归的应用场景 3.1 销售预测 3.2 医学数据分析 3.3 金融市场分析 结语 …