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

最新推荐文章于 2024-05-27 17:46:44 发布

ヅLucky_triplex

最新推荐文章于 2024-05-27 17:46:44 发布

阅读量194

点赞数

分类专栏：项目分析文章标签： css html css3

本文链接：https://blog.csdn.net/kxdhshlg/article/details/116135475

版权

项目分析专栏收录该内容

4 篇文章 0 订阅

订阅专栏

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站

ヅLucky_triplex

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
1.CSS 简单的视差滚动效果

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"> <tit
复制链接

扫一扫