Web-视差滚动

转自 B 站 UP 主前端小小陈。

资源

演示

代码

html
<!DOCTYPE html>
<html lang="en">
<head>
  <title>Parallax Scrolling Website</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <a href="#" class="logo">Logo</a>
    <ul>
      <li><a href="#" class="active">Home</a></li>
      <li><a href="#">About</a></li>
      <li><a href="#">Work</a></li>
      <li><a href="#">Contact</a></li>
    </ul>
  </header>
  <section>
    <img src="images/stars.png" id="stars">
    <img src="images/moon.png" id="moon">
    <img src="images/mountains_behind.png" id="mountains_behind">
    <h2 id="text">Moon Light</h2>
    <a href="#sec" id="btn">Explore</a>
    <img src="images/mountains_front.png" id="mountains_front">
  </section>
  <div class="sec" id="sec">
    <h2>Parallax Scrolling Effects</h2>
    <p>....</p>
  </div>
  <script>XXX</script>
</body>
</html>