1.CSS 简单的视差滚动效果

2021-04-25 18:57:23 阅读：207 来源： 互联网

标签：index 滚动 100% value CSS section road top 视差

HTML 代码

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>scroll</title>
    <link rel="stylesheet" type="text/css" href="scroll.css">
</head>

<body>
    <section>
        <img src="images/bg.jpg" id="bg">
        <img src="images/moon.png" id="moon">
        <img src="images/mountain.png" id="mountain">
        <img src="images/road.png" id="road">
        <h2 id="text">Moon Light</h2>
    </section>
    <script>
 /*获取元素 */
        let bg = document.getElementById("bg");
        let moon = document.getElementById("moon");
        let mountain = document.getElementById("mountain");
        let road = document.getElementById("road");
        let text = document.getElementById("text");
 /*为元素添加监听   页面滚动事件 */
        window.addEventListener('scroll', function() {
            var value = window.scrollY;
            bg.style.top = value * 0.5 + 'px';
            moon.style.left = value * 0.5 + 'px';
 /*山的图片是向上移动的，因此top为负值 */
            mountain.style.top = -value * 0.15 + 'px';
            road.style.top = value * 0.15 + 'px';
            text.style.top = value * 1 + 'px';
        })
    </script>
</body>

</html>

CSS代码

 /*清除内外边距 设置字体 */
* {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

body {
    background: #0a2a43;
    min-height: 1500px;
}

section {
 /* 子绝父相 ： 儿子是绝对定位，父亲就要是相对定位  */
    position: relative;
    width: 100%;
 /* 100vh 是整个屏幕高度  */
    height: 100vh;
    overflow: hidden;
 /* flex 布局 */
    display: flex;
 /*设置主轴排列 */
    justify-content: center;
/*设置侧轴排列 */
    align-items: center;
}
/* section::before 这一步是为了使得图片与背景衔接的那一块有一个颜色的过渡 */
section::before {
    content: "";
    position: absolute;
    bottom: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, #0a2a43, transparent);
    z-index: 999;
}
/* section::after  这一步是为了使得图片有一个覆盖的颜色  */
section::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #0a2a43;
    z-index: 999;
/*“颜色”模式模式可以看成是“饱合度”模式和“色相”模式的综合效果。 */
    mix-blend-mode: color;
}

section img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
/*遇到图像变形时 最佳最完美的居中自动剪裁 */
    object-fit: cover;
 /*  阻止用户的点击动作产生任何效果*/
    pointer-events: none;
}
 /*  字体要占位 用相对定位*/
#text {
    position: relative;
    color: #fff;
/*  em 相对于父节点字体的大小  整个页面的1em不是一个固定的值 */
    font-size: 10em;
 /*  字体要在图片之上  因此要设置z-index*/  
    z-index: 1;
}
/*  字体在移动时会藏在road图片的下边，因此road图片的 z-index要比文字的z-index大 */
#road {
    z-index: 2;
}

视频链接：Youtube
视频链接：B站

标签：index,滚动,100%,value,CSS,section,road,top,视差
来源： https://blog.csdn.net/kxdhshlg/article/details/116135475

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

1.CSS 简单的视差滚动效果