一些有趣的首部导航栏交互动画

2,630 阅读2分钟

最近摸鱼的时候发现,一些网站的首部导航栏的交互比较有趣,简单记录一下。

知乎:滚动方向改变时,切换状态栏

20220917170518.gif

  1. 滚动方向向下时,会展示内容分类 tab(关注、推荐、热榜、视频)以及搜索框;
  2. 滚动方向向上时,会展示页面分类 tab(首页、学习、会员、发现、等你来答)、搜索框、消息、私信、创作中心和个人中心入口;
  3. 我猜这个设计的想法是,向下滚动时,用户大概率在浏览帖子内容,而向上滚动时,用户希望下一步是创作内容、搜索、进入个人中心的概率会更高一些;

实现 demo(伪):

思路:

  1. 两个首部等高等宽,第二个首部绝对定位 top: 0, left: 0, 遮盖住第一个首部;
  2. 需要显示第一个首部时,第二个首部 translateY(100%),向下移动;
  3. 父容器上设置 overflow: hidden,截去超过一个首部高度的部分;

b 站:icon 和头像在 hover 时会触发动画效果

20220917175507.gif

  1. 头像在 hover 时会放大,其他 icon 会跳跃一下;
  2. 动画结束后展开菜单;

实现 demo(伪):

思路:

  1. 放大动画:
    1. 有两个一样且重叠的元素 A 和 B(b 站代码里 B 初始时会有一定缩放和平移,没太看懂),开始时 A 透明度为 1,B 透明度为 0;
    2. moverenter 在父元素上时,A 元素原地透明度变为 0,B 放大、平移、同时透明度变为 1,A 的动画时间较短、B的动画时间较长,看上去像 A 消失变成了 B 一样;
    3. moveleave 时执行相反操作;
  2. 跳跃动画:y 方向平移;

题外话:掘金的头像在 hover 时会加速旋转

(是会越转越快的,但是我的录屏软件生成 gif 时会抽帧,所以看不出来)

20220917193050.gif

实现 demo(伪):

思路:

  1. 用一个 duration 比较长的 transition 实现(大概是预计不会有人 hover 1分钟);