How to perform a scroll effect in an iMac with Divi?

A page scroll effect in an iMac with Divi? I confess that I don't really know what the term is but a reader of Astuces Divi e-mailed yesterday to ask me how I could realize this page effect that scrolls in an iMac to the scroll of my home page.

It is true that this scroll effect is nice and that I had to perform several tests before achieving it. I'm happy to share this today with you.

How to analyze a web design you like?

To be honest, this page scroll effect in an iMacI didn't make it up because I've already seen it on a site made with Divi. I thought it was great and I thought it was just a matter of analyze design to try to do something similar, without copying of course!

If you look carefully, there's nothing sorcerer: no JS, just a little CSS, three times nothing! It's all in the pictures!

This is also what I often say to my students or clients, the WebDesign depends a lot on the images. When I talk about images, I'm not talking about photos but rather about creations created from any piece with specific software. Besides, everything that's on Astuces Divi was created: no photos, just vector elements...

For this tutorial I'll introduce you, you could imagine thousands of variations like:

• a window opened on a landscape that would scroll to the scroll of the page
• a submarine porthole that would allow marine wildlife to be seen in the scroll of the page
• a smartphone,
• a plane window, etc.

Everything can be imagined when one considers a scroll and when one possesses (or creates) the appropriate resources.

What you need to realize this page that "crolles" in an iMac

You only need two things: a mockup and background image. However, depending on the result you want, sizes will have to change. Choosing the right image sizes is also the most complex thing in this tutorial.

Nor should we forget that this tutorial is intended for users of the Theme Divi that you can provide here.

1. Choose a mockup

In my case, it's an iMac that I took care of cutting its interior and I exported in format .png because it maintains transparency. For the record, I did these actions with Affinity Designer But you could do the same with Photoshop.

After several tests, the most suitable image was of 847 x 704 pixels. I make it clear that this size fits the format of my Divi line, which is divided into 3 columns. I suppose if you want to achieve the same effect on a 1/1 line, you will certainly have to change the size.

2. Create a background image

In my case, I made a creation with the Divi Tips logo and the "ices" that I have multiplied and made transparent. Always with Affinity Designer.

For this image too I had to perform several tests until find the ideal size of 1500 x 2500 px

This image must be "graphic" in order for the scroll effect to be successful. That is, if the background image is in a solid color, it won't work and it makes sense...

Perform the scroll effect in 4 simple steps

Once you've gathered appropriate images, you will be able to perform the few steps necessary to achieve this superb scroll effect in an iMac.

I advise you to arm yourself with patience if the sizes of the images are not suitable for the rendering you want to obtain and modify until you find the ideal size.

Step 1: Add a section and a Divi line

In this first step, you will need to:

1. enable the Divi Builder
2. add a standard section (blue colour)
3. add a line (green colour) of type 1/4 + 1/2 + 1/4

You have nothing to change, you can leave the section and line with the default settings.

Step 2: Add and Set the Image Module

In column 1/2 of the line, i.e. in the middle column, you will add IMAGE MODULE that you have to set like this:

1. Image URL: choose the image of your mockup. This image will therefore be the first image.
2. Open in a viewer: NO
3. Background: This is where you will insert the background image you previously created (1500 x 2500 px)
4. Use the parallax effect: YES
5. Parallax method: CSS
6. Still in the IMAGE MODULE, go to ADVANCED LANGUAGE, add a CSS class to the module: for my example, I gave the class "imac-bg« 
   

This will allow us to add a small piece of CSS that is essential for rendering the scroll.

Click the green button "Save and Leave".

Step 3: Add custom CSS

Once the CSS class is added to the ADVANCED tab of the IMAGE MODULE, you will be able to go to the APPARENCE > PERSONNALIST > ADDITIONAL CSS tab to add a simple bit of code. This step is very important if you want Scroll effect works properly.

This piece of code is:

/* background imac homepage*/ .imac-bg .et_parallax_bg { background-size: contents !important; } .et_pb_section_parallax .et_pb_parallax_css { -webkit-transform: none; }

Remember to save your changes.

Step 4: Check rendering

Finally, you must go to FRONT to check your page. Does she fit you? Perhaps you will have to adjust some details due to the size...

Video summary...

I hope I answered your dear Doll question. It was a pleasure and especially a good topic that could help many users of Divi. Finally, I let you discover the tutorial in video version...

Ah yes, I forgot one important thing: for the scroll effect to be successful, your page must be long enough, i.e. with enough content. In the video below you will see that I have added two lines of text in order to enjoy the effect of the scroll.

PS: Sorry about the slowness of the video...