Image galleries are a favorite destination on most websites. And, in many cases, it may be best to keep those image galleries happy and static, letting the images work their magic.
But, add a sliding puzzle scrolling effect to an image gallery (as we will do in this tutorial), can give a refreshing touch 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 in a unique way.
Possible Outcome
Here is an overview of the image gallery layout with the sliding puzzle scrolling effect that we are going to create in this tutorial.
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 a 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:
<h1>Image Gallery</h1>
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 a Blurb module icon
Once the text is in place, add a new presentation text module under the text module.
Then remove all title and body from the default content and select to use the down arrow icon.
Presentation text settings
Then update the presentation text settings with a new color and a 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 above, 50vh below
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.
Creating the section and the line
Add a new section
Let's start by adding a new regular section under the title section.
Add a row
Then add a row with four columns to the section.
Line settings
Under the line settings, update the following:
- Gutter width: 1
- Width: 100%
- Maximum width: 1200 px (desktop), 600 px (tablet), 300 px (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 maximum 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. 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 are added to the 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 the 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 in column 4.
Upload a new image in the image settings.
Image 4 Scroll effects
Then update the following scrolling effects:
Under the Vertical movement tab ...
- Activate vertical movement: YES
- Start offset: 3 (at 0% of the window)
- Average offset: 0 (at 15% -28% of viewport)
- End offset: 0 (at 40% of viewport)
Under the Horizontal movement tab ...
- Activate horizontal movement: YES
- Start offset: 3 (at 0% of the window)
- Average offset: 3 (at 28% of viewport)
- End offset: 0 (at 40% of viewport)
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 moving images will scroll. And once the images are in place, you can replace the contents 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).
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 frame.
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 at the top, 10 pixels at the bottom, 10 pixels at the left, 10 pixels at the right
Extend fill to all images
Before saving, right click on the padding option and select "Extend padding". In the expand styles pop-up window, click the expand button to extend this fill to all images on the page.
Final result
Here is the result of all the work we have done so far.
Latest Thoughts
The sliding puzzle scroll effect featured in this article does more than give us a unique design for a picture 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.
Some Recommended Resources
You will probably find these resources interesting because they will also allow you to create photo galleries on your WordPress blog.
- 10 plugins to create photo galleries on WordPress
- How to create a photo gallery with the Envira plugin
- 5 WordPress plugins to create photo galleries
- How to use the image gallery module on Divi
