In the SX-Creval system, we've prepared two highly interactive process step-by-step display components for you. They not only clearly break down your customization services (OEM/ODM), quality control (QC), or sampling and delivery processes, but also feature Apple's official website-level "scrolling detection animations," transforming dry process introductions into an immersive visual presentation.
1. Two top-level process layouts
Style 1: Scroll-Guided Timeline
- Visual features : The step cards are arranged in a grid (2, 3 or 4 columns), with a numbered "node" above each step, and the nodes are connected by dotted lines.
- Scroll Magic : This is an absolutely stunning interactive design! As visitors scroll down the webpage, the system detects the scroll position and automatically "lights up" the originally gray dotted line segment by segment to the brand's main color ; at the same time, the digital nodes will enlarge and glow, the cards will float up accordingly, and even the factory scene hidden behind the cards will fade in and appear!
- Customizable node shapes : You can set the digital nodes to classic circles, rounded squares, or even sharp diamonds with a strong industrial feel, depending on the industry attributes.
- Applicable scenarios : Suitable for showcasing a complete supply chain panorama with many steps and rigorous logic (e.g., a 6-step process from conceptual design -> mold development -> trial production -> mass production -> global delivery).
Style 2: Parallax Horizontal Scroll
- Visual features : The most sought-after layout method by top design agencies worldwide! Cards are arranged in a horizontal row, with a huge transparent digital watermark (1, 2, 3...) on the background.
- Magical Animation (Pin & Slide) : On desktop, when a visitor scrolls down with the mouse wheel, the webpage "snags" to the current position, while the flowchart cards automatically slide from right to left . This spatial parallax illusion of "scrolling down = moving right" provides an extremely sophisticated browsing experience. (Note: On mobile devices, it automatically transitions to a smooth left-right swipe browsing experience, perfectly adapted.)
- Hover unveiling effect : When the mouse hovers over a card, the card background will gracefully fade in and enlarge a high-definition real-world image, instantly enhancing the visual impact.
- Applicable scenarios : Suitable for homepages with limited space, displaying "Cooperation Guide (How to Order)" or "4-Step Quality Inspection Method".
2. Card Styling & Masks
If you uploaded a "background image" in the step card, the system provides you with a professional **"Mask Overlay engine"** to ensure that the preceding black or white text is absolutely clear and legible:
- Card image masking color : You can choose to overlay a semi-transparent film of black, white, or dark blue on top of the image.
- Mask transparency (%) :
- If the factory background image you upload has very messy colors and high contrast, it is recommended to increase the transparency (e.g., 60% or 80%) to make the background image faintly visible, ensuring that the text in front is clearly visible.
- If you want the text to appear in white, select a black mask; if the text is dark, select a white mask.
- Card color inversion (Dark Mode) :
If your entire webpage has a dark background (or uses a large dark image), be sure to enable this option! The card will instantly transform into a highly futuristic, semi-transparent glass-like texture , and the text will automatically turn white, blending perfectly with the dark background.
3. Typography adjustments
- Card text alignment :
- Left alignment: Suitable for describing steps with a lot of text (3 lines or more), conforms to European and American reading habits, and appears rigorous and business-like.
- Center alignment: Suitable for describing very short steps (1-2 lines), making it appear symmetrical and sophisticated.
- Card corner rounding settings : One-click to switch the edge sharpness of the card (the default rounded-2xl is recommended, as it best suits modern web page aesthetics).
- Font size control : The system provides a default font size that conforms to the golden ratio. You can also enlarge the "card title" or shrink the "card description" individually.
💡 SX-Creval: A Guide to Avoiding Pitfalls in Foreign Trade Process Writing (Pro Tips)
1. Use real images instead of online images (core conversion point) :
Whether it's the pop-up background of the [Scrolling Guide Line] or the hovering background of the [Horizontal Scrolling], we recommend uploading real photos of the corresponding process in your own factory .
2. Don't create processes for the sake of processes :
If your business logic is simply "pay-ship", don't force it into six steps. Use the process components to showcase your "packaging safety standards" or "after-sales service support response" , which can have an equally excellent marketing effect.