跳到主要内容

如何制作网站滚动视频

把任意网站变成顺滑的滚动视频:粘贴链接,设定时长、画面比例和运动方式,然后导出没有水印的 MP4、WebM 或 GIF。

Aviral Lakhanpaul更新于 阅读约 4 分钟

简短回答

把页面地址粘贴到 Website Scroll Video 这类网址转视频工具里,选好滚动要跑多久、需要什么画面比例,预览一遍,然后导出。页面会在服务器上的真实浏览器里打开,Cookie 横幅被清掉,滚动的每一帧都经过计算,所以不用录屏,你也能得到一段匀速的 MP4、WebM 或 GIF。

开始之前

你需要三样东西:一个公开地址、一个用来导出的账户,以及大约五分钟。

  • 一个公开网址。 任何不用密码就能在无痕窗口里打开的页面都行。测试链接只要是公开的也可以,比如 Framer 的 .framer.website 地址或 Webflow 的 .webflow.io 地址。localhost 和需要登录的页面不行。
  • 一个账户。 读取页面和预览都免费。导出要花点数,每个新账户可一次性获得 51 点,无需信用卡。
  • 大致想好视频用在哪里。 一条 Reel、一个作品集、一封发给客户的邮件。这决定了画面比例和时长,而这两项是事后唯一改不了、只能重新导出的设置。

六步做出视频

  1. 粘贴链接

    把地址粘贴到首页的输入框里,按回车。我们会在真实浏览器里打开页面,等字体和懒加载的图片都加载完,再从上到下读取一遍。不会录你屏幕上的任何东西。

  2. 选择设备和画面比例

    桌面端按桌面宽度读取页面,提供 16:9、4:3 或 1:1。平板和手机按各自的宽度读取,网站会返回它真正的响应式版式,提供 9:16、4:5 或 1:1。要按规格交付?直接输入精确尺寸即可。

  3. 设定时长

    时长可在 2 到 90 秒之间设置,它同时也决定滚动速度:同一个页面,六秒是预告,三十秒就是一次导览。

  4. 选择运动方式

    「柔和」缓入缓出,「滑行」起步利落、随后慢慢滑停,「匀速」保持同一速度,「脉冲」一个区块一个区块地往下走。如果视频要无缝循环,把播放设为「往返滚动」。

  5. 加上停留、停顿和悬停

    可选,但大部分打磨都在这一步。在开头或结尾静止最多 10 秒,在最多 6 个区块上停住,再让光标指向按钮和卡片,播放它们的悬停效果。

  6. 先预览,再导出

    预览在你的浏览器里播放,无论重播多少遍都不花钱。看着满意了,就导出 MP4、WebM 或 GIF。按下「导出」按钮之前,上面就会显示确切要花多少点数。

要紧的设置

编辑器里大部分设置都有合理的默认值。下面这几项值得多看一眼。

网站滚动视频的推荐设置
设置先用什么时候改
时长页面每一屏大约两秒做预告(缩短),或者需要让人读清文案(加长,或加入停顿)
帧率60 fps文件大小比流畅度更重要时。30 fps 帧数减半。GIF 最高 24
分辨率1080p要在大屏上播放或之后要裁切(1440p 或 4K),或者只是快速出个草稿(720p)
运动柔和做背景循环(匀速),或者做要在每个区块都停稳的产品导览(脉冲)
格式MP4需要透明或更小的文件(WebM),或者必须在邮件里直接播放(GIF)
引擎静态平移页面有想保留的滚动触发出场动画或视差效果(实时录制)

如果页面很长、只有上半部分最有说服力,就拖动预览下方的裁剪手柄,设定滚动的起点和终点。时长不变、滚动距离变短,滚动就更慢,也更易读。

要花多少

时长按成片每 2 秒一点计费,另有几项设置会在此之上加一笔固定点数:更高的分辨率、更高的帧率、实时录制、平板或手机宽度、停顿和悬停。一段 10 秒、1080p、60 fps、按桌面宽度读取的导出要花 21 点,所以注册送的 51 点够做两次。

之后点数按包购买(5 美元买 100 点、12 美元买 400 点和19 美元买 900 点),永不过期。没有订阅,任何导出都没有水印。完整价目表见点数怎么算。

如果哪里不对劲

  • 出场动画不见了,或者某个区块是空白的。 快速引擎是在页面的一张静态图像上平移,所以滚动触发的效果不会播放。把引擎切换到「实时录制」,或者打开「播完动画」,让它们直接走到最终状态。见录下滚动动画。
  • 有 Cookie 横幅或聊天气泡漏了进来。 保持「移除 Cookie 横幅与弹窗」开启,漏掉的东西以 CSS 选择器的形式填进「隐藏元素」。详见从录制中去掉弹窗。
  • 页面显示登录界面或报错。 页面必须是公开的。我们无法替你登录,而且有些网站会直接拒绝自动化浏览器。
  • 手机视频看起来像一张被挤窄的桌面页面。 把设备选为「手机」,而不是在桌面端选一个竖长的画面比例,这样网站才会返回它的手机版式。见录制网站的手机版。

拿你自己的网站试试

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

最近搜索

    常见 问题

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

    联系我们
    可以免费制作网站滚动视频吗?

    可以。每个新账户可一次性获得 51 个免费点数,无需信用卡,够做几段 1080p 的短视频。预览从不花钱;不管导出用的是免费点数还是付费点数,视频都没有水印。

    需要安装什么吗?

    不需要。没有应用,也没有浏览器扩展。页面在我们的服务器上打开和采集,所以无论用笔记本、平板还是手机,效果都一样。

    还没上线的网站能做滚动视频吗?

    只有在它有公开地址时才行。把它发布到一个不用密码就能打开的预览或测试网址,然后粘贴那个地址。本地地址和私有网络我们访问不到。

    网站滚动视频应该多长?

    可设置的范围是 2 到 90 秒。大多数落地页八到十五秒看起来正好;社交媒体预告六到十秒;完整的作品集导览加上几处停顿,可以做到三十秒。

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

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

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