如何在几分钟内为你的网站或着陆页创建吸睛的 3D 演示视频如果你曾想用电影级的 3D 演示视频展示你的网站或着陆页，好消

如果你曾想用电影级的 3D 演示视频展示你的网站或着陆页，好消息是：你不需要复杂的视频设备或传统的屏幕录制程序。

在这篇博文中，我将分享一个简单、可重复的工作流，让你通过基于浏览器的工具，在几分钟内完成网站录制、添加平滑滚动并应用强大的 3D 变换。

你将构建什么

在完成这个过程后，你将拥有：

你的网站平滑、自动滚动的屏幕录制
电影级的 3D 摄像机动作（旋转、位置和缩放）
完美的着陆页、产品发布或社交媒体演示视频

第 1 步：打开网站和开发者工具 (DevTools)

首先，打开你要录制的网站。

然后打开浏览器的开发者工具（审查元素 / 控制台）。为了方便起见，你可以将开发者工具脱离到独立窗口中 —— 这让你在录制时更容易控制滚动。

第 2 步：使用 Screentell 开始录制

接下来，打开：

👉 screentell.com

进入录制页面并选择你想捕获的内容：

浏览器标签页
窗口
或者包含你网站的整个屏幕

点击 “共享” ，然后由于 “开始录制” 。

此时，Screentell 正在积极录制你的屏幕。与许多通用的屏幕录制程序不同，Screentell 专为轻松创建专业的产品演示而优化。

第 3 步：启用平滑自动滚动

为了获得干净、专业的滚动效果，在开发者工具的 控制台 (Console) 中运行以下脚本：

Javascript

(function smoothScrollDown() {  // 滚动速度（越高越快）  const speed = 2;  function step() {    const currentScroll = window.scrollY || document.documentElement.scrollTop;    const windowHeight = window.innerHeight;    const totalHeight = document.documentElement.scrollHeight;    if (currentScroll + windowHeight < totalHeight) {      window.scrollTo(0, currentScroll + speed);      window.requestAnimationFrame(step);    } else {      console.log("已到达页面底部");    }  }  window.requestAnimationFrame(step);})();