Creating the Parallax Effect in Image Galleries

Plan Availability:
  • Personal
  • Small Biz
  • Enterprise

To create a the parallax effects in a Wrap the easiest place to start from is a template.

 

Using a Template

1. Find a template that has the desired effect and copy that card into the Wrap you’re working on.

2. To do so click the “New Card +” in the top left corner of the authoring tool in the Wrap you’re working on. Click “Copy from Wrap” and select the wrap you’d like to copy from. Find the desired card and select it.

 

 

 

Creating from Scratch

1. Can’t find a Wrap template that has the effect? That’s alright, it's pretty simple to create from scratch too. To do so click the “New Card +” again and create a card of the “Image Gallery” type.

2. Now that you’ve created your card, find the “Card Layout” panel and change your card to the “Fixed Background” type.

3. Now you’ll see in the component panel that we have one card with a Fixed Background element and a Gallery Item. 

4.

The basic idea behind the parallax effect is to create 2 backgrounds, one that is fixed to the card and one that scrolls with the page. Choosing this layout gives us the Fixed Background out of the box. Change the content of the Fixed Background layer to your desired Image. Change the Fixed Background’s position and size so that it covers a majority of the card (position to X = 0, Y = 0, width=640, height = 910).

Now we need to create the “Unfixed Background.”  Create a new "Image Component”. In the "Add Component" menu name the component “Unfixed Background” for clarity also make sure to add it to the “Each Item (Repeated)” card category

Then, set this Image of the “Unfixed Background" card to a .PNG or .JPG of size 640x910 pixels that you want to be in your other background. Make sure your card setup looks like below:

In this example, we used a solid color off-white PNG of size 640x910 for our background.

 

5. You've now successfully added the parallax effect. The finished card should now look like this:

6. Upon previewing your first card you now have a parallax! Repeat on the rest of the cards in the gallery to complete the look.

Have more questions? Submit a request