text block animation

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.

text block animation

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.

Leave a comment

echo "";