随着互联网的不断发展和用户对页面体验的不断提高，前端开发中的各种效果也日益丰富和多样化。视差滚动效果是一种比较热门的效果，通过这种效果可以让页面看起来更加动态和优美。本文将介绍两种用 CSS Flexbox 实现视差滚动效果的方法，同时提供相关的示例代码。
方法一：利用 Flexbox 和 transform 实现视差滚动
利用 Flexbox 和 transform 实现视差滚动效果的方法比较简单，只需要掌握好 transform 属性即可。下面是具体实现的步骤：
首先，需要把整个页面的容器设置为 Flexbox 布局，即设置
display: flex。在页面容器中分别设置两个子容器（也可以是多个），并分别设置不同的背景图片和高度，子容器的高度需要大于页面容器的高度。
添加一个和页面容器同级的 div 容器，用来放置所有子容器，设置这个 div 容器的高度为页面容器高度的倍数，即使得所有子容器全部显示出来。
使用 transform 属性对子容器进行移动，从而实现视差滚动效果。具体实现过程如下：
- 针对第一个子容器，设置
transform: translateY(0)，即不进行移动。 - 针对第二个子容器，设置
transform: translateY(-50%)，即在 y 轴方向上向上移动一半。 - 根据需求可以继续设置其他子容器的移动方式。
- 针对第一个子容器，设置
具体代码如下：
HTML:
<div class="parallax-container"> <div class="parallax-item parallax-item1"></div> <div class="parallax-item parallax-item2"></div> </div>
CSS:
-- -------------------- ---- ------- ------------------- - ------- ------ -------- ----- --------------- ------- - -------------- - ------- ------ -------------------- ------- ------------------ ---------- ---------------- ------ ----- -- - --------------- - ----------------- ------------------ - --------------- - ----------------- ------------------ ---------- ----------------- -展开代码
方法二：利用 Flexbox 和 background-attachment 实现视差滚动
另外一种用 CSS Flexbox 实现视差滚动效果的方法是利用 background-attachment 属性，这个属性可以设置背景图片的滚动方式。具体实现过程如下：
- 定义一个包含多个子容器的容器，使用 Flexbox 布局，设置为
display: flex; flex-direction: column。 - 对每个子容器设置不同的背景图片和高度，子容器的高度需要大于页面容器的高度。
- 给背景图片设置
background-attachment: fixed;属性，这样就可以实现背景图片不随页面滚动而滑动。 - 根据需求通过跨越不同子容器实现视差滚动效果。
具体代码如下：
HTML:
<div class="parallax-container"> <div class="parallax-item parallax-item1"></div> <div class="parallax-item parallax-item2"></div> </div>
CSS:
-- -------------------- ---- ------- ------------------- - ------- ------ -------- ----- --------------- ------- - -------------- - ------- ------ ----- -- -------------------- ------- ------------------ ---------- ---------------- ------ ---------------------- ------ - --------------- - ----------------- ------------------ - --------------- - ----------------- ------------------ -展开代码
注意事项
在使用以上两种方法实现视差滚动效果的时候，需要注意以下几点：
- 子容器的高度需要大于页面容器的高度，这样才能保证视差滚动的效果。
- 在第一种方法中，需要设置容器的高度为 100vh，而在第二种方法中，则需要设置为子容器的高度之和。
- 在使用 Flexbox 和 background-attachment 实现视差滚动的时候，需要注意背景图片的大小和比例，这样才能保证图片不被拉伸变形。
结语
本文介绍了两种用 CSS Flexbox 实现视差滚动效果的方法，通过这两种方法可以轻松实现视差滚动效果，让页面看起来更加动态和有趣。同时也说明了两种方法的注意事项，有助于开发者更好地实现视差滚动效果。希望这篇文章对前端开发者对实现视差滚动效果有所启发和帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67c25b21314edc2684b86816
