苹果Homepod滚动页面效果

最新推荐文章于 2024-01-16 17:45:29 发布

codingFunTime

最新推荐文章于 2024-01-16 17:45:29 发布

阅读量113

点赞数

分类专栏：前端动画文章标签：前端 css html

原文链接：https://codepen.io/stevenlei/pen/WNRjprb

版权

前端动画专栏收录该内容

23 篇文章 1 订阅

订阅专栏

html

<!DOCTYPE html>
<html lang="zh-Hans">

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

<body>

  <section class="homepod-section">
    <div class="homepod-container">
      <div class="homepod">
        <div class="device"></div>
        <div class="part-1"></div>
        <div class="part-2"></div>
        <div class="part-3"></div>
        <div class="part-4"></div>
        <div class="ending"></div>
      </div>
    </div>
    <div class="description-container">
      <div class="description">
        <h3>Deep bass with range you can feel.</h3>
        <p>The Apple-designed high-excursion woofer is positioned at the top of the speaker facing upward, creating a
          wide range of deep bass that surpasses any traditional speaker. A six-microphone array, along with an internal
          bass-EQ microphone, analyzes and compensates for the effect of the room on the bass response, providing rich,
          consistent sound. And a powerful motor drives the diaphragm a remarkable 20 mm, so the bass shines through
          even when the volume is low.</p>
      </div>

      <div class="description">
        <h3>Far and away an incredible listener.</h3>
        <p>Six microphones positioned around HomePod allow it to pick up all the sound in a room. When you say “Hey
          Siri,” advanced signal processing, together with echo and noise cancellation, allows HomePod to hear you
          without the need to raise your voice — even if you’re across the room with loud music playing. After HomePod
          recognizes the words “Hey Siri,” what you say is encrypted and sent anonymously to Apple servers without being
          tied to your Apple ID.</p>
      </div>

      <div class="description">
        <h3>High-fidelity audio that’s all around you.</h3>
        <p>A custom-designed array of seven beamforming tweeters, each with its own amplifier, creates tremendous
          directional control. Placed around the base and using a folded-horn design, they send the flow of music toward
          the center and then out the bottom in a 360-degree pattern, resulting in an all-encompassing sense of space.
          This virtually eliminates early table reflections and allows for consistent high-definition sound.</p>
      </div>

      <div class="description">
        <h3>The biggest brain ever in a speaker.</h3>
        <p>An Apple-designed A8 chip orchestrates all the remarkable audio innovations inside HomePod. Like advanced
          signal processing so Siri can hear you over the music. Real-time studio-level processing that maximizes the
          bass while minimizing distortion. Buffering that’s even faster than real time. And upmixing of both direct and
          ambient audio. You get amazing sound, every single time.</p>
      </div>

      <div class="description">
        <h3>Designed to be seen and heard.</h3>
        <p>HomePod is wrapped in a seamless mesh fabric designed for aesthetics and acoustic performance. Available in
          white and space gray, it’s gorgeous from every angle — yet virtually transparent to the sound waves passing
          through it.</p>
      </div>
    </div>
  </section>
  <section class="other-section"></section>

  <script src="./index.js"></script>
</body>

</html>

css

body {
  margin: 0;
  padding: 0;
  font-family: Helvetica;
}


.other-section {
  background-color: #eee;
  height: 3000px;
}


.homepod-container {
  width: 100%;
  height: 100vh;
  position: sticky;
  top: 0;
  z-index: -1;
}

.homepod {
  width: 654px;
  height: 825px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.homepod div {
  width: inherit;
  height: inherit;
  background-size: contain;
  background-position: center center;
  position: absolute;
  top: 0;
  left: 0;
}

.device {
  background-image: url(https://assets.codepen.io/2002878/homepod.jpg);
}

.part-1 {
  background-image: url(https://assets.codepen.io/2002878/homepod_1.jpg);
  opacity: var(--part-1);
}

.part-2 {
  background-image: url(https://assets.codepen.io/2002878/homepod_2.jpg);
  opacity: var(--part-2);
}

.part-3 {
  background-image: url(https://assets.codepen.io/2002878/homepod_3.jpg);
  opacity: var(--part-3);
}

.part-4 {
  background-image: url(https://assets.codepen.io/2002878/homepod_4.jpg);
  opacity: var(--part-4);
}

.ending {
  background-image: url(https://assets.codepen.io/2002878/homepod.jpg);
  opacity: var(--ending);
}

.description-container {
  /* 让最后一个描述卷走再滚动到下一个section */
  padding-bottom: 100vh;
}

.description {
  width: 490px;
  padding: 80px 50px;
  box-sizing: border-box;
  background-color: rgba(0, 0, 0, .8);
  border-radius: 20px;
  text-align: center;
  color: #fff;
  margin: 0 auto 100vh;
}

.description h3 {
  font-size: 32px;
  margin: 0;
  padding: 0;
}

.description p {
  font-size: 18px;
  margin: 12px 0 0;
}


.description:last-child {
  /* 注意 */
  margin-bottom: 0;
}

const homepodSection = document.querySelector('.homepod-section')

// const sectionHeight = homepodSection.getBoundingClientRect().height 
// 两者一样
const sectionHeight = homepodSection.offsetHeight

const html = document.documentElement

document.addEventListener('scroll', (e) => {
  let scrolled = html.scrollTop / (sectionHeight - html.clientHeight)
  // 滚动到顶部为 0 ，滚动到底部为 1
  console.log(`scrolled: ${scrolled}`)

  // 滚动设置各个图片的透明度
  homepodSection.style.setProperty('--part-1', calculateOpacity(0.05, 0.15, scrolled))
  homepodSection.style.setProperty('--part-2', calculateOpacity(0.19, 0.23, scrolled))
  homepodSection.style.setProperty('--part-3', calculateOpacity(0.35, 0.40, scrolled))
  homepodSection.style.setProperty('--part-4', calculateOpacity(0.58, 0.63, scrolled))
  homepodSection.style.setProperty('--ending', calculateOpacity(0.80, 0.85, scrolled))

})

function calculateOpacity(start, end, percent) {
  if (percent - start < 0) return 0
  if (percent - end > 0) return 1

  return (percent - start) / (end - start)
}