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. 剑指offer计划16（ 排序简单）---java

    1.1.题目1 剑指 Offer 45. 把数组排成最小的数 1.2.解法 这题看的题解,发现自己思路错了. 这里直接拿大佬的题解来讲吧. 一开始这里就把创一个string的数组来存int数组 Str ...

  2. 简单操作：10分钟实现在kubernetes(k8s)里面部署服务器集群并访问项目（docker三）

    前言 经过docker安装.k8s开启并登录,我们终于到 "部署k8s服务器集群并访问项目" 这一步了,实现的过程中有太多坑,好在都填平了,普天同庆. 在进行当前课题之前,我们需要 ...

  3. （超简单）VScode配置C/C++环境图文教程（Windows系统下）

    (超简单)VScode配置C/C++环境图文教程(Windows系统下) 本文参考文章 Visual Studio Code (vscode) 配置 C / C++ 环境 下载VScode.下载Min ...

  4. Park-2018论文

    太阳射电图:Solar magnetograms, EUV images, GOES X-ray flux data. Magnetograms:    http://solar-center.sta ...

  5. phpspider PHP 爬虫

    * 通过composer下载 composer require owner888/phpspider // composer.json { "require": { "o ...

  6. windom 下面redis安装和扩展安装

    参考 https://www.cnblogs.com/yulongcode/p/10585229.html https://blog.csdn.net/qq_41921511/article/deta ...

  7. Composer基础

    摘要 本文介绍Composer的入门知识,包括require和autoload部分. Java有Maven, Node.js有npm, ROR有gem, 这些语言的程序员在开心地使用包管理工具加速开发 ...

  8. pyqt5实现窗口跳转并关闭上一个窗口

    关键在于要定义一个关闭窗体的函数colsewin() 然后将按键与该函数连接(connect)在一起即可 import sys from PyQt5.QtWidgets import QMainWin ...

  9. HTML 网页开发、CSS 基础语法——四. HTML基本语法

    1. HTML规范和HTML标签 W3C:world wide web consortium,万维网联盟.专门发布和维护互联网的规范和标准. 2. HTML标签 HTML 标记通常被称为 HTML 标 ...

  10. Consul+Ocelot+Polly在.NetCore中使用(.NET5)-Ocelot+Polly缓存、限流、熔断、降级

    相关文章 Consul+Ocelot+Polly在.NetCore中使用(.NET5)-Consul服务注册,服务发现 Consul+Ocelot+Polly在.NetCore中使用(.NET5)-网 ...