Create an animated steam text effect

[Rss Bot 1]

Adding effects to text can add a whole new level of engagement and interest. Effects such as kinetic typography will grab a viewer's attention, aid user experience and help tell the story that is being told. The text effect on the Do Wonders site brings the web font into focus line by line. Read on to find out how to recreate something similar. 

 Get the project files to help follow this tutorial.

 01. Initiate HTML document 

The first step is to define the document structure that will store the  HTML content. This consists of the document container, which stores the head and body sections. While the head section stores inks to the external CSS and JavaScript resources, the body stores the visible content created in step 02. 

 02. HTML content 

This step defines the visible HTML content. Take note of how the texts  designated to have the blur effect are all contained within a container that has the ‘blur’ class. This class is used by JavaScript to reference the text items in step 03, and by CSS in later steps. 

 03. Automated animation delay 

Create a new file called ‘code.js’. Each item inside the blur container is to be presented three seconds after the previous item. JavaScript is used to automate the application of unique CSS attributes. The first step of this is to select all of the first-level items inside the blur container – after the page has loaded. 

 04. Number of seconds 

 A ‘for’ loop is used to reference each item returned to the ‘nodes’ variable in the previous step. The index counter of the ‘for’ loop is used to calculate the number of seconds to assign to the animation delay attribute. As a result, each item has a delay that is three seconds longer than the previous item. 

 05. CSS blur 

Create a new file called ‘styles.css’. The first step for defining the CSS presentation rules initiates each of the text items as invisible. An animation called ‘animationBlur’ is also applied that will animate the item into view over a five-second duration. The animation mode must be set to ‘forwards’ so that it stops on its last frame. 

 06. Initiate animation 

The animation applied to the ‘blur’ elements in Step 5 are defined in this step. The reference to ‘animationBlur’ is made as a keyframes  animation. The first frame ‘from’ sets the elements as visible with a  text shadow – but with a transparent text colour. This is what produces the blurred text effect. 

 07. Final animation frame 

The ‘to’ frame within the animation defines the final frame that the text will be animated to. This frame sets the text shadow to disappear, along with a text colour that’s fully visible. Combined with step 06, the animation frames between ‘from’ and ‘to’ will be automatically calculated by the browser. 

 This article originally appeared in Web Designer magazine. Subscribe here.

Remember - always think of the user

 

When introducing fancy effects to a page it needs to have a purpose, you need to be thinking of the user experience. And this is what freelance front-end UI developer Sara Soueidan will be revealing in her 'Using CSS (and SVG) for the Good of UX' talk at Generate London 2018. 

In her talk she is going to show a wide range of possibilities that CSS offers to improve the overall user experience of your UI, using CSS (with sprinkles of SVG and JS here and there).

Make sure you don't miss out. Get your ticket now.

Related articles:    

• Create a wobbly text effect with JavaScript
• Create a glowing neon text effect
• How to make text render perfectly

View the full article