Mask Transformation is one of the most visually striking advanced interactive components in the SX-Creval system. It uses SVG vector graphics (such as your company logo or a specific shape) as "viewports," creating smooth zoom-in or zoom-out animations as the user scrolls down the webpage, eventually breaking through the mask to reveal a completely new content layer hidden behind it.
Simply put, this is a "two-layer space" module:
- Top layer (wall) : The first layer the user sees, featuring a cutout SVG shape that can be configured with static text or data.
- The lower layer (world) : The underlying space seen through the cutout shape. When the page scrolls through the mask, the user will fully enter this space and interact with the content within it.
This module is ideal as a "visual watershed" for a website, such as transitioning from brand philosophy to core products, or from corporate vision to client case studies.
1. Core parameter settings (mask and background)
When creating this module, you first need to configure the overall animation and background effects.
1.1 Mask Shape and Animation Settings
- Mask Shape SVG : Please upload a solid color graphic file in SVG format (brand logo, letters, or simple geometric shapes are recommended). The system will automatically read the outline of the graphic and cut it out. If no image is uploaded, the system will use the default Header Logo.
- Mask size : Enter a number between 10 and 80 to control the initial size of the cutout shape. The larger the value, the larger the initial perspective window.
- Masking location :
- Left/Right : The masking graphic will be aligned to the left or right, which is suitable for leaving space on the other side to display the "upper content".
- The masked graphic is displayed in the center, which has a strong sense of symmetry and focus.
- Masking animation format :
- Normal : As you scroll down the page, the graphic continuously enlarges until it fills the screen, allowing your gaze to pass through the graphic and into the lower layer.
- Reverse : As you scroll down the page, the graphic shrinks from large to small, eventually revealing the full view of the layer below.
1.2 Setting a Double Background
Because this module contains two spaces, you need to set backgrounds for them separately:
- [Top Layer] Background Settings : Masks the background of the wall. Supports solid colors, high-definition images, or looping videos. You can also set an overlay to darken images or videos, ensuring the text in front is clear.
- [Lower Layer] Background Settings : The background of the space as seen after penetrating the wall. Also supports colors, images, or videos.
2. Upper-level content module (select one)
The upper layer content is information that floats on the masked wall, displayed to the user before the animation occurs. The system provides you with 5 block-style layout options:
- 1. Title Description (UpOne) :
A standard text and image structure. It includes small tags, main headings, paragraph descriptions, and an underlined text link (such as EXPLORE MORE). - 2. Number + Title Description (UpTwo) :
A data-driven layout. Includes a large number (with units such as 20+), followed by a main title and a brief description. Ideal for showcasing a company's years of operation, number of clients served, etc. - 3. Advantages List Version (UpThree) :
Feature list format. The left side is the title area, and the right side allows you to add multiple core selling points (3 recommended). Each selling point supports an independent SVG icon and a one-sentence description. - 4. Company Profile (UpFour) :
A complete About Us structure. It includes an English title, a lengthy introductory paragraph, a right-aligned button group, and three key data statistics items at the bottom. - 5. Strengths with description (UpFive) :
Serializable presentation. Suitable for introducing product features or service steps. The system will automatically number your list items (01, 02...), and each item includes a title and description.
3. Lower-level content modules (select one)
The lower layer content is the core display area that users see after "penetrating" the overlay. You can choose one of the following 5 functional components:
- 1. DownOne Card :
Standard card mode. You can add an unlimited number of card items with icons (such as "High Performance", "High Security", etc.), and the system will automatically convert them into a smooth horizontal carousel display. - 2. CTA Mobile Version (DownTwo) :
A strongly driven conversion module. It includes a large main slogan, a subtitle, and two prominent action buttons (e.g., the main button jumps to "Contact Us", and the secondary button calls up "Send Email"). - 3. Trust Endorsement Version (DownThree) :
This is used to display the logos of partners or customers. It is recommended to add 4 to 6 grayscale or monochrome company logos to enhance brand credibility for SX-Creval users. - 4. Customer Testimonials (DownFour) :
Rating carousel component. Used to display genuine customer feedback. You can enter customer names, job titles, avatars, detailed reviews, and even set ratings from 1 to 5 stars. - 5. FAQ (DownFive) :
An accordion-style folding Q&A area. Suitable for displaying frequently asked questions such as delivery time, minimum order quantity (MOQ), and customization services. Users can click on a question to expand for detailed answers.
4. Mobile Device Adaptation Instructions
To ensure an excellent reading experience and page loading performance on mobile devices, the SX-Creval system implements intelligent responsive degradation processing for the mask transformation module:
- On desktop (computer) : The system will perfectly render the complete SVG masking through, zoom in/out animations and complex parallax scrolling effects.
- On mobile devices (phones/tablets) : To avoid complex scroll detection affecting the smoothness of mobile browsers, the system will automatically hide the overlay wall effect and display your configured background, upper content and lower content in an intuitive and elegant vertical flow layout, ensuring efficient and accurate information delivery.
5. SX-Creval Official Configuration Recommendations
- Ensure contrast : If you used a light-colored image as the upper background, be sure to change it to a darker color using the "Title Color" and "Description Color" settings in the configuration options, and vice versa.
- SVG file requirements : Please ensure that the background of the uploaded mask graphic is completely transparent (a pure path file without a white background), otherwise the "cutout perspective" effect cannot be achieved.
- Keep the content concise : Considering that this component has a strong scrolling animation property, the text in the upper layer should not be too much. Use short and powerful slogans or data to guide users to scroll down for the best effect.