由于没有完全一致的素材,所以只能找相近似的素材效果可能不如原视频美观
本文重点放在解释代码的使用
项目一:视差滚动
功能:实现页面视差滚动效果
使用四张图片,一张是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>
效果:放一个静态图,运行滚动会有动态效果
素材:来源网络,后三张图片是自己抠图