Editorial Parallax
Elegant parallax feature section with scroll animations.
Main Features of Editorial Parallax
How to Use Editorial Parallax in Next.js
Installation Guide for Editorial Parallax
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
features | Array<{number: string, title: string, desc: string}> | [] | Array of feature items with number, title, and description. |
backgroundColor | string | #f5f5f7 | Background color (hex, rgb, or hsl). |
image | string | https://images.unsplash.com/photo-1618005182384-a83a8bd57fbe?q=80&w=2564&auto=format&fit=crop | Background image URL. |
title | string | Pure | Section title text. |
titleItalic | string | Elegance | Italic title text. |
borderColor | string | #d4d4d4 | Border color. |
numberColor | string | #a3a3a3 | Feature number color. |
titleColor | string | #171717 | Title text color. |
descColor | string | #525252 | Description text color. |
badgeText | string | Live Preview | Badge text. |
badgeDotColor | string | #22c55e | Badge dot color. |
badgeBgColor | string | rgba(255,255,255,0.9) | Badge background color. |
badgeTextColor | string | #525252 | Badge text color. |
cardBgColor | string | #ffffff | Card background color. |
cardTextColor | string | #171717 | Card text color. |
Related Components
When to Use
Perfect for high-end fashion, architectural portfolios, and editorial Next.js sites that want an elegant, slow-paced narrative. Use this React component for a parallax-driven feature section that uses scroll animations to reveal content layers.
Best Practices
Follow React best practices by selecting high-quality, high-resolution background imagery. Maintain scalable component architecture by keeping the number of cards low to ensure a smooth scrolling experience. Optimize performance by using hardware-accelerated transforms.
Why This Component Matters in Modern UI Development
Editorial parallax layouts add a sense of luxury and depth to digital storytelling. This customizable UI component givesคุณ a hardware-accelerated version of this aesthetic, adding semantic authority and visual polish to your project.
Frequently Asked Questions
QHow does the parallax work?
It uses Framer Motion's `useScroll` and `useTransform` hooks to calculate the displacement of background images and text layers relative to the scroll position.
QCan I use video backgrounds?
While optimized for images, the structure can be modified to accept video elements for an even more immersive editorial experience.
QIs it intensive on the CPU?
The component is highly optimized but it's best to test on lower-end devices when using multiple high-resolution images.