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

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

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