跳到主要内容

如何把网站做成滚动 GIF

从网址做出网页滚动的 GIF 动图,并让文件小到能放进邮件、文档和 README。什么时候该用 GIF,什么时候 MP4 更合适。

Aviral Lakhanpaul更新于 阅读约 3 分钟

简短回答

把页面网址粘贴到能导出 GIF 的工具里,比如 Website Scroll Video,把滚动控制在 20 秒以内、720p 或 1080p、24 fps 或更低,然后导出。在视频播放不了的地方,比如邮件和部分文档里,GIF 是对的选择;其他地方,同一段滚动做成 MP4 或 WebM,会更清晰,文件也小好几倍。

什么时候该用 GIF

GIF 是一种老格式,每帧只有 256 色的调色板,压缩方式也从来不是为动态照片设计的。现代网站的滚动画面满是渐变和图片,对它来说几乎是最糟的情况。它能留存至今,是因为它几乎在哪里都能播放:不需要播放器,不需要点击,也没有自动播放的限制。

  • 用 GIF:发给客户的邮件或电子报、GitHub 的 README 或 issue、不能嵌入视频的文档和 Wiki,以及会直接预览 GIF 的聊天应用。
  • 用 MP4 或 WebM:你自己的网站、社交媒体帖子、作品集,以及任何能用 <video> 标签的地方。同样的运动,色彩更好,体积只有一小部分。

制作 GIF

  1. 粘贴网址

    在首页粘贴地址,等页面加载。采集任何内容之前,Cookie 横幅和聊天挂件都会被清掉。

  2. 格式选 GIF

    GIF 承载不了的设置会自动替你限制:最高 24 fps、最高 1080p、最长 20 秒。

  3. 要短,要缓

    把滚动裁到页面上要紧的那一段,运动放慢。在 24 fps 下,快速滚动会让文字糊掉,而这在 GIF 里比在视频里更显眼。

  4. 先预览,再导出

    预览免费。看着满意了就导出,GIF 会像其他文件一样下载下来。

控制文件大小

GIF 的大小随每一个像素、每一帧、每一种变化的颜色而增长。按影响大小排序,大致如下:

什么会让滚动 GIF 变大
设置更小的文件原因
分辨率用 720p,而不是 1080p每帧像素不到一半
时长6 到 10 秒每多一秒,就多 24 个完整的帧
帧率24 fps 或更低GIF 几乎没有运动压缩可言
背景纯色,不加颗粒胶片颗粒和照片会让每一帧的每个像素都在变
页面缩短滚动范围每帧移动更少,新像素也更少

制作网站 GIF 的其他方法

  • 录屏,再用转换器或 ffmpeg 之类的工具把录像转成 GIF。私有页面也能用;只是滚动有多均匀,全看你的手。
  • 用 Puppeteer 或 Playwright 写脚本采集:页面滚动时逐张截图,再拼起来。控制完全在你手里,但代码也得你来维护。
  • 免费的在线网址转 GIF 工具。有好几个,设置更少;替代方案页面比较了其中同样能做视频的那些。

拿你自己的网站试试

粘贴一个链接,免费预览滚动效果。注册即送 51 个免费点数,无需信用卡,导出的任何视频都没有水印。

最近搜索

    常见 问题

    大家接下来常问的,这里简短作答。

    联系我们
    怎样做一个网站滚动的 GIF?

    把网址粘贴到能导出 GIF 的网址转视频工具里,滚动保持简短,然后导出。或者在脚本滚动页面时录屏,再把录像转成 GIF。

    为什么我的网站 GIF 这么大?

    GIF 几乎把每一帧都完整存下来,所以分辨率、时长和帧率是相乘的关系。降到 720p,控制在十秒以内,并避免用照片或带颗粒的背景。

    GIF 在邮件里能播放吗?

    在大多数邮件应用里可以,这也是选择它的主要理由。有些桌面客户端只显示第一帧,所以要确保第一帧单独看也成立。

    Website Scroll Video 标志:浏览器窗口中的网页上叠着一个播放按钮。

    少花时间录制,多花时间创造。

    用可自定义的运动、聪明的控件和为当代创作者设计的导出选项,把网站录制自动化。