V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
爱意满满的作品展示区。
gaoryrt
V2EX  ›  分享创造

利用可变字体、svg textPath、平滑滚动、视差、背景混合,制作了一个 about me 页面

  •  3
     
  •   gaoryrt ·
    gaoryrt · 2020-04-01 10:11:00 +08:00 · 3605 次点击
    这是一个创建于 1696 天前的主题,其中的信息可能已经有所发展或是发生改变。
    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
    27 条回复    2020-04-04 22:11:42 +08:00
    wuqingdzx
        1
    wuqingdzx  
       2020-04-01 10:14:30 +08:00
    amazing,写后端的表示想学习一下
    98b984275a6b4591
        2
    98b984275a6b4591  
       2020-04-01 10:30:42 +08:00
    挺酷炫的,就是 Firefox 和 Safari + UHD630 都卡爆
    gaoryrt
        3
    gaoryrt  
    OP
       2020-04-01 10:37:14 +08:00
    @98b984275a6b4591 好的老板,我这儿优化
    lzdyes
        4
    lzdyes  
       2020-04-01 10:43:10 +08:00
    beautiful
    likiwang
        5
    likiwang  
       2020-04-01 10:51:08 +08:00 via iPhone
    楼主播客 rss 好像订阅不了
    gaoryrt
        6
    gaoryrt  
    OP
       2020-04-01 10:53:24 +08:00
    @likiwang 哈这个好像是没有做,抱歉了老板,我尽快
    gaoryrt
        7
    gaoryrt  
    OP
       2020-04-01 10:57:45 +08:00
    @likiwang https://jungle.fm/rss2.xml 是这个,之前链接填错了
    yuankui
        8
    yuankui  
       2020-04-01 11:12:21 +08:00
    就是很卡,配色(粉色)有点萌?
    看不到鼠标,很难受。
    leadfast
        9
    leadfast  
       2020-04-01 11:14:24 +08:00
    交出源码,送楼主个 star
    just1
        10
    just1  
       2020-04-01 11:14:47 +08:00
    鼠标延迟还带惯性很难受
    另外感觉不好看...
    Mithril
        11
    Mithril  
       2020-04-01 11:20:01 +08:00
    别的都不错,就是粉色那几个大字体比较难辨认。换个颜色可能会好点。
    doudouwu
        12
    doudouwu  
       2020-04-01 13:20:31 +08:00
    酷是酷,卡到当场去世
    psychoo
        13
    psychoo  
       2020-04-01 13:42:23 +08:00
    打开简历落差有点大
    ccoming
        14
    ccoming  
       2020-04-01 13:46:58 +08:00
    同 ls,东非大裂谷那么大
    pkwenda
        15
    pkwenda  
       2020-04-01 13:50:34 +08:00
    FM 我听了最近的一期,还不错
    guolaopi
        16
    guolaopi  
       2020-04-01 13:53:32 +08:00
    firefox 几乎卡成翔,特别是 “Hi”放大旋转的时候。。
    谷歌儿倒没事,求解释
    VictorJing94
        17
    VictorJing94  
       2020-04-01 13:57:09 +08:00
    不错啊
    gaoryrt
        18
    gaoryrt  
    OP
       2020-04-01 13:58:27 +08:00
    @psychoo
    @ccoming
    想看到啥样的简历呢,有没有建议或者例子参考
    JK9993
        19
    JK9993  
       2020-04-01 14:10:55 +08:00
    这种公开的简历把个人真实信息隐藏比较好吧。。放个邮箱就是了
    kaiki
        20
    kaiki  
       2020-04-01 14:14:40 +08:00
    让我想到了这个
    www.first-launch.com
    七点半的太空人,整个网站都是一个动画
    chiu
        21
    chiu  
       2020-04-01 14:29:30 +08:00
    觉得效果很不错,Chrome 不感觉到卡
    luchenwei9266
        22
    luchenwei9266  
       2020-04-01 14:31:38 +08:00
    挺有意思的页面。
    whileFalse
        23
    whileFalse  
       2020-04-01 15:04:16 +08:00
    哥们你博客的视频放主站又没有缓存,太卡了。
    赶紧挪到静态资源托管站上或者开缓存把。
    huntrue
        24
    huntrue  
       2020-04-01 17:12:09 +08:00
    Apple 官网有的页面就是这种效果,有的动画做的特别精彩,每次都忍不住退回去重新滑动,想多看几次。
    gangsta
        25
    gangsta  
       2020-04-01 17:22:58 +08:00
    加载完了, 但是看不到完整的效果, 卡出天际...
    kkkkkrua
        26
    kkkkkrua  
       2020-04-02 18:01:13 +08:00
    同,鼠标还有惯性,有点不适,还有粉色的字叠加字体的时候,太刺眼了,调淡点可能比较好
    izoabr
        27
    izoabr  
       2020-04-04 22:11:42 +08:00
    这次新发布的 iPad Pro 的介绍页面就类似这种效果,但流畅很多
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   5319 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 22ms · UTC 07:46 · PVG 15:46 · LAX 23:46 · JFK 02:46
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.