scrolling effect

Creating scrolling effects using the section divider is a fun and easy technique that can add life to your website using the Divi WordPress theme. A section divider continues to be a versatile design element, useful for adding a touch of creativity to your page content transitions.

But with the scrolling effects of Divi, the section dividers become even more interesting! The trick is to isolate a section dedicated to the style of a divider of choice. Then you can add all kinds of scroll-generated movements to the section to create beautiful scrolling effects as the background for the page content.

scrolling effect

How to create animated scrolling section dividers with Divi

Creation of the two content sections

Add row

To get started, create a single column row in the default section.

Section margin (for tests)

For testing purposes, add a top margin to the section so that we can have room for scrolling. Open the section settings and add the following:

  • Top margin: 80vh

Add a text module

In the row of a column, add a new text module.

Content of the text module

Inside the body content, add the following H2 title:

<h2>Section Avec Séparateurs</h2>

Text module design

Under Design Settings, update the following:

  • Text font: Roboto
  • Text alignment: center
  • Item 2 Text color: # bae0d8
  • Header 2 Text size: 80px (desktop), 50px (tablet), 30px (Phone)

Add a second content section

Under the previous section, add a new regular section.

Add row

In the new section, add a row to a column.

Add a text module

Then add a new text module to the line.

Text module design

We can keep the default padding content inside the body for now. Let’s move on to the design tab and update the following:

  • Text font: Roboto
  • Text text color: #dddddd
  • Text size: 16px
  • Text line-height: 1.5 em
  • Text alignment: left
  • Maximum width: 400 px
  • Module alignment: center

Section Parameters

Make sure to remove the section’s default background color, but give it a completely transparent background. Then we can remove the top padding and add a bottom margin for scroll test purposes.

To do this, open the section settings and update the following:

  • Background color: rgba (0,0,0,0)
  • Bottom margin: 80vh
  • Padding: 0px

Creating the animated section separator

Once two content sections are completed, we’re ready to add the section for our animated section dividers.

Add a new section

Go ahead and create a new regular section in the middle of the two content sections.

Section context

And again, remove the section’s default background color, but updating the following:

  • Background color: rgba (0,0,0,0)

Section divider design

Don’t worry, we’ll create our background color with the section dividers. To do this, click on the Design tab and add an upper and lower divider to the section as follows:

Superior divider design

  • Top Divider Style: see screenshot
  • Top Divider Color: # 524fbf
  • Top Divider Height: 20vw
  • A horizontal repeat of top divider: 0.6x
  • Flip top divider: horizontal

Bottom divider design

  • Bottom divider style: see screenshot
  • Bottom divider color: # 524fbf
  • Bottom divider height: 20vw
  • A horizontal repeat of bottom divider: 0.5x
  • Lower divider toggle: horizontal and vertical

Section height and padding

Since this section is purely for divider design, we can get rid of the height and padding so that only the divider style is displayed and no unnecessary space comes between the two content sections. Update the following:

  • Height: 0px
  • Padding: 0px high, 0px low

Read more: 8 Divi child themes for personal coaches

Section separator scroll effects

Then give the section the following scrolling effects:

Under the Horizontal movement tab …

  • Activate horizontal movement: YES

We can keep the default settings for it on the desktop view .

Then update the horizontal motion settings on the tablet :

  • Start offset: 3 (at 0% of window)
  • Average offset: 0 (at 50% of viewport)
  • End offset: -3 (at 100% of viewport)

Under the Scaling Up and Down Effect tab, update the following on the desktop …

  • Starting scale: 200% (at 0% of the window)
  • Average scale: 150% (at 45% -65% of viewport)
  • End scale: 150% (at 100% of viewport)

Then update the Scaling Up and Down effect on the tablet as follows:

  • Starting scale: 400% (at 0% of the window)
  • Average scale: 300% (at 45% -65% of viewport)
  • End scale: 400% (at 100% of viewport)

The main reason we need to adjust the motion effects on the tablet (and phone) is due to the horizontal motion values ​​using pixel length units (i.e. 3 = 300 pixels), which are absolute and do not adjust to the width of the browser.

Final thoughts

Animating section dividers on the scroll is a fun and effective way to bring a web page to life. Hope this gives you some inspiration to spark even more creative designs yourself.

 

For website maintenance service contact us.

Leave a comment

echo "";