iPhone SE切换颜色特效

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

<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>
      &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>
</body>
</html>
posted @ 2020-04-25 12:21  我在吃大西瓜呢  阅读(473)  评论(0)  编辑  收藏  举报