跳至主要內容
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?

4563博客

全新的繁體中文 WordPress 網站
  • 首頁
  • 利用可变字体、svg textPath、平滑滚动、视差、背景混合,制作了一个 about me 页面
未分類
2020 年 5 月 20 日

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

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

資深大佬 : gaoryrt 17

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

大佬有話說 (26)

  • 資深大佬 : wuqingdzx

    amazing,写后端的表示想学习一下

  • 資深大佬 : 98b984275a6b4591

    挺酷炫的,就是 Firefox 和 Safari + UHD630 都卡爆

  • 主 資深大佬 : gaoryrt

    @98b984275a6b4591 好的老板,我这儿优化

  • 資深大佬 : lzdyes

    beautiful

  • 資深大佬 : likiwang

    主播客 rss 好像订阅不了

  • 主 資深大佬 : gaoryrt

    @likiwang 哈这个好像是没有做,抱歉了老板,我尽快

  • 主 資深大佬 : gaoryrt

    @likiwang https://jungle.fm/rss2.xml 是这个,之前链接填错了

  • 資深大佬 : yuankui

    就是很卡,配色(粉色)有点萌?
    看不到鼠标,很难受。

  • 資深大佬 : leadfast

    交出源码,送主个 star

  • 資深大佬 : just1

    鼠标延迟还带惯性很难受
    另外感觉不好看…

  • 資深大佬 : Mithril

    别的都不错,就是粉色那几个大字体比较难辨认。换个颜色可能会好点。

  • 資深大佬 : doudouwu

    酷是酷,卡到当场去世

  • 資深大佬 : psychoo

    利用可变字体、svg textPath、平滑滚动、视差、背景混合,制作了一个 about me 页面 打开简历落差有点大

  • 資深大佬 : ccoming

    同 ls,东非大裂谷那么大

  • 資深大佬 : pkwenda

    FM 我听了最近的一期,还不错

  • 資深大佬 : guolaopi

    firefox 几乎卡成翔,特别是 “Hi”放大旋转的时候。。
    谷歌儿倒没事,求解释

  • 資深大佬 : VictorJing94

    不错啊

  • 主 資深大佬 : gaoryrt

    @psychoo
    @ccoming
    想看到啥样的简历呢,有没有建议或者例子参考

  • 資深大佬 : JK9993

    这种公开的简历把个人真实信息隐藏比较好吧。。放个邮箱就是了

  • 資深大佬 : kaiki

    让我想到了这个
    www.first-launch.com
    七点半的太空人,整个网站都是一个动画

  • 資深大佬 : chiu

    觉得效果很不错,Chrome 不感觉到卡

  • 資深大佬 : luchenwei9266

    挺有意思的页面。

  • 資深大佬 : whileFalse

    哥们你博客的视频放主站又没有缓存,太卡了。
    赶紧挪到静态资源托管站上或者开缓存把。

  • 資深大佬 : huntrue

    Apple 官网有的页面就是这种效果,有的动画做的特别精彩,每次都忍不住退回去重新滑动,想多看几次。

  • 資深大佬 : gangsta

    加载完了, 但是看不到完整的效果, 卡出天际…

  • 資深大佬 : kkkkkrua

    同,鼠标还有惯性,有点不适,还有粉色的字叠加字体的时候,太刺眼了,调淡点可能比较好

文章導覽

上一篇文章
下一篇文章

AD

其他操作

  • 登入
  • 訂閱網站內容的資訊提供
  • 訂閱留言的資訊提供
  • WordPress.org 台灣繁體中文

51la

4563博客

全新的繁體中文 WordPress 網站
返回頂端
本站採用 WordPress 建置 | 佈景主題採用 GretaThemes 所設計的 Memory
4563博客
  • Hostloc 空間訪問刷分
  • 售賣場
  • 廣告位
  • 賣站?
在這裡新增小工具