HTML+CSS+JS小项目（1）

爱写代码的吗喽

于 2024-08-06 21:06:23 发布

阅读量617

点赞数 26

分类专栏：前端小项目文章标签： html css 前端

本文链接：https://blog.csdn.net/2401_83913283/article/details/140964994

版权

前端小项目专栏收录该内容

4 篇文章 0 订阅

订阅专栏

参考来源：01.简单的视差滚动_哔哩哔哩_bilibili

由于没有完全一致的素材，所以只能找相近似的素材效果可能不如原视频美观

本文重点放在解释代码的使用

项目一：视差滚动

功能：实现页面视差滚动效果

使用四张图片，一张是jpg格式的背景图片，其余三张是抠图的png格式图片，注意这里后面三张图片一定要是透明抠图，否则无法实现部分覆盖和滚动，只会整张图片覆盖。

HTML部分：代码比较简单，四张图片，一个标题

    <section>
        <img src="bg.jpg" id="bg">
        <img src="moon.png" id="moon">
        <img src="mountain.png" id="mountain">
        <img src="road.png" id="road">
        <h2 id="text">Hello, New day</h2>
    </section>

CSS部分

*{
   margin: 0;
   padding: 0;
   font-family: 'Poppins',sans-serif;
}

font-family属性具体解释：font-family - CSS：层叠样式表 | MDN (mozilla.org)

        body{
            background: #94c7f1;
            min-height: 1500px;
        }

        section{
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }

使用元素选择器设置body部分的高度铺满整个页面，背景颜色可以更改；

section部分设置相对位置，宽度设置100%占满整个body部分，这里的overflow应该是为了溢出隐藏，因为body中设置了高度。

display: flex;设置section部分为弹性盒子

justify-content: center;水平居中

align-items: center;垂直居中

一般使用上述两句，是某个元素处在盒子的中间位置。

      section::before{
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to top,#94c7f1,transparent);
            z-index: 10000;

        }
       section::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #94c7f1;
            z-index: 10000;
            mix-blend-mode: color;
 
        }

设置网页中的<section>元素的伪元素before和after的样式。伪元素允许在元素内容之前或之后插入内容，而不需要实际修改HTML结构。

content: "";设置一个内容为空的伪元素。

position: absolute;设置伪元素的定位方式为绝对定位。

bottom: 0;将伪元素的底部与<section>元素的底部对齐。

width: 100%; 设置伪元素的宽度与<section>元素相同。

height: 100px;设置伪元素的高度为100像素。

background: linear-gradient(to top,#94c7f1,transparent); 设置伪元素的背景为从下到上的线性渐变，从#94c7f1颜色渐变到透明。

z-index: 10000; 设置伪元素的堆叠顺序，数值越大，元素越在上层。

mix-blend-mode: color;设置混合模式为color，这将使伪元素的背景颜色与下方内容混合，但只影响背景颜色，不影响内容的可见性。

 section img{
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: none;
            
        }

使用后代选择器，第一句代码将所有图片标签设置为绝对定位，相对于body元素进行定位

设置top为0，图片顶部与body对齐；

设置left为0，图片左侧与body对齐；

设置宽高100%图片占满整个setion；

object-fit:cover；将图片缩放填充到容器，同时保持宽高比例，可能会导致图片部分被裁剪

这条语句确保了图片完全覆盖容器。

pointer-events:none;设置图片不接受任何鼠标事件，只作为背景

这段代码在创建全屏背景时非常有用

        #text{
            position: relative;
            color: #fff;
            font-size: 10em;
            z-index: 1;
        }
        #road{
            display: flex;
            margin-top:200px ;
            z-index: 2;
        }

ID选择器设置文本和第四张图片的一些渲染。

这里想要实现滑动时第四张图覆盖文字的效果。

JS部分

 <script type="text/javascript">
        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";
            mountain.style.top = value *0.15+"px";
            road.style.top = value *0.15+"px";
            text.style.top = value *1+"px";
        })
    </script>

实现根据页面的滚动位置动态改变页面元素位置。

前面五句都是通过id引入存储变量

后面为窗口对象添加了一个事件监听器，当用户滚动界面时，触发事件执行里面的函数

var value = window.scrollY;声明了一个变量用来存储当前页面垂直滚动的距离。

bg.style.top = value *0.5+"px";将bg元素的top样式设置为当前滚动距离的50%

后面的代码同理，设置不同滚动距离会给页面增加一种深度感和动态效果。

具体代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=<device-width>, initial-scale=1.0">
    <title>Document</title>
    <style>
        /*全局选择器设置了边距为0，图片会占满整个页面，设置字体格式*/
        *{
            margin: 0;
            padding: 0;
            font-family: 'Poppins',sans-serif;
        }
        body{
            background: #94c7f1;
            min-height: 1500px;
        }
        section{
            position: relative;
            width: 100%;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        section::before{
            content: "";
            position: absolute;
            bottom: 0;
            width: 100%;
            height: 100px;
            background: linear-gradient(to top,#94c7f1,transparent);
            z-index: 10000;

        }
        section::after{
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: #94c7f1;
            z-index: 10000;
            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;
            font-size: 10em;
            z-index: 1;
        }
        #road{
            display: flex;
            margin-top:200px ;
            z-index: 2;
        }

    </style>
</head>
<body>
    <section>
        <img src="bg.jpg" id="bg">
        <img src="moon.png" id="moon">
        <img src="mountain.png" id="mountain">
        <img src="road.png" id="road">
        <h2 id="text">Hello, New day</h2>
    </section>
    <script type="text/javascript">
        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";
            mountain.style.top = value *0.15+"px";
            road.style.top = value *0.15+"px";
            text.style.top = value *1+"px";
        })
    </script>
</body>
</html>

效果：放一个静态图，运行滚动会有动态效果

素材：来源网络，后三张图片是自己抠图