Best For
parallax sections / parallax scrolling website / background-attachment fixed
Parallax Sections
视差滚动
D
44/100Poor
An immersive layout creating depth parallax effects through fixed backgrounds and scrolling content, with each full-screen section having its own background layer. Ideal for brand stories, product showcases, and immersive experience pages.
parallax sectionsparallax scrolling websitebackground-attachment fixedfull-screen sectionsimmersive landing pagebrand story websitescroll depth effecthero parallaxlayered backgroundsscroll animation
Primary Move
Use bg-fixed to create fixed background parallax effect
Watch Out
No insufficient contrast between background images and content
AI Implementation
Copy the Hard Prompt first, then use the spec when needed
Use the Hard Prompt by default to generate UI. Use the Design Spec to understand, modify, and review the style. Use the Creative Brief for early exploration.
Hard Prompt
Use this by default: copy it, append the concrete requirement, and let AI generate consistent production UI.
When to use
- When AI should generate UI directly
- When repeated outputs must stay consistent
- When style drift is the main risk
How to use
- Copy the full prompt
- Append the concrete requirement
- Review against forbidden rules and UI states
STYLEKIT_STYLE_REFERENCE
style_name: Parallax Sections
style_slug: parallax-sections
style_source: /styles/parallax-sections
# Hard Prompt
## When To Use
Use this when you want AI to generate code with strict style consistency. It is the safest default for production UI.
## How To Use
- Copy the full prompt into ChatGPT, Claude, Cursor, or another coding assistant.
- Append the concrete product/page requirement after the prompt.
- After generation, check the forbidden rules and interaction states before accepting the output.
Strictly follow the style rules below and maintain consistency. No style drift allowed.
## Requirements
- Prioritize style consistency first, then creative extension.
- When conflicts arise, treat prohibitions as the highest priority.
- Self-check before output: verify colors, typography, spacing, and interactions still match this style.
## Style Rules
You are a Parallax Sections layout expert. Generated code must follow:
## Layout Rules
- Each section uses min-h-screen full-screen height
- Backgrounds use bg-fixed bg-cover bg-center
- Content uses semi-transparent backgrounds (bg-white/90 or bg-black/40 depending on scene) with backdrop-blur
- Navigation uses fixed + backdrop-blur-lg
## Forbidden
- Using bg-scroll (breaks parallax effect)
- Inconsistent section heights
- Insufficient contrast between background and content
## Animation & Interaction Rules
- Decoupled Depth: Foreground cards avoid large Y-axis floating, prioritize opacity and blur to reinforce depth of field feedback.
- Glass Glare: Can use gradient sweep layers that slowly appear on hover, simulating lens reflection.
- Cinematic Slowness: Interaction rhythm uses duration-500 to 700, maintaining narrative continuity and immersion.
- Immersive Focus: Active feedback prioritizes background brightness changes, avoiding obvious scaling that breaks layout stability.
## Absolute Bans (Match and Refuse)
If any of the following patterns appear, it is a style violation — rewrite without exception.
- No insufficient contrast between background images and content
- inconsistent section heights that break rhythm
- excessive parallax layers causing performance issues
- ignoring mobile parallax degradation handling
- overly dense content that breaks focus
- large vertical card hover jumps (background already has displacement, foreground should be restrained)
- short, abrupt animations (would break immersive narrative)
## Self-Check (Verify Before Shipping)
If any item fails, the style has drifted — fix before shipping.
- [ ] No purple-to-blue gradients
- [ ] No overused fonts (Inter, Roboto, Geist, Fraunces, Plus Jakarta Sans)
- [ ] No nested cards (cards inside cards)
- [ ] No gray text on colored backgrounds
- [ ] Body text contrast meets WCAG AA (>= 4.5:1)
- [ ] No bounce or elastic easing curves
- [ ] Animations have a prefers-reduced-motion fallback
- [ ] Body text line length capped at 65-75 characters
- [ ] No side-stripe accent borders (border-left/right > 1px)
- [ ] No gradient text (background-clip: text)
- [ ] No glassmorphism used as the default surface treatment
- [ ] No tiny uppercase tracked eyebrow labels above every section heading
- [ ] No no insufficient contrast between background images and content
- [ ] no inconsistent section heights that break rhythm
- [ ] no excessive parallax layers causing performance issues
- [ ] no ignoring mobile parallax degradation handling
- [ ] no overly dense content that breaks focusComponent Templates
Component Preview
按钮
带模糊背景的沉浸式按钮，强调玻璃态光学变化
Frontend Readiness
Dark Mode, States, Motion, and Accessibility
This layer tracks whether the style is ready for real websites: theme modes, state feedback, keyboard access, and performance constraints.
Overall
51%
Fallback
Dark Mode
0%
MissingUI States
79%
PartialMotion
70%
PartialA11y
70%
PartialPerformance
35%
FallbackKey State Coverage
lightHoverFocus VisibleDisabledLoadingEmptyErrorSuccess
Button
Default / Hover / Focus Visible / Active / Disabled
Input
Default / Hover / Focus Visible / Disabled / Error
Card
Default / Hover / Focus Visible / Loading / Skeleton
Form
Default / Focus Visible / Disabled / Loading / Error
Implementation Notes
- No curated dark-mode contract exists yet.
- Check contrast in both light and dark modes.
- Check heavy shadows, blur, large media, and scroll-linked effects manually.
- No style-specific performance cost profile has been curated yet.
FAQ
Parallax Sections — Frequently Asked Questions
- What is the Parallax Sections design style?
- An immersive layout creating depth parallax effects through fixed backgrounds and scrolling content, with each full-screen section having its own background layer. Ideal for brand stories, product showcases, and immersive experience pages. Its core principle: Parallax Sections creates depth through differential scrolling speeds between background and foreground, letting users experience a layered visual journey while scrolling.
- What colors does Parallax Sections use?
- Parallax Sections uses #1e3a5f as its primary color and #f8fafc as its secondary color, with accent colors #3b82f6, #93c5fd, #0ea5e9, #c559f0. Every hex value can be copied from the palette on this page.
- How do I apply Parallax Sections correctly?
- Key practices: Use bg-fixed to create fixed background parallax effect. Each section uses min-h-screen full-screen height. Content areas use semi-transparent backgrounds bg-white/90 for readability.
- What are common mistakes with Parallax Sections?
- Avoid: No insufficient contrast between background images and content. No inconsistent section heights that break rhythm. No excessive parallax layers causing performance issues.
- How do I prompt AI to generate Parallax Sections UI?
- Copy the ready-made AI prompt on this page — it bundles the design tokens and component rules — and paste it into ChatGPT, Claude, Cursor, or v0. Effective prompts include the keywords: parallax sections, parallax scrolling website, background-attachment fixed, full-screen sections.
Global Styles
Global CSS
css
/* Parallax Sections 全局样式 */
.parallax-sections {
--ps-primary: #1e3a5f;
--ps-light: #93c5fd;
--ps-accent: #3b82f6;
}
.parallax-section {
background-attachment: fixed;
background-size: cover;
background-position: center;
}
@keyframes parallax-sections-fade-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes parallax-sections-pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.7; }
}
.parallax-sections-card {
position: relative;
overflow: hidden;
}
.parallax-sections-card::before {
content: "";
position: absolute;
inset: 0;
opacity: 0;
transition: opacity 0.3s ease;
background: linear-gradient(135deg, rgba(30, 58, 95, 0.05), transparent);
pointer-events: none;
}
.parallax-sections-card:hover::before {
opacity: 1;
}
.parallax-sections-gradient {
background: linear-gradient(135deg, #1e3a5f, #3b82f6);
}
.parallax-sections-gradient-text {
background: linear-gradient(135deg, #1e3a5f, #3b82f6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.parallax-sections-frosted {
backdrop-filter: blur(12px) saturate(180%);
-webkit-backdrop-filter: blur(12px) saturate(180%);
background: rgba(30, 58, 95, 0.08);
}
.parallax-sections-accent-corner {
clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2rem), calc(100% - 2rem) 100%, 0 100%);
}
.parallax-sections-animate-in {
animation: parallax-sections-fade-in 0.5s ease-out both;
}Compatible Visual Styles
Try Pairing
Parallax Sections is a layout pattern that can be paired with the following visual styles.
IDE Integration
IDE Configuration Export
Download configuration files for AI coding assistants to generate code in this style.
Style Pack
Export Style Pack
Get complete machine-readable style assets including design tokens, Tailwind presets, CSS variables, and shadcn/ui themes.
Metadata
Style metadata including version information
Design Tokens
Compatible with Figma / Style Dictionary / Tokens Studio
Tailwind Preset
Tailwind CSS theme preset, import directly in config
Global CSS
CSS variables and base styles
shadcn Theme
shadcn/ui theme configuration
CSS Variables
Pure CSS variables, works with any project
SKILL.md
Loadable skill pack for Cursor / Claude Code / VS Code
Design Philosophy
Parallax Sections creates depth through differential scrolling speeds between background and foreground, letting users experience a layered visual journey while scrolling.
Accessibility
Accessibility Score
WCAG 2.1 compliance analysis based on color contrast and typography readability.
44
Overall Score
Grade: D - Poor
Contrast Ratios
Score: 27/100Average Ratio: 4.3:1
AA FailAAA Fail
| Context | Colors | Ratio | AA | AAA |
|---|---|---|---|---|
| Text on background | /#ffffff / #1e3a5f | 11.5:1 | ||
| Secondary text on background | /#1e3a5f / #1e3a5f | 1:1 | ||
| Text on accent 1 | /#ffffff / #3b82f6 | 3.68:1 | ||
| Alt text on accent 1 | /#1e3a5f / #3b82f6 | 3.13:1 | ||
| Text on accent 2 | /#ffffff / #93c5fd | 1.8:1 | ||
| Alt text on accent 2 | /#1e3a5f / #93c5fd | 6.38:1 | ||
| Text on accent 3 | /#ffffff / #0ea5e9 | 2.77:1 | ||
| Alt text on accent 3 | /#1e3a5f / #0ea5e9 | 4.15:1 |
Readability
Score
83/100
Font Size
text-lg md:text-xl
Font Weight
font-bold tracking-tight
Line Height
default
Scoring is based on WCAG 2.1 standards. AA requires 4.5:1 contrast for normal text, 3:1 for large text; AAA requires 7:1 for normal text, 4.5:1 for large text.
Design Recipes
Recommended Combinations with Parallax Sections
These curated recipes combine this style with layouts and animations, optimized for specific use cases.