如何创建简单的视差滚动效果

已发表: 2017-09-08

在本教程中，我们以最简单的方式来看看美丽的视差滚动效果，包括固定的背景和滚动的内容。

下载源文件查看演示

简介

视差是一种效果，当从不同位置观看时，对象的位置似乎不同。视差运动，或者在我们的例子中是视差滚动，给我们一种错觉，即同一视线中的两个物体，但它们之间有距离，似乎以不同的速度移动。如果你曾经在高速公路上以每小时 100 公里的速度行驶时向车窗外看，你会注意到电线杆似乎在高速移动，而背景中的山脉似乎在缓慢移动，几乎停滞不前。这是行动中的视差运动。

就网络而言，我们可以在上面有背景图像和文本的容器上产生视差效应。在最简单的形式中，视差滚动将导致内容正常滚动，而背景保持静止。这种最简单形式的技术的美妙之处在于它只需要 CSS。让我们深入挖掘。

标记和结构

如果您有一个无响应的固定站点，那么实现这一点就没有任何技巧。不过，我们正处于响应式网页设计的时代，所以这是不行的。不要害怕！我们有一些不错的 CSS 可供使用。但首先，看看一些标记。标记很简单——我们将交替使用背景/标题文本sections和内容sections以获得最大效果。这是它的样子：


  
    安详
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...



  



  
    上升
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...
  



  
    冷静的
  



  
    Lorem Ipsum Dolor
    Lorem ipsum dolor sit amet, consectetur adipisicing elit...

每个具有parallax类的section将包含我们的背景图像和标题文本，而具有一类content的每个section将是简单的包含内容的部分。 container类是一个具有最大宽度的流体 div，使得它的响应性非常简单。现在，让我们深入研究 CSS。

样式化和使用 CSS

首先要注意的是，我所有的背景图片的width都是 1600 像素， height是 600 像素。这允许我将视差部分设置为 600 像素的固定高度。不过，还有更多的东西。因为我不想重复背景（我使用的是大而粗的图像），所以我不能总是期望用户处于最大宽度（这将允许背景图像在全视图中）。幸运的是，我们可以利用 CSS background-size属性，并将其设置为cover 。这迫使背景图像通过按比例扩展来占据总可用空间。不过，它需要前缀以获得最大支持，因此请注意这一点。

到目前为止一切顺利，除了最重要的事情。当我们的内容滚动经过它时，我们需要我们的背景图像保持固定。同样，CSS 让我们的生活变得轻松。我们利用background-attachment属性并将其设置为fixed 。简单的！这是我的 CSS 的样子，带有一些示例媒体查询：

 /* ================================================= =============
  主要结构
==================================================== ========== */
。容器 {
  最大宽度：960px；
  边距：0 自动；
}
/* ================================================= =============
  部分
==================================================== ========== */
section.module:last-child {
  边距底部：0；
}
section.module h2 {
  边距底部：40px；
  font-family: "Roboto Slab", serif;
  字体大小：30px；
}
部分.模块 p {
  边距底部：40px；
  字体大小：16px；
  字体粗细：300；
}
section.module p:last-child {
  边距底部：0；
}
section.module.content {
  填充：40px 0；
}
section.module.parallax {
  高度：600px；
  背景位置：50% 50%；
  背景重复：不重复；
  背景附件：固定；
  背景尺寸：封面；
}
section.module.parallax h1 {
  颜色：rgba(255, 255, 255, 0.8);
  字体大小：48px；
  行高：600px；
  字体粗细：700；
  文本对齐：居中；
  文本转换：大写；
  文本阴影：0 0 10px rgba(0, 0, 0, 0.2);
}
section.module.parallax-1 {
  背景图片：url（“../img/demo/_small/1.jpg”）；
}
section.module.parallax-2 {
  背景图片：url（“../img/demo/_small/2.jpg”）；
}
section.module.parallax-3 {
  背景图片：url（“../img/demo/_small/3.jpg”）；
}

@media all and (min-width: 600px) {
  section.module h2 {
    字体大小：42px；
  }
  部分.模块 p {
    字体大小：20px；
  }
  section.module.parallax h1 {
    字体大小：96px；
  }
}
@media all and (min-width: 960px) {
  section.module.parallax h1 {
    字体大小：160px；
  }
}

浏览器支持和属性信息

一般来说，浏览器支持真的很棒。 IE8 及以下不支持background-size属性，但一个简单的条件样式应该可以解决这个问题。除此之外，一切都得到支持，你不应该有任何问题。有关本教程中使用的 CSS 属性的更多信息，请查看 MDN：

背景位置- MDN 参考
背景大小– MDN 参考
背景附件– MDN 参考

包起来

在这里，我们实现了一些简单、有效且与普通的“一次全部滚动”的外观有点不同的东西。我们使用了一些不错但鲜为人知的 CSS 技术来实现我们想要的效果。这是一个包装！不要忘记，您可以通过单击下面的链接查看演示并下载源代码，如果您有任何问题、意见或反馈，您也可以将它们留在下面。