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>

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

编写最简单的 iPhone 界面切换应用
编写最简单的 iPhone 界面切换应用以下是在iOS中最简单的界面切换示例.使用了多个Controller,并演示Controller之间在切换界面时的代码处理. 实现的应用界面: 首先,创建 ...
WPF如何实现类似iPhone界面切换的效果(转载)
WPF如何实现类似iPhone界面切换的效果 (version .1) 转自:http://blog.csdn.net/fallincloud/article/details/6968764 在论坛上 ...
Android的Activity切换动画特效库SwitchLayout，视图切换动画库，媲美IOS
由于看了IOS上面很多开发者开发的APP的视图界面切换动画体验非常好,这些都是IOS自带的,但是Android的Activity等视图切换动画并没有提供原生的,所以特此写了一个可以媲美IOS视图切换动 ...
easyui之自定义字体图标（鼠标覆盖时切换颜色）
项目要求是自定义字体图标,使用easyui框架结构,众所周知easyui强功能弱样式,字体图标其实就是一张图片.要达到切换图标颜色的效果,要么就是有两套图,使用js控制.但是我这个人比较懒,不喜欢做复 ...
vue点击切换颜色限制个数（用了mui框架）
vue点击切换颜色只能点击一个 <!doctype html> <head> <meta charset="UTF-8"> <title ...
iphone 数字字段颜色兼容问题
在iphone手机中,有些字段的颜色会自动发生变化,在head中添加如下meta即可.<meta name = "format-detection" content=&quo ...
dotnet OpenXML 转换 PathFillModeValues 为颜色特效
在 OpenXml 预设形状,有一些形状设置了 PathFillModeValues 枚举,此枚举提供了亮暗的蒙层特效.具体的特效是让形状选择一个画刷,在画刷上加上特效.如立体几何 Cube 形状,在 ...
2016苹果春季发布会 iPhone SE发布
配置如下主屏尺寸:4英寸主屏分辨率:1336x640像素后置摄像头:1200万像素前置摄像头:120万像素电池容量:1624mAh 核心数:双核操作系统:iOS 9 核心数:双核 CPU: ...
Android实现Activity页面跳转切换动画特效
了解Android程序设计的人应该知道,在Android 2.0之后有了overridePendingTransition(),其中里面两个参数,一个是前一个activity的退出,另一个activi ...

随机推荐

Spring5（五）——AOP
一.AOP 1.介绍 AOP(Aspect Oriented Programming),面向切面编程.它利用一种称为"横切"的技术,剖解开封装的对象内部,并将那些影响了多个类的公共 ...
Spring5（七）——AOP注解
一.AOP注解 1.介绍上一节介绍了 AspectJ 框架如何实现 AOP,具体的实现方式是通过 xml 来进行配置的.xml 方式思路清晰,便于理解,但是书写过于麻烦.这一节介绍注解的方式来进行 ...
NIO.2中Path,Paths,Files类的使用
Java NIO Java NIO概述 Java NIO(New IO(新io),Non-Blocking IO(非阻塞的io))是从Java 1.4版本开始引入的一套新的IO API,可以替代标准的 ...
grep、cut、awk、sed的使用
grep.cut.awk.sed 常常应用在查找日志.数据.输出结果等等,并对我们想要的数据进行提取.通常grep,sed命令是对行进行提取,cut跟awk是对列进行提取处理海量数据之grep命令 ...
Elasticsearch的基本使用
1. 概述之前聊了一下 Elasticsearch 的安装,今天我们来说说 Elasticsearch 的基本使用. 2. Elasticsearch索引的使用索引(index)相当于是mysql ...
【简单数据结构】二叉树的建立和递归遍历--洛谷 P1305
题目描述输入一串二叉树,用遍历前序打出. 输入格式第一行为二叉树的节点数n.(n \leq 26n≤26) 后面n行,每一个字母为节点,后两个字母分别为其左右儿子. 空节点用*表示输出格式前序 ...
Java基础系列（17）- 顺序结构
顺序结构 JAVA的基本结构就是顺序结构,除非特别说明,否则就按照顺序一句一句执行顺序结构是最简单的算法结构语句与语句之间,框与框之间是按从上到下的顺序进行的,它是由若干个依次执行的处理步骤组成的 ...
Java项目常用的统一返回跟统一异常处理
先创建一个crud的项目. controller调用service调用mapper 以下以简单代码代替 controller @GetMapping("/getUserById") ...
Vue 初学
Vue 的基本代码: 概念简介:Vue.js 是目前最火的一个前端框架,只关注视图层,主要负责MVC中的V这一层 MVC 是后端的分层开发概念: MVVM是前端视图层的概念, ...
HTML 网页开发、CSS 基础语法—— 一. HTML概述(了解网页)
1. 网页的本质 ① HTML就是用来制作网页文件的. ② 浏览器查看的网页都是.html或.htm文件. ③ HTML叫做超文本标记语言(Hypertext Markup Language),用于搭 ...

iPhone SE切换颜色特效

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

随机推荐

热门专题