介绍 DIVZ - 一个用于在 3D z 轴上滚动、滑动和缩放内容的 React 组件

我很高兴与大家分享 DIVZ——一个免费的开源 React UI 组件，它允许你在 3D Z 轴上滚动、滑动和缩放 HTML 元素。你可以把它看作是一种全新的、实验性的网页内容导航和呈现方式 🙌

👉 在这里试用演示 👈

👉 深入研究源代码👈

安装

开发者可以将 Divz 作为开源组件安装到 React 应用中。最快的安装方法是通过下面的 npm install 命令：

npm install divz

用法

安装后，导入组件并将其呈现在您的应用或页面中，并将其包装在您的 div 列表或其他 HTML 元素周围：

import { Divz } from "divz";

function App() {
  return (
    <Divz>
      <div>1</div>
      <div>2</div>
      <div>3</div>
      <div>4</div>
    </Divz>
  );
}

演示源代码说明了如何使用更多道具初始化组件 - 以及子 div 内的图像和视频 - 以获得更丰富的用户体验。

为什么选择 Divz？

Divz 最初是为了在伪 3D 环境中展示作品集而创建的，其灵感大致来自 Apple 的 Time Machine 界面，该界面允许用户缩放历史 Finder 窗口：

它有何不同？

• 简化集成： Divz 设计为响应式且易于使用，可作为 div 或其他 HTML 元素列表的直接包装器。
• 多样化应用：虽然演示展示了 Divz 作为轮播、幻灯片或图库组件的多功能性，但它也为一系​​列其他潜在用途打开了大门。不妨将其视为一种创新的、实验性的网页内容导航方法。
• 广泛的设备支持： Divz 可适应各种导航模式，包括移动设备的触摸、桌面用户的光标/触控板以及电视设备的箭头键。

它是如何工作的？

Divz 在底层对核心组件及其子 HTML 元素执行 CSS3 转换，并使用 React TypeScript 动态设置。该组件使用 Vite 打包，以便集成 npm 库。

支持

我希望这对该组件有一个很好的介绍，并且您可以在自己的项目中使用它！

💬如果您有任何反馈、请求或问题，请通过评论发送🐛

⭐如果您喜欢该组件或想将其加入书签，请给它一个 Github 星标🙏