The image gallery is a favorite destination on most websites. And, in many cases, it may be best to keep those image galleries cheerful and static, letting the images work their magic.
But, adding a sliding puzzle scroll effect to an image gallery (like we’ll do in this tutorial), can give a refreshing twist to a timeless classic.
In this tutorial, we’ll show you how to build a simple layout that reveals an image gallery with a sliding puzzle scrolling effect on Divi.
The key is to understand how the size of the images relates to the vertical and horizontal offset values of each scroll effect to move the image exactly one point. But when completed, the resulting motion effect is crisp and precise as it gradually assembles and reveals a gallery of images uniquely.
Creating the header section
To get started, let’s build a quick header section that will tell the user to scroll the page to view the gallery and with the awesome scrolling effects.
Add row
Add a row of one column to the default section.
Add a text module
Inside the column/row add a new text module.
In the text settings, update the body content with the following:
Text module settings
On the Design tab, update the text design as follows:
- Title font: Roboto
- Title font-weight: bold
- Title Font Style: TT
- Header Text Alignment: Center
- Header text size: 50px (desktop), 40px (tablet and phone)
- Title letter spacing: 4px
Add Blurb module icon
Once the text is in place, add a new blurb module below the text module.
Then remove all titles and body from the default content and select to use the down arrow icon.
Presentation text settings
Then update the blurb settings with a new color and repeating slide animation.
- Icon Color: # ffb500
- Animation Style: Slide
- Animation direction: down
- Animation intensity: 20%
- Animation repeat: loop
Section padding
To give the section space for scrolling, update the padding as follows:
- Padding: 20vh at the top, 50vh at the bottom
Here we are using the unit of length vh which is relative to the height of the browser window so that the spacing fits consistently across all browser sizes.
Creation of image gallery with scrolling effects
Now that our header section is complete, we are ready to build the actual image gallery with the sliding puzzle scroll effects. The entire gallery will consist of three rows of 4 images/columns in each row to make a total of 12 images. However, you can easily add more lines and images to the layout once it is finished.
Creation of the section and the line
Add a new section
Let’s start by adding a new regular section under the title section.
Add row
Then add a four-column row to the section.
Line parameters
Under Row Settings, update the following:
- Gutter width: 1
- Width: 100%
- Maximum width: 1200px (desktop), 600px (tablet), 300px (phone)
How line width determines image size
The width of the row is very important for this design as it will dictate the width of each of the four columns. Once we set the gutter width to 1, there will be no more margin between the images.
And when we set the max width to 1200px, the four column layout will make each of the columns / images exactly 300px wide (1200px / 4 = 300px).
Also, since each of the images is square, we know that the height of each image will also be 300 pixels. We don’t have to keep it that way if we don’t want to.
For example, we could also choose to have a three-column layout with images of 400 x 400 pixels. Knowing the image width (300px) and height (also 300px) will be the key to creating the scroll effect later.
Adding images
Add image 1
Image 1 Scroll effects
Relationship between image size and scroll effect offsets
When using the vertical and horizontal scrolling effect, it is important to understand what the entered numeric value represents. In this example, we have a vertical move start offset of -3. This -3 is actually -300px (or 300px down) which is the width of the image.
The offset then reaches 0 (the home position) when the user scrolls. This is what creates the scrolling effect that moves the image to exactly one block/frame. A horizontal movement starts at 3 (300 pixels from the right) and stops in its default position. These two effects combine to create a unique two-part scrolling effect.
Add image 2
After the scroll effects have been added to image 1. Add a new image to column 2.
We will leave this static image without any scrolling effect.
Add image 3
Then add another image module to column 3 and update the module with a new image.
Image 3 Scroll effects
Under Image Settings, update the following scroll effects:
Under the Horizontal movement tab …
- Activate horizontal movement: YES
- Start offset: -3 (at 0% of window)
- Average offset: 0 (at 15% of viewport)
- End offset: 0 (at 100% of viewport)
Add image 4
To create the last image, copy image 1 and paste it into column 4.
Upload a new image in the image settings.
Image 4 Scroll effects
Then update the following scroll effects:
Under the Vertical movement tab …
- Activate vertical movement: YES
- Start offset: 3 (at 0% of window)
- Average offset: 0 (at 15% -28% of viewport)
- End offset: 0 (at 40% of display window)
Under the Horizontal movement tab …
- Activate horizontal movement: YES
- Start offset: 3 (at 0% of window)
- Average offset: 3 (at 28% of viewport)
- End offset: 0 (at 40% of display window)
Duplicate line
Now that the image scrolling effects are done for the first row, all we need to do is duplicate the row to create more images and their corresponding scrolling effects. For this example, let’s duplicate the row twice to create a total of three rows.
Replace and rearrange images as needed
Then we can move the images using the drag and drop function wherever we want. This is where you can get creative and see how the images move will scroll. And once the images are in place, you can replace the content of the images module with new images that meet the needs of the website.
Final touch-ups
Section visibility
Since our images will probably extend outside the section/window, let’s hide the overflow to clean it up a bit. Open section settings and update the following:
- Horizontal overflow: hidden
- Vertical overflow: hidden
Section padding
We want the vertical scrolling effect of the top image (which extends above the section) to be visible despite the hidden overflow. So let’s add top and bottom padding equal to the image height (300 pixels).
Read more: How to create section divider scrolling effects in Divi
Result so far
Right now we can stop here if you want to keep the gallery design without any spacing between the images. Here’s what the result looks like so far. Notice how the images move vertically and horizontally exactly one block/frame.
Adding space between images
Because we’ve set the gutter width to 1, we no longer have a margin between our columns or images. To recreate similar spacing, we can add fill to each image.
This will allow us to create the spacing we need without compromising the functionality of the scroll effects. This is possible because adding padding to the image will not increase the width or height of the image container. You can also have a similar effect by using borders as well.
Image 1 Padding
Open the settings for image 1 and update the following:
- Padding: 10 pixels top, 10 pixels bottom, 10 pixels left, 10 pixels right
Extend fill to all images
Before saving, right-click on the padding option and select “Extend padding”. In the Extend Styles pop-up window, click the Extend button to extend this fill to all images on the page.
Final thoughts
The sliding puzzle scrolling effect featured in this article does more than giving us a unique design for an image gallery. It also points out that horizontal and vertical motion offsets can be used for more precise scrolling effects.
Feel free to explore different variations of this layout by changing the offsets and mixing the locations of the images.
You can also change the number of columns as long as you understand how the column/image size will change and then how to update the scroll effect offsets with the corresponding value.
For website maintenance service contact us.