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

简单的网页背景滚动视觉差特效

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

简单的网页背景滚动视觉差特效

简介

##### HTML结构
在body中放置你需要的HTML元素。

```html
<body>
  <div>
    
  </div>
</body>
```
#####  CSS样式 CSS样式
将body元素的高度设置为2倍，背景图片的background-size属性设置为cover，background-attachment属性设置为固定fixed。

```html
body {
  font-family: 'Ubuntu Mono', sans-serif;
  height: 200%;
  width: 100%;
  background-image: url('img/bg.jpg');
  background-attachment: fixed;
  background-size: cover;
}
```
页面中的块级元素使用绝对定位。

```html
div {
  position: absolute;
  top: 40%;
  left: 20%;
  color: white;
  font-size: 1.2em;
  text-shadow: #000 1px 1px 1px;
  width: 1000px;
  height: 200px;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7);
  border-radius: 6px;
}   
```               
#####  javaScript
制作页面背景视觉差效果的javascript代码非常简单：通过监听window对象的onscroll事件，在页面滚动时修改body元素的backgroundPosition样式。

```html
function parallax() {
  window.onscroll = function() {
    var speed = 5.0;
    document.body.style.backgroundPosition = (-window.pageXOffset/speed)+"px "
                                                                         +(-window.pageYOffset/speed)+"px";
  }
}
```

web299.com

简单的网页背景滚动视觉差特效

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

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

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

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