Home Sign Up Sign In
爱意满满的作品展示区。
Advertisement
gaoryrt

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

  •  3      
  •   gaoryrt · Apr 1, 2020 · 4365 views
    This topic created in 2233 days ago, the information mentioned may be changed or developed.
    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
  • 栅化会
  • 放大
  • textpath
  • scale
    27 replies  •  2020-04-04 22:11:42 +08:00
    wuqingdzx
        1
    wuqingdzx  
       Apr 1, 2020
    amazing,写后端的表示想学习一下
    98b984275a6b4591
        2
    98b984275a6b4591  
       Apr 1, 2020
    挺酷炫的，就是 Firefox 和 Safari + UHD630 都卡爆
    gaoryrt
        3
    gaoryrt  
    OP
       Apr 1, 2020
    @98b984275a6b4591 好的老板，我这儿优化
    lzdyes
        4
    lzdyes  
       Apr 1, 2020
    beautiful
    likiwang
        5
    likiwang  
       Apr 1, 2020 via iPhone
    楼主播客 rss 好像订阅不了
    gaoryrt
        6
    gaoryrt  
    OP
       Apr 1, 2020
    @likiwang 哈这个好像是没有做，抱歉了老板，我尽快
    gaoryrt
        7
    gaoryrt  
    OP
       Apr 1, 2020
    @likiwang https://jungle.fm/rss2.xml 是这个，之前链接填错了
    yuankui
        8
    yuankui  
       Apr 1, 2020
    就是很卡，配色（粉色）有点萌？
    看不到鼠标，很难受。
    leadfast
        9
    leadfast  
       Apr 1, 2020
    交出源码，送楼主个 star
    just1
        10
    just1  
       Apr 1, 2020
    鼠标延迟还带惯性很难受
    另外感觉不好看...
    Mithril
        11
    Mithril  
       Apr 1, 2020
    别的都不错，就是粉色那几个大字体比较难辨认。换个颜色可能会好点。
    doudouwu
        12
    doudouwu  
       Apr 1, 2020
    酷是酷，卡到当场去世
    psychoo
        13
    psychoo  
       Apr 1, 2020
    打开简历落差有点大
    ccoming
        14
    ccoming  
       Apr 1, 2020
    同 ls，东非大裂谷那么大
    pkwenda
        15
    pkwenda  
       Apr 1, 2020
    FM 我听了最近的一期，还不错
    guolaopi
        16
    guolaopi  
       Apr 1, 2020
    firefox 几乎卡成翔，特别是 “Hi”放大旋转的时候。。
    谷歌儿倒没事，求解释
    VictorJing94
        17
    VictorJing94  
       Apr 1, 2020
    不错啊
    gaoryrt
        18
    gaoryrt  
    OP
       Apr 1, 2020
    @psychoo
    @ccoming
    想看到啥样的简历呢，有没有建议或者例子参考
    JK9993
        19
    JK9993  
       Apr 1, 2020
    这种公开的简历把个人真实信息隐藏比较好吧。。放个邮箱就是了
    kaiki
        20
    kaiki  
       Apr 1, 2020
    让我想到了这个
    www.first-launch.com
    七点半的太空人，整个网站都是一个动画
    chiu
        21
    chiu  
       Apr 1, 2020
    觉得效果很不错，Chrome 不感觉到卡
    luchenwei9266
        22
    luchenwei9266  
       Apr 1, 2020
    挺有意思的页面。
    whileFalse
        23
    whileFalse  
       Apr 1, 2020
    哥们你博客的视频放主站又没有缓存，太卡了。
    赶紧挪到静态资源托管站上或者开缓存把。
    huntrue
        24
    huntrue  
       Apr 1, 2020
    Apple 官网有的页面就是这种效果，有的动画做的特别精彩，每次都忍不住退回去重新滑动，想多看几次。
    gangsta
        25
    gangsta  
       Apr 1, 2020
    加载完了, 但是看不到完整的效果, 卡出天际...
    kkkkkrua
        26
    kkkkkrua  
       Apr 2, 2020
    同，鼠标还有惯性，有点不适，还有粉色的字叠加字体的时候，太刺眼了，调淡点可能比较好
    izoabr
        27
    izoabr  
       Apr 4, 2020
    这次新发布的 iPad Pro 的介绍页面就类似这种效果，但流畅很多
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   3229 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 77ms · UTC 12:51 · PVG 20:51 · LAX 05:51 · JFK 08:51
    ♥ Do have faith in what you're doing.