Effects · Gutenberg
Parallax Depth Cards block for WordPress
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds.
Get Blockenberg
Free Gutenberg block in Blockenberg. The inspector controls and front-end behavior on this page come from this block’s source, not a shared stub.
What it actually does
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds.
Inspector panels on this block: Cards, Layout, Parallax Settings. Those titles come from index.js, not from a shared template.
Behavior controls: “Columns” options: 1, 2, 3.
Where to find it
Gutenberg inserter → Effects → search “Parallax Depth Cards” (block name `blockenberg/parallax-depth-cards` in block.json). Style it in the sidebar after insert.
How to use Parallax Depth Cards block for WordPress
- Install Blockenberg. Install from WordPress.org and activate the plugin.
- Insert the block. Edit a page, click +, search for “Parallax Depth Cards”, insert it. Category: Effects.
- Configure inspector controls that exist on this block. Open Cards. Set “Cards — Title”, “Subtitle”, “Badge Text”, “Tag”.
- Check the published page. The view script reads HTML data attributes: data-depth, data-opts. The block editor preview may not run the same view script.
Inspector controls from this block’s code
| Control | What the code does |
|---|---|
| Cards — Title | Text field in the inspector. |
| Subtitle | Text field in the inspector. |
| Badge Text | Text field in the inspector. |
| Tag | Text field in the inspector. |
| Background Image URL | Text field in the inspector. |
| Columns | Select control; the chosen value is saved on the block. Options: 1; 2; 3. block.json default: 3. Saved as `columns`. |
| Card Width (px) | Numeric range control in the inspector. Range 240–520. block.json default: 320. Saved as `cardWidth`. |
| Card Height (px) | Numeric range control in the inspector. Range 280–700. block.json default: 420. Saved as `cardHeight`. |
| Card Radius (px) | Numeric range control in the inspector. Range 0–40. block.json default: 24. Saved as `cardRadius`. |
| Tilt Strength (°) | Numeric range control in the inspector. Range 0–40. block.json default: 20. Saved as `tiltStrength`. |
| Depth Layer Shift (px) | Numeric range control in the inspector. Range 0–80. block.json default: 30. Saved as `depthStrength`. |
| Show Badge | On/off toggle in the inspector. On by default. Saved as `showBadge`. |
| Show Tag | On/off toggle in the inspector. On by default. Saved as `showTag`. |
| Show Icon | On/off toggle in the inspector. On by default. Saved as `showIcon`. |
| Icon Size (px) | Numeric range control in the inspector. Range 24–96. block.json default: 48. Saved as `iconSize`. |
| Badge Font Size (px) | Numeric range control in the inspector. Range 8–18. block.json default: 11. Saved as `badgeFontSize`. |
| Colors — Title | Color control in the inspector. block.json default: #ffffff. Saved as `titleColor`. |
| Subtitle | Color control in the inspector. block.json default: rgba(255,255,255,0.7). Saved as `subtitleColor`. |
| Badge BG | Color control in the inspector. block.json default: #6366f1. Saved as `badgeBg`. |
| Badge Text | Color control in the inspector. block.json default: #ffffff. Saved as `badgeColor`. |
| Tag BG | Color control in the inspector. block.json default: rgba(255,255,255,0.15). Saved as `tagBg`. |
| Tag Text | Color control in the inspector. block.json default: #ffffff. Saved as `tagColor`. |
| Overlay | Color control in the inspector. block.json default: rgba(0,0,0,0.25). Saved as `overlayColor`. |
| Glow Orb | Color control in the inspector. block.json default: rgba(99,102,241,0.5). Saved as `glowColor`. |
What the front-end script actually does
- The view script reads HTML data attributes: data-depth, data-opts.
When this is the right block
- Cards with layered 3D depth parallax on mouse move — different elements float at different speeds — that is the job of Parallax Depth Cards, not a generic content block.
- Use it when you need the editor control labeled “Cards — Title”, which exists on this block’s inspector.
- It matches pages about parallax, depth, mouse.
- Inserter grouping: motion, overlays, and visual treatments.
Notes from the implementation
viewScript: this folder’s frontend.js is enqueued on the front end for this block.
FAQ
How do I add the Parallax Depth Cards block in WordPress?
Install Blockenberg from WordPress.org, edit a page in the block editor, click +, and search for “Parallax Depth Cards”. It sits under Effects. After insert, open Cards and set “Cards — Title”, “Subtitle”, “Badge Text”, “Tag”.
What makes Parallax Depth Cards different from other Blockenberg blocks?
Cards with layered 3D depth parallax on mouse move — different elements float at different speeds. Inspector labels on this block include “Cards — Title”, “Subtitle”, “Badge Text”, “Tag”.
Is the Parallax Depth Cards Gutenberg block free?
Yes. Parallax Depth Cards ships inside Blockenberg. Get the plugin from WordPress.org — no paid add-on is required for this block.
Can I style Parallax Depth Cards to match my theme?
Yes. Blockenberg’s shared typography and color panels apply here, plus any block-specific style controls listed on this page (panels: Cards, Layout, Parallax Settings).
Related effects blocks
Holographic Card
A card with an iridescent holographic foil surface effect that reacts to mouse movement with rainbow shimmer and 3D tilt.
Tilt Card
Card with 3D perspective tilt effect on mouse hover. Rich content with image, heading, text, icon, and link.
3D Text
Eye-catching 3D extruded text using CSS text-shadow layers and perspective transforms. Supports rotate-on-hover, float animation, and customizable depth, colors and typography.
Content Flip Box
A responsive grid of cards that flip on hover or click to reveal a styled back face — perfect for services, features, team, and more.
Parallax Section
A full-width content section with a background image that scrolls at a different speed for a depth parallax effect.
Card Deck Slider
A 3D card deck slider where cards arc/fan out behind the front card and animate through the sequence.
Get Blockenberg
Install Blockenberg from WordPress.org, then insert Parallax Depth Cards from the Gutenberg inserter.