1. 首页首页
  2. 科技前沿科技前沿

iPhone SE 产品官网颜色切换（HTML+CSS+JS实现）

科技前沿 • • 阅读 46

iPhone SE 产品官网颜色切换（HTML+CSS+JS实现）令人惊艳的 iPhone SE 颜色转换页面 iPhone SE 中国大陆 官方网站 Apple 在前不久发布了 iPhone SE 第二代 宣传页面的 iPhone SE 颜色转换部分令我久久不能忘怀 帅啊 给苹果打了广告 QAQ

大家好，我是讯享网，很高兴认识大家。

令人惊艳的iPhone SE颜色转换页面

iPhone SE（中国大陆）- 官方网站

Apple 在前不久发布了iPhone SE（第二代），宣传页面的iPhone SE颜色转换部分令我久久不能忘怀，帅啊！！（给苹果打了广告QAQ）


讯享网

上代码：

HTML部分：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>iPhone SE</title> <link rel="stylesheet" href="iPhone SE.css" type="text/css" /> <script src="iPhone SE.js"></script> </head> <body> <div class="sticky-container"> <div class="iphone black"> <h3> Comes in Black.<br /> &nbsp; </h3> <img src="iPhone SE_black.png"> </div> <div class="iphone white"> <h3> Comes in Black.<br /> <span>White.</span> &nbsp; </h3> <img src="iPhone SE_white.png"> </div> <div class="iphone red"> <h3> Comes in Black.<br /> White.<span>And Pow.</span> </h3> <img src="iPhone SE_red.png"> </div> </div> </body> </html>

讯享网
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); }
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') } })

此页面参考大神CodingStartup而设计

小讯
上一篇 2025-02-18 17:27
下一篇 2025-03-01 10:44

相关推荐

版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请联系我们，一经查实，本站将立刻删除。
如需转载请保留出处：https://51itzy.com/kjqy/25784.html