文档导航

遮罩变换

遮罩变换（Mask Transformation）是 SX-Creval 系统中最具视觉冲击力的高级互动组件之一。它利用 SVG 矢量图形（如您的企业 Logo 或特定形状）作为“透视窗”，通过用户向下滚动网页的动作，产生平滑的放大或缩小动画，最终穿透遮罩，展现隐藏在后方的全新内容层。

简单来说，这是一个“双层空间”模块：

  • 上层（墙面）：用户首先看到的层，带有一个镂空的 SVG 形状，并可以配置静态文字或数据。
  • 下层（世界）：透过镂空形状看到的底层空间，当页面滚动穿透遮罩后，用户将完整进入这个空间并与其中的内容交互。

此模块非常适合用作网站的“视觉分水岭”，例如：品牌理念过渡到核心产品、企业愿景过渡到客户案例等。

1. 核心参数设置 (遮罩与背景)

在创建该模块时，您首先需要配置整体的动画和背景效果。

1.1 遮罩形状与动画设置 (Mask Setting)

  • 遮罩形状SVG：请上传一个 SVG 格式的纯色图形文件（推荐使用品牌 Logo、字母或简单的几何图形）。系统将自动读取该图形的轮廓进行镂空。若不上传，系统将使用默认的 Header Logo。
  • 遮罩大小：输入 10 到 80 之间的数字，控制初始状态下镂空图形的大小。数值越大，初始透视窗越大。
  • 遮罩位置：
    • 左 / 右：遮罩图形将靠左或靠右对齐，适合给另一侧留出空间展示“上层内容”。
    • 中：遮罩图形居中显示，具有极强的对称美感和聚焦感。
  • 遮罩动画形式：
    • 遮罩放大 (Normal)：向下滑动页面时，图形不断放大直至填满屏幕，视线穿过图形进入下层。
    • 遮罩缩小 (Reverse)：向下滑动页面时，图形从大变小，最终展现下层的全貌。

1.2 双层背景设置

因为该模块包含两个空间，您需要分别为它们设置背景：

  • [上层] 背景设置：遮罩墙面的背景。支持纯色、高清图片或循环视频。还可以设置遮罩叠加层（Overlay）来压暗图片或视频，确保前方文字清晰。
  • [下层] 背景设置：穿透墙面后看到的空间背景。同样支持颜色、图片或视频。

2. 上层内容模块 (选填其一)

上层内容是悬浮在遮罩墙面上的信息，在动画发生前向用户展示。系统为您提供了 5 种搭积木式的排版选择：

  • 1. 标题描述 (UpOne)：
    标准的图文结构。包含小标签、主标题、段落描述以及一个带下划线样式的文字链接（如 EXPLORE MORE）。
  • 2. 数字+标题描述 (UpTwo)：
    数据冲击型排版。包含一个巨大的数字（可带单位如 20+），紧跟主标题和简短描述。非常适合展示企业成立年限、服务客户数量等。
  • 3. 优势列表版 (UpThree)：
    功能罗列型。左侧为标题区域，右侧允许您添加多个核心卖点（建议 3 个），每个卖点支持独立的 SVG 图标和一句话描述。
  • 4. 企业简介版 (UpFour)：
    完整的 About Us 结构。包含英文标题、长篇幅简介段落、右侧对齐的按钮组，以及底部的 3 个关键数据统计项。
  • 5. 优势带描述 (UpFive)：
    序列化展示版。适合介绍产品特性或服务步骤，系统会自动为您的列表项编号（01, 02...），每一项均包含标题和描述。

3. 下层内容模块 (选填其一)

下层内容是用户“穿透”遮罩后看到的核心展示区。您可以从以下 5 种功能组件中任选其一：

  • 1. 单行卡片 (DownOne)：
    标准卡片模式。您可以无限添加带图标的卡片项（如“高性能”、“高安全”等），系统会自动将其转化为平滑的横向轮播展示。
  • 2. CTA行动版 (DownTwo)：
    强引导转化模块。包含巨大的主口号、副标题，以及两个显眼的行动按钮（例如：主按钮跳转到“联系我们”，次按钮唤起“发送邮件”）。
  • 3. 信任背书版 (DownThree)：
    用于展示合作伙伴或客户的 Logo 墙。建议添加 4 到 6 个灰度或单色的企业 Logo，增强 SX-Creval 用户的品牌可信度。
  • 4. 客户证言版 (DownFour)：
    评价轮播组件。用于展示真实的客户反馈。您可以录入客户姓名、职位、头像、具体评价内容，甚至可以设置 1-5 星的评分。
  • 5. FAQ问答版 (DownFive)：
    手风琴样式的折叠问答区。适合展示发货周期、起订量（MOQ）、定制服务等常见问题。用户点击问题即可展开详细解答。

4. 移动端设备适配说明

为了保证移动端极佳的阅读体验和页面加载性能，SX-Creval 系统对遮罩变换模块进行了智能响应式降级处理：

  • 在桌面端（电脑）：系统将完美呈现完整的 SVG 遮罩穿透、放大/缩小动画及复杂的视差滚动效果。
  • 在移动端（手机/平板）：为避免复杂的滚动侦测影响手机浏览器的流畅度，系统将自动隐藏遮罩墙面效果，以直观、大气的垂直流式布局平铺展示您配置的背景、上层内容及下层内容，确保信息传达的高效与准确。

5. SX-Creval 官方配置建议

  • 确保对比度：如果您在上层背景使用了颜色较浅的图片，请务必利用配置项中的“标题颜色”和“描述颜色”将其改为深色，反之亦然。
  • SVG 文件要求：请确保上传的遮罩图形背景是完全透明的（不带白色底板的纯路径文件），否则无法实现“镂空透视”效果。
  • 内容精简：考虑到该组件具有极强的滚动动画属性，上层内容（Up Layer）的文字不宜过多，用简短有力的标语或数据引导用户向下滑动，效果最佳。