Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

iPhone 14 详情页特效浅析 #20

Open
gaoryrt opened this issue Oct 24, 2022 · 7 comments
Open

iPhone 14 详情页特效浅析 #20

gaoryrt opened this issue Oct 24, 2022 · 7 comments

Comments

@gaoryrt
Copy link
Member

gaoryrt commented Oct 24, 2022

就讲几个特效就完了，页面是 https://www.apple.com.cn/iphone-14/
苹果页面向来会做特别多操作系统、设备、语言、可用性上的兼容（which is good），本次测试也没法全测，所以用的机器是 MacOS 10.15.7，浏览器是自家的 Chrome 107，希望这个是他们的目标环境。
@gaoryrt
Copy link
Member Author

gaoryrt commented Oct 24, 2022

image
跟随滚动的 inline style transform matrix
image

@gaoryrt
Copy link
Member Author

gaoryrt commented Oct 24, 2022

image
这个比较明显，但是 matrix 不太好理解，我猜他们是有打包工具统一导成 matrix 或者是页面直接从开发工具里面生成的？

@gaoryrt
Copy link
Member Author

gaoryrt commented Oct 24, 2022

image
电量是 scale + overflow 做的
image

@gaoryrt
Copy link
Member Author

gaoryrt commented Oct 24, 2022

image
文字从原大小放大，就变模糊了，其实这里可以用大一点的文字反向缩，不会那么糊

@gaoryrt
Copy link
Member Author

gaoryrt commented Oct 24, 2022

Oct-24-2022 17-58-26

这个还挺有巧思，animate-delay 做的动画：
image

image

@gaoryrt
Copy link
Member Author

gaoryrt commented Oct 24, 2022

Oct-24-2022 18-03-01

这里居然是两个白块儿直接挡住视频，修改宽度就完事儿了
image
image

@gaoryrt
Copy link
Member Author

gaoryrt commented Oct 24, 2022

Oct-24-2022 18-06-32

这儿也是，配合视频
https://www.apple.com.cn/105/media/ww/iphone-14/2022/4adfce70-3eac-4182-946e-2539148438af/anim/selfie/large_2x.mp4

@gaoryrt gaoryrt closed this as completed Oct 24, 2022
@gaoryrt gaoryrt reopened this Oct 24, 2022
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@gaoryrt