Apple 网站的特效， iPhone SE 共有黑、白、红三种颜色，在卷动页面的时候会逐步替换，看起来效果非常时尚，在此供上代码学习。
<!DOCTYPE html>
<html>
<head>
<title>iPhone SE切换颜色特效</title>
<style type="text/css">
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- 460px;
--iphone-offscreen: -720px;
}
body {
margin: 0;
height: 4000px;
font-family: Helvetica;
background-color: #000;
}
.sticky-container {
position: sticky;
top: 0;
100%;
height: 100vh;
overflow: hidden;
}
.sticky-container .iphone {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
100%;
height: 100vh;
position: absolute;
top: 0;
left: 0;
}
.sticky-container .iphone h3 {
font-size: 1rem;
margin: 0 0 60px 0;
var(--iphone-width);
}
.sticky-container .iphone img {
display: block;
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>
<script type="text/javascript">
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>
</head>
<body>
<!--
https://www.apple.com/v/iphone-se/b/images/overview/finishes_black__b06syayq94wi_medium_2x.png
https://www.apple.com/v/iphone-se/b/images/overview/finishes_white__drv9fwq9vzwy_medium_2x.png
https://www.apple.com/v/iphone-se/b/images/overview/finishes_red__eqfv1ongy282_medium_2x.png
-->
<div class="sticky-container">
<div class="iphone black">
<h3>
Comes in Black.<br>
</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>
</body>
</html>