利用可变字体、svg textPath、平滑滚动、视差、背景混合，制作了一个 about me 页面
gaoryrt · gaoryrt · 2020-04-01 10:11:00 +08:00 · 3595 次点击这是一个创建于 1683 天前的主题，其中的信息可能已经有所发展或是发生改变。
https://gaoryrt.com/about.html
顺带还发现了 chrome 80+ 一个问题：文字尺寸太大（ font-size/scale ）的时候光栅化会耗时巨长，非常卡。
所以开头可变字号放大就改成了前半段放大一点，后半段用 background 替代了，应该会好一点。
credits:
https://www.recursive.design/
https://editorialnew.com/
https://github.com/gaoryrt/cursor-dot
https://css-tricks.com/moving-text-on-a-curved-path/
www.youtube.com/watch?v=jk6sz25OZgw
顺带还发现了 chrome 80+ 一个问题：文字尺寸太大（ font-size/scale ）的时候光栅化会耗时巨长，非常卡。
所以开头可变字号放大就改成了前半段放大一点，后半段用 background 替代了，应该会好一点。
credits:
https://www.recursive.design/
https://editorialnew.com/
https://github.com/gaoryrt/cursor-dot
https://css-tricks.com/moving-text-on-a-curved-path/
www.youtube.com/watch?v=jk6sz25OZgw
 |
1
wuqingdzx 2020-04-01 10:14:30 +08:00
amazing,写后端的表示想学习一下
|
 |
2
98b984275a6b4591 2020-04-01 10:30:42 +08:00
挺酷炫的，就是 Firefox 和 Safari + UHD630 都卡爆
|
 |
3
gaoryrt OP @98b984275a6b4591 好的老板，我这儿优化
|
 |
4
lzdyes 2020-04-01 10:43:10 +08:00
beautiful
|
 |
5
likiwang 2020-04-01 10:51:08 +08:00 via iPhone
楼主播客 rss 好像订阅不了
|
|
7
gaoryrt OP @likiwang https://jungle.fm/rss2.xml 是这个，之前链接填错了
|
 |
8
yuankui 2020-04-01 11:12:21 +08:00
就是很卡，配色（粉色）有点萌？
看不到鼠标，很难受。 |
 |
9
leadfast 2020-04-01 11:14:24 +08:00
交出源码，送楼主个 star
|
 |
10
just1 2020-04-01 11:14:47 +08:00
鼠标延迟还带惯性很难受
另外感觉不好看... |
 |
11
Mithril 2020-04-01 11:20:01 +08:00
别的都不错，就是粉色那几个大字体比较难辨认。换个颜色可能会好点。
|
 |
12
doudouwu 2020-04-01 13:20:31 +08:00
酷是酷，卡到当场去世
|
 |
13
psychoo 2020-04-01 13:42:23 +08:00
 打开简历落差有点大 |
 |
14
ccoming 2020-04-01 13:46:58 +08:00
同 ls，东非大裂谷那么大
|
 |
15
pkwenda 2020-04-01 13:50:34 +08:00
FM 我听了最近的一期，还不错
|
 |
16
guolaopi 2020-04-01 13:53:32 +08:00
firefox 几乎卡成翔，特别是 “Hi”放大旋转的时候。。
谷歌儿倒没事，求解释 |
 |
17
VictorJing94 2020-04-01 13:57:09 +08:00
不错啊
|
 |
19
JK9993 2020-04-01 14:10:55 +08:00
这种公开的简历把个人真实信息隐藏比较好吧。。放个邮箱就是了
|
 |
20
kaiki 2020-04-01 14:14:40 +08:00
|
 |
21
chiu 2020-04-01 14:29:30 +08:00
觉得效果很不错，Chrome 不感觉到卡
|
 |
22
luchenwei9266 2020-04-01 14:31:38 +08:00
挺有意思的页面。
|
 |
23
whileFalse 2020-04-01 15:04:16 +08:00
哥们你博客的视频放主站又没有缓存，太卡了。
赶紧挪到静态资源托管站上或者开缓存把。 |
 |
24
huntrue 2020-04-01 17:12:09 +08:00
Apple 官网有的页面就是这种效果，有的动画做的特别精彩，每次都忍不住退回去重新滑动，想多看几次。
|
 |
25
gangsta 2020-04-01 17:22:58 +08:00
加载完了, 但是看不到完整的效果, 卡出天际...
|
 |
26
kkkkkrua 2020-04-02 18:01:13 +08:00
同，鼠标还有惯性，有点不适，还有粉色的字叠加字体的时候，太刺眼了，调淡点可能比较好
|
 |
27
izoabr 2020-04-04 22:11:42 +08:00
这次新发布的 iPad Pro 的介绍页面就类似这种效果，但流畅很多
|
Select Language