كيفية إنشاء: السحابة المظلمة

تعلم كيفية إنشاء تأثير السحابة المظلمة باستخدام CSS.

السحابة المظلمة

السحابة المظلمة هي اتجاه تصميم مواقع الويب حيث تختلف سرعة الحركة للمحتوى الخلفي (مثل الصور) عن المحتوى الأمامي عند التمرير. انقر على الرابط أدناه للمعرفة الفرق بين مواقع الويب التي تحتوي على السحابة المظلمة والذين لا يحتويان عليها.

有视差滚动效果的演示

无视差滚动效果的演示

注意：视差滚动并不总是在移动设备/智能手机上有效。但是，您可以使用媒体查询在移动设备上关闭此效果（请参阅本页最后一个例子）。

如何创建视差滚动效果

使用一个容器元素，并向该容器添加一幅具有特定高度的背景图像。然后，使用 background-attachment: fixed 创建实际的视差效果。其他背景属性用于居中和完美缩放图像：

以像素为单位的实例

<style>
.parallax {
  /* 所用的图像 */
  background-image: url("img_parallax.jpg");
  /* 设置特定高度 */
  min-height: 500px;
  /* 创建视差滚动效果 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}
</style>
<!-- Container element -->
<div class="parallax"></div>

亲自试一试

上面的例子使用像素来设置图像的高度。如果您想使用百分比，例如 100%，以使图像适合整个屏幕，请将视差容器的高度设置为 100%。注意：您还必须将 height: 100% 应用于 <html> 和 <body>：

以百分比为单位的实例

body, html {
  height: 100%;
}
.parallax {
  /* 所用的图像 */
  background-image: url("img_parallax.jpg");
  /* 全高 */
  height: 100%;
  /* 创建视差滚动效果 */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

亲自试一试

一些移动设备在使用 background-attachment: fixed 时会出现问题。但是，您可以使用媒体查询在移动设备上关闭视差效果：

实例

/* 关闭所有平板电脑和手机的视差滚动。如果需要，可以增加/减少像素 */
@media only screen and (max-device-width: 1366px) {
  .parallax {
    background-attachment: scroll;
  }
}

亲自试一试

在上述代码中，当屏幕宽度小于或等于 1366 像素时，将关闭视差滚动效果，这对于大多数平板电脑和手机都是适用的。这是通过改变 .parallax 类的 background-attachment 属性从 fixed 到 scroll 来实现的。这样，背景图像就会随着页面的其余部分一起滚动，而不是固定在视口中。