视差滚动效果

Frilled Lizard

已于 2024-08-26 16:51:43 修改

阅读量745

点赞数 23

文章标签：前端 javascript 开发语言 css3

于 2024-08-26 16:38:59 首次发布

本文链接：https://blog.csdn.net/zing_ing/article/details/141567650

版权

视差滚动效果（Parallax Scrolling）是一种网页设计技术，背景内容比前景内容移动得更慢，从而创造出一种深度感和动态感。类似下面这种：
在这里插入图片描述

1.使用纯 CSS 实现视差效果

CSS 的 background-attachment 属性可以用来实现简单的视差滚动效果。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
    body,
    html {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow-x: hidden;

    }

    .parallax {
      height: 100vh;
      /* 视窗高度 */
      background-attachment: fixed;
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
    }

    .pic1 {
      background-image: url('banner1.jpg');
    }

    .pic2 {
      background-image: url('banner2.jpg');
    }

    .content {
      background-image: url('banner3.jpg');
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;

      height: 100vh;
      background-color: #f2f2f2;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 2em;
    }
  </style>
</head>

<body>
  <div class="parallax pic1"></div>
  <div class="content">Content Section 1</div>
  <div class="parallax pic2"></div>
  <div class="content">Content Section 2</div>
</body>

</html>

.parallax: 这个类用于背景图片部分，background-attachment: fixed;
使背景图片固定在视窗中，而其他内容在滚动时移动，从而产生视差效果。
.content: 这个类用于显示普通内容部分。
这种方法简单易实现，但仅适用于背景图像，并且在某些浏览器或设备上可能存在兼容性问题。

background-attachment 是 CSS3 中用来设置背景图像是随内容一起滚动、固定在视口上，还是其他行为的属性。它有以下几种取值：

scroll（默认值）：背景图像会随着页面内容的滚动而滚动。这是默认行为。
fixed：背景图像相对于视口固定，不会随内容滚动。
local：背景图像随元素内容的滚动而滚动（适用于内容可滚动的元素）。
inherit：从父元素继承该属性的值。

2.使用视差库

Rellax.js 或 Parallax.js。这些库能够提供更复杂的效果和更简单的实现方式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.min.css">
    <style>
        .parallax {
            height: 100vh;
            background-size: cover;
            background-position: center;
        }

        .content {
            height: 100vh;
            background-color: #f2f2f2;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 2em;
         }
	</style>
</head>
<body>

<div class="parallax rellax" data-rellax-speed="5" style="background-image: url('your-image1.jpg');"></div>
<div class="content">Content Section 1</div>
<div class="parallax rellax" data-rellax-speed="2" style="background-image: url('your-image2.jpg');"></div>
<div class="content">Content Section 2</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/rellax/1.12.1/rellax.min.js"></script>
<script>
    // Initialize Rellax.js
    var rellax = new Rellax('.rellax');
</script>

</body>
</html>

Rellax.js: 是一个简单而强大的视差滚动库，允许你为不同的元素设置不同的滚动速度。使用 data-rellax-speed
属性可以控制元素的滚动速度，值越大，滚动速度越快，视差效果越明显。
初始化 Rellax.js: 通过 new Rellax(‘.rellax’) 初始化库并应用到带有 rellax 类的元素上。