Text block animation: Your title is one of the most important parts of your homepage. This is usually what you see first, and therefore what determines the first impression. Like any other first impression, you want it to be good. Now, if you are looking for a creative way to present your title, you will enjoy this tutorial as we will show you how to add CSS text block animations to your title.
Let’s start the design Text block animation
Add section # 1
Gradient background
Start by adding a regular section to a new page or to the page you are working on. Open the section settings and apply the following gradient background:
- Color 1: # f0f2b
- Color 2: # c10b1a
- Gradient type: linear
- Gradient direction: 63deg
Spacing
Switch to the section design tab and apply the following custom top and bottom fill values on different screen sizes:
- Top padding: 7vw (desktop), 20vw (tablet), 25vw (phone)
- Bottom padding: 7vw (desktop), 20vw (tablet), 25vw (phone)
Frontier
Also add a border to the section.
- Border width: 2vw (top, left, right)
- Bottom border width: 0vw
- Border Color: #ffffff
Add a new row
Column structure
Continue by adding a new row to the section using the column structure:
Sizing
Open the row settings and change the sizing settings accordingly:
- Width: 100%
- Max width: 100%
Add a text module to the column
Add H1 content
Then add a text module with an H1 title of your choice.
Add Div tags to each word in the H1 title
Switch to the text tab of your title copy and add a different div to each word in your title. The CSS ID must be different for each word.
<h1> <div id = ”word-1 ″ class =” display-state ”> Ready </div> <div id =” word-2 ″ class = ”display-state”> to </div> <div id = “Word-3 ″ class =” display-state “> Build </div> <div id =” word-4 ″ class = “display-state”> Beau </div> <div id = “word-5 ″ class = “display-state”> Websites? </div> </h1>
H1 text parameters
Switch to the module design tab and change the H1 text settings accordingly:
- Title font: Work Sans
- Title font weight: medium
- Header Text Color: #ffffff
- Header Text Size: 4vw (desktop), 5vw (tablet), 6vw (phone)
- Headline Height: 1.4 em
Spacing
Then change the margin values on different screen sizes.
- Left margin: 20vw (desktop and tablet), 15vw (phone)
- Right margin: 35vw (desktop), 20vw (tablet), 15vw (phone)
Add a code module to the column
Insert CSS code
In order for the text block animation to apply to our title, we’ll need some CSS code. We will add this CSS code to a new code module.
<style> .display-state {display: inline !important;} #word-1 {-webkit-animation: slide-right 0.5s linear 0.3s both;animation: slide-right 0.5s linear 0.3s both;} #word-2 {-webkit-animation: slide-right 0.5s linear 0.6s both;animation: slide-right 0.5s linear 0.6s both;} #word-3 {-webkit-animation: slide-right 0.5s linear 0.9s both;animation: slide-right 0.5s linear 0.9s both;} #word-4 {-webkit-animation: slide-right 0.5s linear 1.2s both;animation: slide-right 0.5s linear 1.2s both;}#word-5 {-webkit-animation: slide-right 0.5s linear 1.5s both;animation: slide-right 0.5s linear 1.5s both;} @-webkit-keyframes slide-right {0% {background-color: #000;opacity: 0.5;color: transparent;} 1% {opacity: 1;}} </style>
Spacing
Switch to the module design tab and remove all the default bottom padding.
- Bottom margin: 0px
Add a button module to the column
Add a copy
The next module we need is a button module. Enter a copy of your choice.
Button settings
Switch to the module design tab and change the button settings accordingly:
- Use custom styles for button: Yes
- Button text size: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Button Text Color: #ffffff
- Button background color: # 000000
- Button Border Width: 0px
- Button font: Work Sans
Spacing
Then go to the spacing settings and apply custom margin and padding values on different screen sizes.
- Top margin: 3vw (office),
- Left margin: 20vw (desktop and tablet), 15vw (phone)
- Top padding: 1.2vw (desktop), 2vw (tablet), 4vw (phone)
- Bottom padding: 1.2vw (desktop), 2vw (tablet), 4vw (phone)
- Left padding: 1.8vw (desktop), 3vw (tablet), 6vw (phone)
- Right padding: 1.8vw (desktop), 3vw (tablet), 6vw (phone)
Animation
Customize the animation settings as well.
- Animation Style: Flip
- Animation direction: down
- Animation delay: 2000 ms
- Animation intensity: 100%
- Animation start opacity: 100%
- Animation speed curve: ease-in-out
- Animation repeat: once
Add section # 2
Continue by adding a new regular section just below the previous one.
Spacing
Open section settings and remove the default top padding.
- Top padding: 0px
Add a new row
Column structure
Continue by adding a new row using the column structure:
Sizing
Without adding any modules yet, open the row settings and let the row occupy the entire width of the section container.
- Width: 100%
- Max width: 100%
Add a text module to the column
Add content
Then add a text module with a description content of your choice.
Background color
Add a white background color.
- Background Color: #ffffff
Text settings
Switch to the module design tab and change the text settings accordingly:
- Text font: Work Sans
- Text Color: # 9b9b9b
- Text size: 1vw (desktop), 2vw (tablet), 3vw (phone)
- Text Line Height: 2.6em
Read more: How to understand relative positions on Divi
Spacing
Also add custom spacing values on different screen sizes.
- Top margin: -5vw (desktop), -20vw (tablet), -27vw (phone)
- Left margin: 20vw (desktop), 13vw (tablet), 8vw (phone)
- Right margin: 20vw (desktop), 13vw (tablet), 8vw (phone)
- Top padding: 5vw (desktop), 7vw (tablet and phone)
- Bottom padding: 5vw (desktop), 7vw (tablet and phone)
- Left padding: 3vw (desktop), 5vw (tablet), 6vw (phone)
- Right padding: 3vw (desktop), 5vw (tablet), 6vw (phone)
Shadow box
And complete the module settings by applying a subtle box shadow. That’s it!
- Box Shadow Blur Strength: 50px
- Shadow color: rgba (0,0,0,0,1)
Final thoughts on text block animation
In this article, we showed you how to add CSS text block animations to your title. It’s important to make sure your title is visible and read from the start, adding animation to your title can definitely help!
For website maintenance service contact us.