用html+js实现网页颜色切换特效【建议收藏】

最新推荐文章于 2024-05-16 15:04:34 发布

沐阳gg

最新推荐文章于 2024-05-16 15:04:34 发布

阅读量580

点赞数 1

分类专栏： html从入门到入土文章标签： javascript html iphone

本文链接：https://blog.csdn.net/qq_52545155/article/details/129155835

版权

html从入门到入土专栏收录该内容

36 篇文章 10 订阅

订阅专栏

这里以iPhone SE 产品举例，给大家实现一个颜色切换的特效，学了之后麻麻再也不用担心我不会做颜色切换了；先看效果，然后代码自取，分享不易，建议铁子们留个三连

1、效果展示

2、代码分享

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

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    html {
      font-size: 48px;

      --iphone-black-bg: #000;
      --iphone-black-text: #f2f2f2;

      --iphone-white-bg: #fff;
      --iphone-white-text: #8b8b99;
      --iphone-white-text-highlight: #1d1d1f;

      --iphone-red-bg: #960b19;
      --iphone-red-text: #e57571;
      --iphone-red-text-highlight: #f5f5f7;

      --iphone-width: 460px;
      --iphone-offscreen: -720px;
    }

    body {
      margin: 0;
      height: 4000px;
      font-family: Helvetica;
      background-color: #000;
    }

    .sticky-container {
      position: sticky;
      top: 0;
      width: 100%;
      height: 100vh;
      overflow: hidden;
    }

    .sticky-container .iphone {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      width: 100%;
      height: 100vh;
      position: absolute;
      top: 0;
      left: 0;
    }

    .sticky-container .iphone h3 {
      font-size: 1rem;
      margin: 0 0 60px 0;
      width: var(--iphone-width);
    }

    .sticky-container .iphone img {
      display: block;
      width: var(--iphone-width);
      margin-bottom: var(--iphone-offscreen);
    }

    .sticky-container .iphone.black {
      background-color: var(--iphone-black-bg);
      z-index: 10;
    }

    .sticky-container .iphone.black h3 {
      color: var(--iphone-black-text);
    }

    .sticky-container .iphone.white {
      background-color: var(--iphone-white-bg);
      z-index: 20;

      clip-path: inset(100% 0px 0px 0px);
    }

    .sticky-container .iphone.white h3 {
      color: var(--iphone-white-text);
    }

    .sticky-container .iphone.white h3 span {
      color: var(--iphone-white-text-highlight);
    }

    .sticky-container .iphone.red {
      background-color: var(--iphone-red-bg);
      z-index: 30;

      clip-path: inset(100% 0px 0px 0px);
    }

    .sticky-container .iphone.red h3 {
      color: var(--iphone-red-text);
    }

    .sticky-container .iphone.red h3 span {
      color: var(--iphone-red-text-highlight);
    }

    .sticky-container.no-sticky {
      position: relative;
      overflow: visible;
    }

    .sticky-container.no-sticky .iphone {
      position: relative;
    }

    .sticky-container.no-sticky .iphone.red {
      padding-bottom: calc(var(--iphone-offscreen) * -1);
    }
  </style>
</head>

<body>
  <div class="sticky-container">
    <div class="iphone black">
      <h3>
        Comes in Black.<br>
        &nbsp;
      </h3>
      <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_black__b06syayq94wi_medium_2x.png">
    </div>
    <div class="iphone white">
      <h3>
        Comes in Black.<br>
        <span>White</span>
      </h3>
      <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_white__drv9fwq9vzwy_medium_2x.png">
    </div>
    <div class="iphone red">
      <h3>
        Comes in Black.<br>
        White. <span>And Pow.</span>
      </h3>
      <img src="https://www.apple.com/v/iphone-se/b/images/overview/finishes_red__eqfv1ongy282_medium_2x.png">
    </div>
  </div>
  <script>
    window.addEventListener('scroll', (e) => {
      let noStickyOffset = document.documentElement.clientHeight * 2
      let scrolled = document.documentElement.scrollTop / noStickyOffset

      let $white = document.querySelector('.white')
      let $red = document.querySelector('.red')

      $white.style.clipPath = `inset(${((0.5 - scrolled) / 0.5) * 100}% 0px 0px 0px)`
      $red.style.clipPath = `inset(${((1 - scrolled) / 0.5) * 100}% 0px 0px 0px)`

      if (scrolled >= 1) {
        document.querySelector('.sticky-container').classList.add('no-sticky')
      } else {
        document.querySelector('.sticky-container').classList.remove('no-sticky')
      }
    })
  </script>
</body>

</html>