<img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=241066823005528&amp;ev=PageView&amp;noscript=1">

Modules

Parallax people cards (Omni Pro)

This module ships in Omni Pro.

A carousel of framed windows with a cutout person reaching above each frame. The arrows and swipes move a whole page of cards, and while the cards slide the persons run ahead of their frames. When the pointer moves over a card the background drifts away from it and the person follows it, and while the page scrolls the person rises a little. A playful way to present a team. Available in Omni Pro.

On this page

Back to top

Set up the content

  1. Content → Cards: For each person add a Background image (a texture, a place or a pattern) and a Cutout – the person saved as a PNG with a transparent background.
  2. Cutout height sets the person's height as a share of the card; above 100 % the head reaches above the frame in the Window layout. Cutout position puts the person in the middle, left or right.
  3. Add Role or tag, Name, Text and a Link (text link, HubSpot CTA or the whole card).
  4. Content → Heading adds an eyebrow, heading and lead above the cards.

Choose the look

SettingOptions
Styles → Layout → Cards per page (desktop)2–4 cards move at a time; tablets show two, phones one
Scene ratio4:5, 1:1 or 3:4 picture area
Progress lineThe thin line under the cards that shows the position
Window: Space above the frame, Window: Side insetHow much room the head has above the window and the window's width
Parallax strength0 turns the movement off; 1 is calm, 3 is playful
Styles → CardsWindow frame color, a tint over the background, shadow under the window
Styles → Text / Border / Corner / SpacingFonts and colors, frame border, corner radius, padding and gap

Good to know

  • Cutouts: Any tool that removes a background works (Photoshop, Canva, Preview on a Mac with «Remove background», or the theme's omni-tools/cutout script, which uses macOS Vision). Save as PNG, about 800–1000 px tall.
  • The pointer parallax runs for mouse pointers only; touch screens and visitors who prefer reduced motion see the cards still, and Animations → Off removes the movement too.
  • Background, module width, spacing and animation work the same in every module – see Backgrounds and Animations.

Support

Did this answer your question?

If not, write to us and say which page you were on.

omni@springagency.com