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.
Table of Contents
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.
- Position: absolute
- Location: Center
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.
