Parallax effect using record details images

Showcase Tips and Tricks
1

I’ve been asked to share how to set up a parallax effect using images from a record on a details page so here it is.

Here’s how the end result looks.

https://content.screencast.com/users/Chem-/folders/Tadabase/media/5d9f9278-2580-43a4-9454-6049de65dd1f/12.15.2020-12.26.gif(image larger than 4096KB)

For this example, I have a table that has two images and called them “Image 1” and “Image 2”.

image
image695×353 22.9 KB

To do this, you’ll need to add the following code to the CSS section of the details page.

.parallax {
  min-height: 500px; 
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
}

Then, add the following code to the source code of an HTML component.
Note: Change the “Image 1” and “Image 2” text to the Names of your image fields

<div class="parallax" style="background-image: url('{!!Image 1.src!!}');">&nbsp;</div>
<div style="height: 500px; background-color: red; font-size: 36px;">Text</div>
<div class="parallax" style="background-image: url('{!!Image 2.src!!}');">&nbsp;</div>
1 Like
2

Nice!

That’s a 36MB GIF :exploding_head:

3

Lol my phone hated that Gif but it looks great! Thanks @Chem!

Before I read everything, I thought the parallax images were being displayed dynamically on a parent page. :bulb::+1:

4

Just in case someone wants to view it on a 4k screen :rofl:

1 Like