如何创建视差滚动效果-之路教程

←如何使用 HTML 和 CSS 创建多色文本

如何仅使用 HTML 和 CSS 为 HTML5 <select> 框创建占位符？→

如何创建视差滚动效果

创建需要令人兴奋的设计来吸引访问者并增加用户参与度。
流行的效果之一是视差效果。

在创建视差效果之前，让我们看看它是什么以及它来自其中。

视差效果使背景和前景内容在滚动时以不同的速度移动。
视差设计总是能引起用户的注意。
“视差”一词最初来自视觉 2D 效果横向卷轴视频游戏，它使用不同的背景图像移动速度在游戏过程中创造深度错觉。

它可以用于任何的任何页面或者帖子。
大多数情况下，它出现在主页、登录页面或者单页上。

添加 CSS

设置“视差效果”类的样式。

借助 background-image 属性设置图像链接并指定 min-height。
使用 background-attachment 属性指定背景图像是固定的还是与页面的其余部分一起滚动。
使用 background-position 属性指定背景图像的起始位置。

我们将其设置为“中心”。

将 background-repeat 属性设置为“no-repeat”，将 background-size 设置为“cover”。

现在，设置“文本”类的样式。

设置高度属性并使用具有“线性渐变”值的背景图像。
指定字体大小和字体系列。
将 text-align 属性设置为其“中心”值。

.parallax-effect {
  background-image: url("nature.png");
  min-height: 600px;
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
.text {
  height: 1000px;
  background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4);
  font-size: 36px;
  text-align: center;
  font-family: 'Raleway', Arial, sans-serif;
}

所以，这是最简单的视差效果示例。

使用 <div> 标签创建视差滚动效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .parallax-effect {
        background-image: url("nature.png");
        min-height: 600px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .text {
        height: 1000px;
        background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4);
        font-size: 36px;
        text-align: center;
        font-family: 'Raleway', Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="parallax-effect"></div>
    <div class="text">
      Parallax Effect
    </div>
  </body>
</html>

在下一个示例中，我们再添加一个 <div> 以便当我们滚动时，会在最后看到图像。
让我们改用 CSS 内部样式。

这样代码就更明显了。

使用 CSS 内部样式创建视差滚动效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      .parallax-effect {
        background-image: url("nature.png");
        min-height: 600px;
        background-attachment: fixed;
        background-position: center;
        background-repeat: no-repeat;
        background-size: cover;
      }
      .parallax-effect + div {
        height: 1000px;
        background-image: linear-gradient(to right top, #faa7e4, #f395e5, #e983e9, #dc72ee, #cb63f4);
        font-size: 36px;
        text-align: center;
        font-family: 'Raleway', Arial, sans-serif;
      }
    </style>
  </head>
  <body>
    <div class="parallax-effect"></div>
    <div>
      Parallax Effect
    </div>
    <div class="parallax-effect"></div>
  </body>
</html>

接下来，我们使用 <section> 标签创建视差效果。

<section> 标记通常用于创建登录页面以将页面划分为单独的逻辑块。

使用 <section> 标签创建视差滚动效果的示例：

<!DOCTYPE html>
<html>
  <head>
    <title>文档的标题</title>
    <style>
      body {
        background-color: #eeeeee;
        margin: 0;
        padding: 0;
        border: 0;
      }
      h2 {
        font-family: 'Noto Sans', serif;
        font-size: 2em;
        color: #000000;
      }
      p {
        font-family: 'Noto Sans', sans-serif;
        font-size: 1em;
        line-height: 1.5em;
        color: #666;
        margin: 30px 0;
        text-indent: 30px;
      }
      .image {
        background: url("nature.png") no-repeat fixed;
        background-position: center center;
        background-size: cover;
        min-height: 500px;
      }
      .content {
        max-width: 960px;
        margin: 0 auto;
        box-sizing: border-box;
        -moz-box-sizing: border-box;
        position: relative;
        z-index: 2;
        height: 100%;
      }
    </style>
  </head>
  <body>
    <div class="image"></div>
    <section class="content">
      <h2>Parallax Effect</h2>
      <p>
        今天很残酷，明天很残酷，后天很美好。很多人死在了明天的夜里。
经历过风雨，才懂得阳光的温暖。

      </p>
      <hr>
      <div>
        <p>
          生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

        </p>
        <p>
         生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

        </p>
        <p>
          生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

        </p>
        <p>
          生活本就是矛盾的,白天与黑夜间的距离,春夏秋冬之间的轮回,于是有了挑剔的喜爱,让无奈加上了喜悦的等待。
是谁把光阴剪成了烟花，一瞬间，看尽繁华。是谁把思念翻起了浪花，一转身，浪迹天涯。

        </p>
        
      </div>
    </section>
  </body>
</html>

创建 HTML

创建一个类名为“视差效果”的 <div> 元素。
在第一个 <div> 中添加另一个类名为“text”的 <div>。

<div class="parallax-effect"></div>
<div class="text">
  Parallax Effect 
</div>

日期：2020-06-02 22:15:02 来源：oir作者：oir