当前位置：首页 > 网页特效 > 滚动

CSS交替固定网页背景视觉差特效

分类：滚动日期：2024-05-14 点击(0) 评论(0)

CSS交替固定网页背景视觉差特效

简介

##### HTML结构

------------

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

```html
<main>
  <div class="cd-fixed-bg cd-bg-1">
    <h1></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来使动画变得更加平滑。

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

web299.com

CSS交替固定网页背景视觉差特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果