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. 用Java实现红黑树

    红黑树是众多"平衡的"搜索树模式中的一种,在最坏情况下,它相关操作的时间复杂度为O(log n). 1.红黑树的属性 红黑树是一种二分查找树,与普通的二分查找树不同的一点是,红黑树 ...

  2. ORACLE 12C Identity Column(身份列) 实现自增长字段

    Oracle 12c提供的Identity Column特性简化了自增字段的定义. 声明自增字段通常有3种常见的用法,以下三种方式都支持INSERT语句中省略自增字段的插入,但有些许差别. 1. GE ...

  3. 真香！原来 CLI 开发可以这么简单

    CLI(命令行工具,Command Line Interface)大家都非常熟悉了,比如 create-react-app 等.我们今天介绍一个 CLI 工具的开发框架,可以帮助我们快速构建 CLI ...

  4. 浅谈 Xamarin Community Toolkit 的未来发展

    .NET MAUI会在今年晚些时候发布,我们也很高兴和大家一起分享我们对Xamarin Community Toolkit的计划! 这包括 .NET MAUI Community Toolkit.Xa ...

  5. CS:APP Chapter 3 程序的机器级表示-读书笔记

    3.1 程序的机器级表示 发展历史 Intel,AMD,ARM 等企业各有又是,CPU 从 8 位发展到 16 位,再到 32 位,近几年发展到 64 位,当下的 CPU 体系被称为 x86-64 体 ...

  6. 学习PHP中好玩的Gmagick图像操作扩展的使用

    在 PHP 的图像处理领域,要说最出名的 GD 库为什么好,那就是因为它不需要额外安装的别的什么图像处理工具,而且是随 PHP 源码一起发布的,只需要在安装 PHP 的时候添加上编译参数就可以了. G ...

  7. 一起搞懂PHP的错误和异常（一）

    在PHP的学习过程中,我们会接触到两个概念,一个是错误,一个是异常.啥玩意?他们不是一个东西嘛?如果接触过Java.C#之类的纯面向对象语言的同学,可能对异常是没有什么问题,毕竟所有的问题都可以try ...

  8. jquery动态生成dom(比如append)导致js事件无效

    如果无效用这个方法: on() 方法在被选元素及子元素上添加一个或多个事件处理程序. <div id="zkdiv">  <input type="bu ...

  9. CI框架页面打开空白，无报错为解决方法新环境

    1.打开错误显示,可以在控制controllers的首页入口加入以下代码,查看错误 error_reporting(-1); ini_set('display_errors', 1); //插入显示所 ...

  10. jmeter加密解密（加密篇）

    最近刚好在弄jmeter加密解密,可以分享下.(有一段时间没写了,有点不知道从何写起,这篇写的有点乱o(╥﹏╥)o) 需求是:接口中的请求体的部分参数需要先加密再请求,返回的结果中部分字段需解密. 1 ...