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基础学习3

    Java语法学习3 基本运算符 关系运算符返回结果为布尔类型 %:取余 模运算 +.-.*./.% :二元运算符 两个变量间的运算 ++.-- 一元运算符 package Study; public ...

  2. -bash: ulimit: core file size: cannot modify limit: Operation not permitted

    一.问题描述 使用普通用户执行某个软件加载环境变量时报错 -bash: ulimit: core file size: cannot modify limit: Operation not permi ...

  3. 最小生成树-普利姆(Prim)算法

    最小生成树-普利姆(Prim)算法 最小生成树 概念:将给出的所有点连接起来(即从一个点可到任意一个点),且连接路径之和最小的图叫最小生成树.最小生成树属于一种树形结构(树形结构是一种特殊的图),或者 ...

  4. symfony中使用__construct获取services对象

    symfony中服务的使用总所周知的方便,但是当一个controller多次使用到同一个服务的时候就会出现在每个Action中都get获取服务,此时为了省事相信你也尝试使用构造函数申明一个私有对象避免 ...

  5. DISCUZ论坛添加页头及页尾背景图片的几种方法

    先给大家分享页头添加背景图片的两种方法:1. 第一种效果,是给discuz的整体框架添加背景图片,见图示: 添加方法如下:找到你现在使用模板common文件下的header.html文件,在<h ...

  6. ecshop后台设置模板的地方显示自己新建模板的操作界面

    我建立了一个叫test.dwt文件怎样在后台设置模板里面出现呢.1首先找到ecshop目录下的languages\zh_cn\admin/template.php 这个php文件 当然如果这只是简体中 ...

  7. 一文让你彻底搞懂 vue-Router

    路由是网络工程里面的专业术语,就是通过互联把信息从源地址传输到目的地址的活动.本质上就是一种对应关系.分为前端路由和后端路由. 后端路由: URL 的请求地址与服务器上的资源对应,根据不同的请求地址返 ...

  8. django url配置-反向解析-视图函数-HttpRequest对象-HttpResponse对象-cookies-session-redis缓存session

    """ --视图概述:-- 作用:视图接受WEB请求,并响应WEB请求 本质:视图就是一个python中的函数 响应: 1.网页: 一.重定向 二.错误视图 400,50 ...

  9. [转载]CentOS 7安装配置Samba服务器

    假设我们有这样一个场景 共享名路径权限SHAREDOC/smb/docs所有人员包括来宾均可以访问RDDOCS/smb/tech仅允许特定组的用户进行读写访问 特定组的组名为RD,目前的Alice.J ...

  10. Vue2.0 基础入门

    前言:" 今生遇汝,何其幸哉:于我蒙昧之时遇到你,于我大雾初透之时爱上你,于我大智初醒之时沉沦你. " 官网: 介绍 - Vue.js (vuejs.org) 指令与修饰符 创建实 ...