How to Fan Out Images on Scroll to Promote an Image Gallery in Divi

Knowing how to fan out images with Divi’s scroll effects can be a subtle and impressive design element to help promote an image gallery on a landing page. The idea is to engage users as they scroll down the page by fanning out images like a hand of playing cards.

In this tutorial, we are going to create a clean section layout for promoting an image gallery that includes a collection of images that fan out on scroll. You can use any images you want with this design and it would be a nice addition to any landing page.

Sneak Peek

Here is a quick look at the design we’ll build in this tutorial.

Download the Layout for FREE

To lay your hands on the designs from this tutorial, you will first need to download it using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.

To import the section layout to your Divi Library, navigate to the Divi Library.

Click the Import button.

In the portability popup, select the import tab and choose the download file from your computer.

Then click the import button.

divi notification box

Once done, the section layout will be available in the Divi Builder.

Let’s get to the tutorial, shall we?

What You Need to Get Started

expanding corner tabs

To get started, you will need to do the following:

  1. If you haven’t yet, install and activate the Divi Theme.
  2. Create a new page in WordPress and use the Divi Builder to edit the page on the front end (visual builder).
  3. Choose the option “Build From Scratch”.

After that, you will have a blank canvas to start designing in Divi.

Part 1: Creating the Layout and Mock Content

For this first part of the tutorial, we are going to build the section layout with a two-column row that has a title and a button in the left column. In the second part, we will add the fan-out images to the right column.

Section Settings

Before we add anything to the layout, update the settings for the default section as follows:

  • Padding: 10vw top, 10vw bottom
  • Horizontal Overflow: Hidden
  • Vertical Overflow: Hidden

fan-out images on scroll

Adding the Row

Next, add a new row with a two-thirds one-third column structure.

fan-out images on scroll

Row Settings

Then update the row settings with a custom background image. I’m using one from the Stationery Shop Landing Page Premade Layout. After that update the following:

  • Background Image Size: Actual Size
  • Background Image Position: Top Left
  • Max Width: 900px

fan-out images on scroll

Adding the Text Module to Create the Title

Once the row is ready, add a new text module to column 1 to create the title.

fan-out images on scroll

Text Content

Add the following H1 Heading to the body content:

<h1>Our Gallery</h1>

fan-out images on scroll

Text Settings

Then update the text settings as follows:

  • Heading Font: Bellefair
  • Heading Text Alignment (tablet and phone): right
  • Heading Text Size: 150px (desktop and tablet), 110px (phone)

fan-out images on scroll

Adding the Button

Under the text module, add a new button module.

fan-out images on scroll

Button Text

Update the button text with “View Gallery”.

fan-out images on scroll

Button Settings

Under the design tab, update the following:

  • Alignment (tablet and phone): right
  • Button Text Size: 14px
  • Button Text Color: #ffffff
  • Button Background Color: #121212
  • Button Border Width: 0px
  • Button Letter Spacing: 3px
  • Button Font: Montserrat
  • Button Font Style: TT
  • Margin: 7vw top

fan-out images on scroll

Part 2: Creating the Images with the Fan-Out Scroll Effect

In this second part of the tutorial, we will create the images with the fan-out scroll effect. We will start with the middle image. I’m using the images from the Fashion Gallery Page Premade Layout. They should be all the same size for a consistent design. The ones I’m using are 400px by 600px.

Creating the Middle Image

Add a new image module to the right column.

fan-out images on scroll

Then upload an image to the module.

fan-out images on scroll

Image Settings

Update the max width and margin for mobile displays as follows:

  • Max Width (tablet and phone): 200px
  • Margin (tablet and phone): 0px left

fan-out images on scroll

Creating the Middle Right Image

To create the second image (or middle right image), duplicate the first image module.

fan-out images on scroll

Image Settings

Then open the settings for the duplicate image module and update the following:

Position
  • Position: Absolute

fan-out images on scroll

