How to make typography effects with jQuery and CSS3?

typography-small

typography

Businesses looking to smarten up their website’s design are warming up to the typography enhancement. That said, there still exists a large section of webmasters who pay attention to multiple aspects like the tonality of the website, the navigational structure, the logo design, the sidebar design and so on, but, end up overlook the typography of their site.

This post is meant to address both – those already digging into different ways to enhance typography, as well as those who are yet to wake up to the benefits of this exercise. And we are not simply doling out ways to change the font styles, color and all the mundane tweaks, what we are putting forth are some solid ways (in the form of examples) to add certain typographical effects that can jazz up your website in a way that it looks stirring, and yet retains its usability.

CSS3 and jQuery will perform the groundwork as well as the final implementation of each example.

The HTML

Our underline structure is a div element that contains an anchor. Here is the container that wraps the headline:

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

Now, let us put forth the examples wherein we will throw light on different styles.
But, before we begin the coding part, it is extremely essential for us to know about CSS3 Keyframe animations.

This method creates animations by effecting a change between different individual CSS styles and as we animate, we can change the CSS styles at will. Keyframe plays an instrumental role in creating the most fluid animations that do not require extensive scripting.

Now, the @keyframes rule is an indispensable part of this concept. It is essentially a CSS rule the reference for which you can find in another CSS section. The @rule is then followed by more rules which are accompanies by curly braces.

The typical @rule will look like:

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

The Keyframe Selectors

Selectors have their own set of values and rules, and here is how we define them:

@keyframes frameEffect{
0% { ... }
33% { ... }
66% { ... }
100% { ... }
}

As you can see in the code, when the animation begins, the level is at 0% and when the animation completes, it reaches 100%. The intermediate levels include 33% and 66%. these values represent the different states of any animation, also in terms of the appearance.

There are different parts of the keyframe in most animations. With each part, you can set different values for customizations of varied kind. Many times, you might have to use the z-index while stacking up the elements.

We can also add a small snippet of code to our example below as it gives animation its name:

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

We have essentially added the animation-name property here, the value of which has to be in sync with the identifier that lies in @keyframe rule. We can also set the value to none by making the use of JS.

There are also some property values to consider. Animation-name defines the name of the animation and keyframe-selector decides the percentage of the animation duration.

Lettering.js

In our examples, we will also be using lettering.js so that we can add some style to the individual letters in the words. This control over the individual letter styling is what makes lettering.js so important and impactful. Sometimes, it uses the simple .char# pattern to doctor the text in the CSS and provides a clean way for us to change certain pieces of text on the fly.

Let’s Take an Example that Implements All We Have Learnt

The HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>How to make typography effects with jQuery and CSS3?</title>
</head>
<body>
<div id="typography" class="typography">
	<a href="#">Typography</a>
</div>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.lettering.js"></script>
</body>
</html>

The CSS

.typography {
padding: 20px;
margin: 20px auto;
text-align: center;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 1px;
}
.typography a {
text-align: center;
padding: 20px;
text-decoration: none;
}
.typography a span {
font-size: 105px;
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 ;
}
@keyframes frameEffect {
 0% { transform: scale(1.2);  }
 25% { transform: scale(1.4);  }
 50% { transform: scale(1.6);  }
 75% { transform: scale(1.3); }
 100% {  transform: scale(1); }
}
@-moz-keyframes frameEffect {
 0% { -moz-transform: scale(1.2);  }
 25% { -moz-transform: scale(1.4); }
 50% { -moz-transform: scale(1.6); }
 75% { -moz-transform: scale(1.3);  }
 100% {  -moz-transform: scale(1); }
}
@-webkit-keyframes frameEffect {
0% { -webkit-transform: scale(1.2); }
25% { -webkit-transform: scale(1.4);  }
50% { -webkit-transform: scale(1.6);  }
75% { -webkit-transform: scale(1.3);  }
100% { transform: scale(1); }
}
@-ms-keyframes frameEffect {
0% { -ms-transform: scale(1.2); }
25% { -ms-transform: scale(1.4); }
50% { -ms-transform: scale(1.6); }
75% { -ms-transform: scale(1.3); }
100% { -ms-transform: scale(1); }
}

The JavaScript

<script type="text/javascript">
$(function() {
	$("#typography a").lettering();
});
</script>

That’s all for now. The above three effects will give you a good insight into what all can be achieved with the typography of your website using just CSS3 and jQuery.

How to make typography effects with jQuery and CSS3?
2 votes, 3.00 avg. rating (66% score)
  • Posted in: CSS3, JavaScript & jQuery

Posted by

Edward holds an impressive amount of expertise in major CMS platforms including Drupal, Wordpress, Joomla and Magento. You can go through his write-ups for gathering a greater insight into the popular CMSs available today.If you need to hire wordpress developer then simply get in touch with Edward.