网页布局与动画效果实现-优快云博客

本文链接：https://blog.youkuaiyun.com/printf_hello/article/details/106611495

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>one</title>
  <link href="./css/sticky2.css" rel="stylesheet" type="text/css" />
</head>

<body>
  <div class="container">
    <div class="black inner">
      <h3 style="color: white;">black</h3>
      <img id='img' src="./image/black.png">
    </div>
    <div class="white inner">
      <h3 style="color: black;">white</h3>
      <img id='img' src="./image/white.png">
    </div>
    <div class="red inner">
      <h3 style="color:aquamarine;">red</h3>
      <img id='img' src="./image/red.png">
    </div>
  </div>
  <script>
    let white = document.querySelector('.white')
    let red = document.querySelector('.red')
    let Img = document.getElementById('img')
    let scrollHeight = document.documentElement.scrollHeight
    let clientHeight = document.documentElement.clientHeight
    window.onscroll = function () {
      let scrollTop = document.documentElement.scrollTop;

      let inset = (scrollTop / (scrollHeight - clientHeight)) * 100

      white.style.clipPath = `inset(${(50 - inset) * 2}% 0 0 0)`
      red.style.clipPath = `inset(${(100 - inset) * 2}% 0 0 0)`
    }
  </script>
</body>
</html>

* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
html,body {
  height: 600vh;
  overflow: visible;
}
.container {
  min-height: 100vh;
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  overflow: hidden;
}
.inner {
  width: 100vw;
  display: flex;
  justify-content: center;
  position: absolute;
  overflow: hidden;
}
.inner h3 {
  position: absolute;
  font-family: Arial, Helvetica, sans-serif;
  font-weight: bold;
  font-size: 60px;
  top: 100px
}
.inner img {
  transform: translateY(40%);
}
.black{
  background-color: black;
}
.white{
  background-color: white;
  z-index: 5;
  -webkit-clip-path: inset(100% 0px 0px 0px);
}
.red{
  background-color: rgb(142, 3, 3);
  z-index: 10;
  -webkit-clip-path: inset(100% 0px 0px 0px);
}