需求
想要实现这里 的背景视差 的效果
- 鼠标滚动的时候背景跟着小幅移动
- 网页、元素滚动的时候背景不会跟着一起滚动
方法
对于背景不跟着网页一起滚动,可以使用 css3 属性:background-attachment 来实现
对于鼠标滚动时背景小幅移动则需要 js 介入
过程
html文件:
<!DOCTYPE html>
<html lang="en">
<head>
......
<title>视差页</title>
<link rel="stylesheet" href="./style.css">
<script src="./script.js"></script>
</head>
<body>
<div class