CSS交替固定网页背景视觉差特效_jQuery之家-自由分享jQuery、html5、css3的插件库

简要教程

这是一款纯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代码，我们就可以得到一个很好的网页背景视觉差效果的模板。