杜郎俊赏 - dujun.io

圆形头像和方形头像

本站的评论列表头像展示样式,从圆形到方形反复了几次。最终还是改成方形了。 圆形头像和方形头像适用场景很容易区分: 圆形头像 聚焦主要面部特征,吸引注意力,有动感有活力。 适用于生人网络、泛娱乐,如 QQ、抖音、B站、微博。 方形头像 展现更多环境信息,沉稳大气。 适用于熟人网络、严肃社交,如微信、支付宝。 作为独立博客,本应算是生人网络,但还是决定用方形头像。因为博友的回访,对评论内容的认真,都是互联网最初美好的样子。

2022-02-28

position: sticky

position-sticky封面
刷到蜻蜓的墓园的博客,时光页面的年月用了元素固定。 我注意到滑动时固定和释放很顺滑,没有拖帧,而这是我的时光页面一直没解决的问题。 当时是参考jquery.pin改写的 js,没错,是jQuery 时代的方法了,原理就是根据可视范围,切换 position 为 fixed、absolute。慢速滑动时效果是完美的,但是快速滑动时就会有拖帧。 我研究了蜻蜓的墓园源码,发现是用 css 新特性 “position: sticky”。改完之后果然顺滑了。实际效果见时光页面 改的过程中遇到个坑,“position: sticky” 的所有祖先元素不能有 “overflow: hidden” 类似属性,否则不生效。

2022-02-05

手机端图片缩放优化完成。

2022-01-25

手机端视频增加了时间拖动功能。

2022-01-23

增加了手机端禁止页面缩放。 但是在"screen first"的iOS下,页面滚动时无法阻止事件,仍然可以缩放。

2022-01-22

dark-mode封面
深色模式完成。 优先跟随系统,系统未设置的,在日出之前或日落之后切换为深色模式。

2022-01-11

重构完成。全站改成js渲染。

2021-12-21

评论页加了无刷。顶部进度条用了 nprogress。

2017-06-07

分页: 1 2