这是一款纯CSS交替固定网页背景视觉差特效插件。如何创建一个没有javascript的交替固定的背景视觉差效果呢?我们可以通过CSS background-attachment属性来实现它。

现在又很多网站上都使用了背景视觉差效果。我们可以在不影响网站性能的前提下只通过CSS来实现背景视觉差效果。你所要知道的仅是如何使用CSS background-attachment属性。

HTML结构

html结构中class为.cd-fixed-bg<div>,被用来放置固定的背景图片;class为.cd-scrolling-bg<div>被用来放置文本内容。

<main>
  <div class="cd-fixed-bg cd-bg-1">
    <h1><!-- title goes here --></h1>
  </div> 
 
  <div class="cd-scrolling-bg cd-color-2">
    <div class="cd-container">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore incidunt suscipit similique, dolor corrupti cumque qui consectetur autem laborum fuga quas ipsam doloribus sequi...
      </p>
    </div> 
  </div> 
</main>
                

CSS样式

默认情况下,background-attachment的值是Scroll,意思是背景和元素一起滚动。但是如果你将background-attachment设置为Fixed,那么背景就像一个位置固定的元素一样:它随着窗口一起移动。

在桌面设备上(屏幕大小超过1024px),我们为.cd-item-info设置position: absolute width: 50% ,并将其放在屏幕的右边。

对于.cd-slider-wrapper元素,我们设置其width: 50%。当用户点击了图片幻灯片,我们为.cd-single-item添加.cd-slider-active class:.cd-slider-wrapper的宽度将被设置为100%。通过这个方法,.cd-slider-wrapper将变大,覆盖掉.cd-item-info,并将额外内容向下推进。通过在宽度值上使用CSS3 Transition来使动画变得更加平滑。

body, html, main {
  /* important */
  height: 100%;
}
 
.cd-fixed-bg {
  min-height: 100%;
  background-size: cover;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center center;
}
 
.cd-fixed-bg.cd-bg-1 {
  background-image: url("../img/cd-background-1.jpg");
}
.cd-fixed-bg.cd-bg-2 {
  background-image: url("../img/cd-background-2.jpg");
}
.cd-fixed-bg.cd-bg-3 {
  background-image: url("../img/cd-background-3.jpg");
}
.cd-fixed-bg.cd-bg-4 {
  background-image: url("../img/cd-background-4.jpg");
}
 
.cd-scrolling-bg {
  min-height: 100%;
}
                

通过几行CSS代码,我们就可以得到一个很好的网页背景视觉差效果的模板。