scrolling animation

Scrolling animation: The About You (About) page is one of the most important pages on your website. This allows people to get to know you better and decide if they are comfortable taking the next step. If you’re looking for an easy way to include storytelling on this page, you’ll love this tutorial. We’ll be using Divi’s scrolling animation to create a smooth storytelling transition on the scroll. As soon as one part of the story fades, another part appears. It gives visitors the feeling of reading an interesting story.

scrolling animation

1. Create the first full-screen section of the page

Add a new section

Background color

Start by adding a first section to your About page. Open the section settings and change the background color to black.

  • Background Color: # 000000

Sizing

Then turn the section to full screen by adding a minimum height in the sizing settings.

  • Min height: 100vh

2. Add an animated line

Add a new row

Column structure

Then add a new row to your section using the column structure:

Sizing

Open the row settings and allow the row to occupy the entire width of the section container by changing the sizing settings.

  • Width: 100%
  • Max width: 100%

Spacing

Then add left and right fill on different screen sizes.

  • Left padding: 20vw (desktop), 10vw (tablet and phone)
  • Upholstery right: 20vw (desktop) 10vw (tablet and phone)

Animation

To increase the storytelling effect, we’ll also be using a fade animation for the line.

  • Animation Style: Fade
  • Duration of animation: 3000ms
  • Animation speed curve: ease-in-out
  • Animation repeat: once

Position

Finally, we’ll make sure the line is positioned in the center of the section container by changing the position options.

3. Insert a title with scrolling effects

Add text module # 1 to column

Add H1 content

The only module we need in this row is a text module with H1 content.

Heading 1 Text parameters

Go to the module design tab and change the H1 text settings as follows:

  • Title font: Nunito
  • Title Font Weight: Semi Bold
  • Header Text Color: #ffffff
  • Header Text Size: 7vw (desktop), 9vw (tablet), 11vw (phone)

Vertical movement

We will also add a subtle vertical animation.

  • Enable vertical movement: Yes
  • Start offset: 0 (to 50%)
  • Average offset: 10 (at 100%)
  • Final offset: 10

Inbound and outbound scroll effect

With a fade-in and out effect.

  • Activate fade in and fade out: Yes
  • Starting opacity: 100%
  • Medium opacity: 100% (at 55%)
  • End Opacity: 0% (to 62%)

Scaling the scroll effect up and down

Last but not least, we’ll also be using an up and down scale scrolling effect.

  • Enable scaling up and down: Yes
  • Starting scale: 100% (to 40%)
  • Average scale: 95% (to 74%)
  • End scale: 90%

4. Clone an entire section once and include description text with scrolling effects

Edit title and content

Once you have completed the first section, you can clone it entirely. Open the text module inside the duplicate section container and use an H2 copy.

Modify the text parameters of the Text H2 module

Change the H2 text settings accordingly:

  • Title 2 Police: Nunito
  • Font title 2: semi-bold
  • Heading 2 Text color: #ffffff
  • Item 2 Text Size: 5vw (desktop), 7vw (tablet), 8vw (phone)
  • Line height 2: 1em (office), 1.2em (tablet and phone)

Add text module # 2 to column

Add content

Then add another text module to the column with a description content of your choice.

Text settings

Modify the text parameters of the text module as follows:

  • Text font: Open Sans
  • Text color: #ffffff
  • Text size: 1vw (desktop), 2.5vw (tablet), 3vw (phone)
  • Text line-height: 3.1em (desktop), 2.5em (tablet and phone)

Spacing

Also, use a top margin.

  • Top margin: 8vw

Inbound and outbound scroll effect

Then switch to scroll effects in the advanced tab and use the following fade in and fade out settings:

  • Activate fade in and fade out: Yes
  • Starting opacity: 100%
  • Medium opacity: 0% (to 31%)
  • Final opacity: 0% (to 35%)

Read more: Plugin review: Divi supreme

Scaling

the scroll effect up and down Also adds up and downscaling effect.

  • Enable scaling up and down: Yes
  • Starting scale: 100% (to 40%)
  • Average scale: 95% (to 74%)
  • End scale: 90%

You can now clone this last section as many times. However, you will need to adjust the content of each section to your needs.

Final thoughts on scrolling animation

In this article, we’ve shown you how to tell a story on your About page using Divi’s built-in scroll effects. The effect we created allows the consecutive copy to fade and disappear, making visitors feel like they are reading a story.

 

For website maintenance service contact us.

Leave a comment

echo "";