Transform Origin
  • Transform Origin: bottom center

fan-out images on scroll

Scroll Effects

Under Horizontal Motion, update the following:

  • Enable Horizontal Motion: YES
  • Starting Offset: 0 (at 20%)
  • Mid Offset: 0.5 (at 50%)
  • Ending Offset: 0.5 (at 100%)

fan-out images on scroll

Under Rotating, update the following:

  • Enable Rotation: YES
  • Starting Rotation: 0 deg (at 20%)
  • Mid Rotation: 20 deg (at 50%)
  • Ending Rotation: 20 deg (at 100%)

fan-out images on scroll

Creating the Right Image

To create the third image that will fan out to the far right, duplicate the second image we created.

fan-out images on scroll

Update Scroll Effects

Under Horizontal Motion, update the following:

  • Mid Offset: 1
  • Ending Offset: 1

fan-out images on scroll

Under Rotating, update the following:

  • Mid Rotation: 40 deg
  • Ending Rotation: 40 deg

fan-out images on scroll

If you haven’t noticed, we are essentially increasing the horizontal offset by 0.5 increments and the rotating offset by 20-degree increments with each image. This will create equal spacing between the images. And because the scroll effect animation is based on the bottom-center transform-origin, it will give the impression that the images are fanning out like a hand of playing cards.

Label Images In Layers Box

Before we create the last two images, let’s update the labels of the current images so that we don’t get confused.

fan-out images on scroll

Creating the Middle Left Image

To create the middle left image, we can duplicate the middle right image.

fan-out images on scroll

Then drag it above the middle image to the top of the column.

fan-out images on scroll

You can update that image label as well.

Update Scroll Effects

Open the settings for the middle left image and update the following scroll effects:

Under Horizontal Motion…

  • Mid Offset: -0.5
  • Ending Offset: -0.5

NOTE: All we are doing is changing the offset value to a negative.

fan-out images on scroll

Under Rotating…

  • Mid Rotation: -20 deg
  • Ending Rotation: -20 deg

fan-out images on scroll

Creating the Left Image

Finally, let’s create the final left image by duplicating the right image and dragging it to the very top of the column.

fan-out images on scroll

You can also update the label as well.

fan-out images on scroll

Update Scroll Effects

Open the settings for the left image and update the scroll effects:

Under Horizontal Motion:

  • Mid Offset: -1
  • Ending Offset: -1

fan-out images on scroll

Under Rotating…

  • Mid Rotation: -40 deg
  • Ending Rotation: -40 deg

fan-out images on scroll

Column 1 Z Index

Right now the images in column to will overlap the content in column 1. To change this, open the settings for column 1 and update the z index as follows:

  • Z Index: 10

fan-out images on scroll

Adding New Images and Filters

Now, all we need to do is update each of the images with new/different ones.

fan-out images on scroll

For a unique effect, add the following filters to all the images (using multiselect) except the right image.

  • Saturation: 20%
  • Opacity: 85%

fan-out images on scroll

Result

Here is the result so far…

Rotating the Column

To change the design a bit, we can rotate the collection of images by rotating the parent column.

To do this, open the settings for column 2 and add the following transform option:

  • Transform Rotate Z Axis: 40 deg

fan-out images on scroll

Final Result

Here is the final result.

Desktop

Tablet

Phone

fan-out images on scroll

Final Thoughts

In this tutorial, we learned how to fan-out images using Divi’s scroll effects, but you don’t have to stop there! You can easily use this same technique to fan-out any collection of modules (I’m thinking blurbs). I limited the offset distance with each image’s scroll effects so the design isn’t really functional (ie. you can’t really see every image in its entirety). But, you can increase the offsets to make the images more visible if you want.

I look forward to hearing from you in the comments.

Cheers!

The post How to Fan Out Images on Scroll to Promote an Image Gallery in Divi appeared first on Elegant Themes Blog.

Go to source

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.