视差滚动是一种效果,能够使不同层次的元素以不同的速度进行滚动,从而产生了视觉上的深度感和动态效果。可以通过两种方式来实现:background-attachment
和transform:translate3D
background-attachment:决定背景图像的位置是在视口内固定,或者随着包含它的区块滚动。
它的属性值的含义如下:
属性值 | 含义 |
---|---|
fixed | 背景相对于视口固定。即使一个元素拥有滚动机制,背景也不会随着元素的内容 |
local | 背景相对于元素的内容固定。如果一个元素拥有滚动机制,背景将会随着元素的内容滚动,并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。 |
scroll | 背景相对于元素本身固定,而不是随着它的内容滚动(对元素边框是有效的)。 |
对父元素css_demo
设置overflow: scroll
,当元素内容超出页面时滚动。子元素word
随着页面滚动显示,对子元素bg
设置background-attachment: fixed
,使其在当前视口固定。
<template>
<div class="css_demo">
<div class="word">视差滚动</div>
<div class="bg bg1"></div>
<div class="word">二</div>
<div class="bg bg2"></div>
<div class="word">三</div>
<div class="bg bg3"></div>
<div class="word">四</div>
<div class="bg bg4"></div>
<div class="word">五</div>
<div class="bg bg5"></div>
<div class="word">六</div>
<div class="bg bg6"></div>
<div class="word">七</div>
<div class="bg bg7"></div>
<div class="word">八</div>
<div class="bg bg8"></div>
<div class="word">九</div>
<div class="bg bg9"></div>
</div>
</template>
<style lang='scss' scoped>
.css_demo {
width: 100%;
height: 100%;
overflow: scroll;
.bg {
background-position: center center;
background-size: cover;
background-attachment: fixed;
&.bg1 {
background-image: url("/src/assets/img/1.jpeg");
}
&.bg2 {
background-image: url("/src/assets/img/2.webp");
}
&.bg3 {
background-image: url("/src/assets/img/3.webp");
}
&.bg4 {
background-image: url("/src/assets/img/4.webp");
}
&.bg5 {
background-image: url("/src/assets/img/5.webp");
}
&.bg6 {
background-image: url("/src/assets/img/6.webp");
}
&.bg7 {
background-image: url("/src/assets/img/7.webp");
}
&.bg8 {
background-image: url("/src/assets/img/8.webp");
}
&.bg9 {
background-image: url("/src/assets/img/9.webp");
}
}
}
div {
height: 100%;
width: 100%;
background: rgba(0, 0, 0, 0.1);
color: #fff;
line-height: 100vh;
text-align: center;
font-size: 20vh;
}
</style>
实现效果如下:
涉及到的CSS属性如下:
perspective
可以让我们眼睛看到 3d 立体效果,有空间感。通过设置transform-style
和 perspective
,使该容器的子元素处在3D空间中,然后设置transform: translateZ
使物体在滚动的时候在Y轴移动位移不同,产生视觉差。
<template>
<div class="transform_container">
<div class="container">
<div class="one">一一一一</div>
<div class="two">二二二二</div>
<div class="three">三三三三三</div>
</div>
</div>
</template>
<style scoped lang="scss">
.transform_container {
perspective: 1px;
transform-style: preserve-3d;
height: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
.container {
transform-style: preserve-3d;
height: 150%;
.one {
font-weight: 600;
transform: translateZ(-1px);
position: absolute;
top: 20%;
left: 20%;
}
.two {
font-weight: 600;
transform: translateZ(-2px);
position: absolute;
top: 20%;
left: 35%;
}
.three {
font-weight: 600;
transform: translateZ(-3px);
position: absolute;
top: 20%;
left: 50%;
}
}
</style>
具体实现效果如下:
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。