A Comprehensive Guide on Creating Typography Effects Using jQuery and CSS3

Overlooking typography is perhaps something you might have been running away from, all through your career of building remarkable websites. Right from paying attention to multiple website assets such as logo design, navigational structure and tone to working out the addition of special typographical effects; you might have put in your best efforts for building a website with a rich look and feel.

What is covered in this tutorial?

This tutorial is dedicated to all those who are inclined on gathering details about different ways of enhancing the typography as well as the ones who are getting awakened about the pros of including typography effects in their web design. Here, I will be explaining you the use of CSS3 and jQuery for creating specific typographic effects for a big headline.

The HTML

We will be using an underline structure which is basically a div element containing an anchor. Here is the container which wraps the headline:

<div id="typography" class="typography">
  <a href="#">Typography</a>
</div>

After this, we will be exploring the different styling options available for the headline.

Before moving forward, here is a glimpse of CSS3 Keyframe animations

The CSS3 Keyframe animations method is employed for creating animations by introducing a change between individual CSS styles. That means, as you animate using CSS keyframes, you can opt for manipulating the CSS styles as well. If you intend to generate fluid animations (the ones which don’t require extensive scripting) then CSS keyframe is for you.

The @keyframe rule

As an integral part of the CSS keyframes concept, @keyframe is a CSS rule the reference for which can be found in other CSS sections. This rule is followed by multiple CSS rules which are defined using curly braces.

A typical @rule is similar to this:

@keyframes frameEffect{
    /* rule sets go here … */
}

Knowing about the Keyframe Selectors

Keyframe Selectors come with their unique set of rules and values. Here’s a look at how you can define them:

@keyframes frameEffect{
   0% { ... }
 
   30% { ... }
 
   55% { ... }
 
   100% { ... }
}

As suggested by the above code, when the animation starts, the level is displayed as 0% and when it finishes off, the level scales to 100%. The intermediate levels are prepresented as 30% and 55%. Note that the different levels denote the different states of the animation in terms of appearance as well.

With each part of the keyframe, you can see different values that can be utilized for performing simple tweaks. For example, you may use the z-index for stacking the elements. Plus, you may even add the below code snippet for defining a name for the animation:

.typography a span:hover {
     animation-name: frameEffect;
}

If you look at the above code, you will find that that I have added an animation-name property which has a value that is in synchronization with the identifier available with the @keyframe rule. Here, you may even set the value of animation-name property to ‘none’ with the help of Javascript. Additionally, there are two property values viz: animationname which defines the name of animation and keyframe-selector which determines the percentage of animation duration.

Lettering.js

For my example, I will be using lettering.js which serves for styling the single letters of the words that need to go into the headline. There are situations when you might find it convenient to use .char# pattern for monitoring the text available in the CSS. This would allow you to change specific text pieces instantly.

Currently CSS does not offer complete down-to-the-letter control. So this is where the Lettering.js jQuery plugin give you that control.

Here is the complete code for implementing everything that has been covered in the above paragraghs:

The HTML

<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Special Typography Effects Using jQuery and CSS3</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="typography" class="typography">
  <a href="#">Typography</a>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lettering.js"></script>
</body>
</html>

The CSS

Below, is the CSS code that I used for this demo.

.typography {
padding: 10px;
margin: 10px auto;
text-align: center;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 1px;
}
.typography a {
text-align: center;
padding: 10px;
text-decoration: none;
}
.typography a span {
font-size: 102px;
color: #7f7f7f;
 opacity: 1;
 display: inline-block;
 text-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.typography a span:hover{
color: #000;
-webkit-animation: frameEffect 0.6s linear infinite forwards ;
-moz-animation: frameEffect 0.6s linear infinite forwards ;
-ms-animation: frameEffect 0.6s linear infinite forwards ;
animation: frameEffect 0.6s linear infinite forwards ;
}
/* Standard syntax */
@keyframes frameEffect {
 0% { transform: scale(1.2);  }
 25% { transform: scale(1.4);  }
 55% { transform: scale(1.6);  }
 85% { transform: scale(1.3); }
 100% {  transform: scale(1); }
}
/* Mozilla Firefox */
@-moz-keyframes frameEffect {
  0% { -moz-transform: scale(1.2);  }
 25% { -moz-transform: scale(1.4); }
 505 { -moz-transform: scale(1.6); }
 85% { -moz-transform: scale(1.3);  }
 100% {  -moz-transform: scale(1); }
}
/* Chrome, Safari, Opera */
@-webkit-keyframes frameEffect {
  0% { -webkit-transform: scale(1.2); }
 25% { -webkit-transform: scale(1.4);  }
 55% { -webkit-transform: scale(1.6);  }
 85% { -webkit-transform: scale(1.3);  }
 100% { transform: scale(1); }
}
/* IE9 and older */
@-ms-keyframes frameEffect {
   0% { -ms-transform: scale(1.2); }
 25% { -ms-transform: scale(1.4); }
 55% { -ms-transform: scale(1.6); }
 85% { -ms-transform: scale(1.3); }
 100% { -ms-transform: scale(1); }
}

JavaScript Block With the .lettering() method

Add the code below at the end of the HTML document just before the closed body tag (</body>)

<!-- script block with the magical .lettering() method. -->
<script type="text/javascript">
$(document).ready(function()  {
  $("#typography a").lettering(); 
  //You could also call it by class name:  $(".typography a").lettering();
});
</script>

What’s your opinion about this tutorial?

You may also like...