sticky，苹果官网文字从图片滚过，切换图片

<!DOCTYPE html>

<head>

<title>Document</title>

<style>

body {

margin: 0;

padding: 0;

font-family: Helvetica;

}

.homepod-section {

}

.other-section {

background-color: #eee;

height: 3000px;

}

.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;

}

.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 {

}

.part-1 {

opacity: var(--part-1);

}

.part-2 {

opacity: var(--part-2);

}

.part-3 {

opacity: var(--part-3);

}

.part-4 {

opacity: var(--part-4);

}

.ending {

opacity: var(--ending);

}

.description-container {

padding-bottom: 100vh;

}

.description:last-child {

margin-bottom: 0;

}

</style>

</head>

<body>

</div>

<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>

<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>

<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>

<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>

<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>

</section>

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

const sectionHeight = homepodSection.getBoundingClientRect().height

const html = document.documentElement

document.addEventListener('scroll', (e) => {

let scrolled = html.scrollTop / (sectionHeight - html.clientHeight)

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))