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>

iPhone SE切换颜色特效的更多相关文章

  1. 编写最简单的 iPhone 界面切换应用

    编写最简单的 iPhone 界面切换应用   以下是在iOS中最简单的界面切换示例.使用了多个Controller,并演示Controller之间在切换界面时的代码处理. 实现的应用界面: 首先,创建 ...

  2. WPF如何实现类似iPhone界面切换的效果(转载)

    WPF如何实现类似iPhone界面切换的效果 (version .1) 转自:http://blog.csdn.net/fallincloud/article/details/6968764 在论坛上 ...

  3. Android的Activity切换动画特效库SwitchLayout，视图切换动画库，媲美IOS

    由于看了IOS上面很多开发者开发的APP的视图界面切换动画体验非常好,这些都是IOS自带的,但是Android的Activity等视图切换动画并没有提供原生的,所以特此写了一个可以媲美IOS视图切换动 ...

  4. easyui之自定义字体图标（鼠标覆盖时切换颜色）

    项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...

  5. vue点击切换颜色限制个数（用了mui框架）

    vue点击切换颜色 只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...

  6. iphone 数字字段颜色兼容问题

    在iphone手机中,有些字段的颜色会自动发生变化,在head中添加如下meta即可.<meta name = "format-detection" content=&quo ...

  7. dotnet OpenXML 转换 PathFillModeValues 为颜色特效

    在 OpenXml 预设形状,有一些形状设置了 PathFillModeValues 枚举,此枚举提供了亮暗的蒙层特效.具体的特效是让形状选择一个画刷,在画刷上加上特效.如立体几何 Cube 形状,在 ...

  8. 2016苹果春季发布会 iPhone SE发布

    配置如下 主屏尺寸:4英寸 主屏分辨率:1336x640像素 后置摄像头:1200万像素 前置摄像头:120万像素 电池容量:1624mAh 核心数:双核 操作系统:iOS 9 核心数:双核 CPU: ...

  9. Android实现Activity页面跳转切换动画特效

    了解Android程序设计的人应该知道,在Android 2.0之后有了overridePendingTransition(),其中里面两个参数,一个是前一个activity的退出,另一个activi ...

随机推荐

  1. 常见shell脚本测试题 for/while语句

    1.计算从1到100所有整数的和2.提示用户输入一个小于100的整数,并计算从1到该数之间所有整数的和3.求从1到100所有整数的偶数和.奇数和4.执行脚本输入用户名,若该用户存在,输出提示该用户已存 ...

  2. Lambda函数接口和方法构造器应用

    函数式接口 什么是函数式接口? 在java中'有且仅有一个抽象方法的接口',就称为函数式接口. 可以通过Lambda表达式来创建该接口的对象.(若Lambda表达式抛出一个受检异常,那么该异常需要在目 ...

  3. Baidu初试题分享(Java高级工程师)

    [特别声明:文章仅用来借鉴学习,不用于其他商业化活动] 1.JDK和JRE区别? JDK是整个JAVA的核心,包括了Java运行环境JRE,一堆Java工具和Java基础的类库.通过JDK开发人员将源 ...

  4. 六种多线程方法解决UI线程堵塞

    http://blog.csdn.net/oyi319/article/details/6851371 一.六种多线程方法 .NET Framework2.0框架提供了至少4种方式实现多线程,它们是& ...

  5. Android使用Fragment+ViewPager +TabLayout实现顶部标题栏

    参考资料: https://blog.csdn.net/Tobey_r1/article/details/93221486 项目背景是Android开发新闻APP,实现新闻文本的分类,内容的展示,并实 ...

  6. Apache Dolphin Scheduler - Docker Compose 详解

    Apache DolphinScheduler 是一个分布式去中心化,易扩展的可视化 DAG 工作流任务调度系统.简称 DS,包括 Web 及若干服务,它依赖 PostgreSQL 和 Zookeep ...

  7. PHP中的PDO对象操作学习（一）初始化PDO及原始SQL语句操作

    PDO 已经是 PHP 中操作数据库事实上的标准.包括现在的框架和各种类库,都是以 PDO 作为数据库的连接方式.基本上只有我们自己在写简单的测试代码或者小的功能时会使用 mysqli 来操作数据库. ...

  8. ecshop商品批量上传之EC助理1.28支持ECshop2.7.3方法

    目前官方随着ECShop V2.73的发布也发布了相对应的EC助理1.30版.默认EC助理1.28也支持到ECShop V2.72,要想让EC助理1.28也支持到ECShop V2.73,那要了解EC ...

  9. cas的基础配置

    去除HTTPS的j基础认证方式 cas的:deployerConfigContext.xml <!-- Required for proxy ticket mechanism. -->&l ...

  10. Kubernetes集群(RKE)安装ArgoCD排坑

    Photo by Pixabay from Pexels Argo CD是一个声明式的,基于Kubernetes的GitOps持续交付工具.更多的细节参考 ArgoCD官网 的说明,这里记录了一些实践 ...