Version 4.3 of Divi has brought an interesting feature in terms of webdesign: scroll effects.
Indeed, it is now possible to assign to the elements of our choice, a certain number of transformations that apply when scrolling the page.
This new option allows us to make our Divi sites more dynamic by minimizing the addition of external resources.
Let's see how to take this promising feature in hand.
What are the scroll effects?
These transformations fall into the family of parallax effects.
You are already familiar with the parallax option present for background images in the Divi Builder.
And if you're an avid reader of Divi Community, then you've probably read my article Add advanced parallax effects to Divi. 😉
In this tutorial, I explained how, using a jQuery plugin, you can add horizontal and vertical translation effects to any element of the Divi Builder.
Well you will see that these new scroll effects implemented in Divi Builder will allow you to get the same result... and much more!
All this without having to get your hands in the code by adding additional scripts.
To give you an overview of the possibilities offered by the effects on Divi's scroll, I have concocted a demo page with an example for each effect.
The 6 available transformation effects
6 transformation effects are therefore applicable to any module, line or section.
Either individually or in combination with each other to obtain complex effects.
To enable any of these effects, simply click on the Enable [effect name] button and the available parameter options will be displayed.
1. The vertical movement
Set the displacement of your element on the Y-axis so that it moves vertically.
Adjust the z-index value of the element that is to override the other(s).
2. Horizontal movement
Set the movement of your element on the X axis to move horizontally.
Depending on your settings, it is possible that when your element "goes off the page", it may cause a resizing of the width of your site. This results in the addition of a horizontal scrollbar.
To avoid this, use the following CSS rule:
3. The fade out
Set the opacity of your element to change it from visible to invisible (or vice versa).
4. The scale
Set the size of your element to change its dimensions.
I advise you to use this effect in addition to the Divi Builder positioning options, located for each module in Advanced -> Item. You will be able to place your different elements as you wish and thus obtain an interesting rendering.
Set the orientation of your element to change its degree of rotation.
6. The blur
Set the sharpness of your element.
This option generally works well with the sizing option, allowing you to simulate a depth-of-field effect, as in photography.
Scroll effect options
Once an effect is activated, the above parameters are displayed. Let's see in detail what they correspond to.
- Viewport Bottom: sets the starting point of the animation relative to the bottom of the screen
By default, its value is 0, which corresponds to the bottom end of the screen.
If you increase this value, the animation will start later.
- The central point: this point defines the middle of the animation.
By default, its value is 50%. This means that it is the absolute midpoint between the Viewport Bottom element and the Viewport Top element.
If you reduce this value, you move the middle of the animation down.
If you increase this value, you move the middle of the animation upwards.
- Viewport Top: defines the end point of the animation in relation to the top of the screen.
By default, its value is 100%, which corresponds to the upper end of the screen.
If you reduce this value, the animation will end earlier.
- Starting Offset: this is the starting value of the element at the beginning of the animation.
- Mid Offset: this is the value assigned to the element in the middle of the animation.
- Ending Offset: this is the final value of the element, at the end of the animation.
Special feature of the central point
The center point can be split by clicking on its left or right end.
This is to freeze the effect on its set value for the desired period of time.
Understand the meaning of animation
In order to imitate the effect options to Divi's scroll, I have prepared a diagram symbolizing a web browser window.
I have represented the various key points of the animation that are customizable.
The most important thing to remember is that the animation starts at the bottom of the screen, where the element appears when the user scrolls down the page.
The final word
This new scroll effects feature really opens up the field of web design possibilities.
It allows you to make our Divi sites even more dynamic, very easily, and what's more with live rendering thanks to the Divi Visual Builder.
Keep in mind that this type of effects works well when mixed and especially when using diverted elements.
As usual, I advise you not to overload your sites with tons of effects, otherwise your pages will be heavy and the user experience will be ruined.
Finally, it is also preferable to disable these scroll effects on mobile devices. This will save you from wasting time adjusting the settings for different screen widths and will make it easier for your mobile visitors to navigate.
To conclude, here are a few examples of sites to help you find inspiration for scroll effects.