How to Implement Typography Effects Using CSS and jQuery?

More and more online businesses are using typography as a key driver, to draw attention of web-surfers to their website. But, still there exists a majority of webmasters who overlook typography enhancement.

Wondering Why?

There are several other aspects that are more important than embedding typographical effects into a design. For instance, webmasters forgot that typography plays an important role, while designing navigational structure, header and footer design, and so on.

10 Of the Best Selling WordPress Themes Worth Considering

5+ Usability Mistakes You Must Avoid in Web Design

Significance of Colour Psychology in Web Design

This post will serve as a guide to users – who have already ventured out in the search of ways to enhance the typography of their web designs – and webmasters who have just come to know about the significance of typography. But, this post isn’t meant to explore ways as to how you can change the web fonts, colors and other wonted typography tweaks. However, our agenda is to present you with examples that will help you understand how you add some animative typographical effects, while retaining the usability of your design.

12+ Essentials Elements of Health Web Design

Magento or WordPress- What will You Choose for Your E-commerce Website?

We’ll be using CSS3 and jQuery to implement typographical effects in each of our examples.

Getting Started With HTML

We will begin working on a basic HTML structure that helps wrap the headline. The structure contains a div element with anchor as the inline element.

Professional Website Design Companies Enhancing Your Online Presence

5 Top Wireframing Tools Newbie Mobile App Developers Find Handy

<div id=”typography” class=”typography”>

<h1><a href=”#”>Typography Effects</a>

</h1>

</div>

So, let us now take a look at the examples to understand about the different styles. But before proceeding further, it is very important for us to be familiar with the CSS3 @Keyframe rule (also referred to as CSS3 keyframe animations). It helps to create animations that performs well, without the need to write heaps of scripts. Also, we will talk about how you can add animation effects to website typography using the jQuery plugin.

4 Best Tools to Make Your Magento Site Mobile Friendly

Key Features for Designing Perfect Website Layout Finally Revealed

CSS3 @Keyframe Rule

Every CSS3 animation code is based upon the @keyframes rule which is followed by an identifier. You can find the reference for the identifier in another CSS section. The @rule as well as its identifier are then followed by different rule set, defined by curly braces.

Stylish Home and Café Blind Trends for 2015

Pros and Cons of 3 Popular Eco-Friendly Floors

Here’s how the @keyframes rule looks like:

@keyframes frameEffect{

/* rule sets go here … */

}

The Keyframe Selectors

You can add other rule set within your @keyframes rule, as follows:

How to Manage Broken Links and 404 Errors in WordPress?

5 Paint Colors Designers Always Use

@keyframes frameEffect{

0% { … }

33% { … }

66% { … }

100% { … }

}

In the above code, you can see that the animation is segregated into different levels: 0%, 33%, 66% and 100%. Each of these levels represent values to determine the different animation states. Let us take a look at all those levels.

Smart Mobile Website Builder for Smart Age

  • 0% marks the beginning of the animation
  • 33% and 66% both are intermediate levels
  • 100% specifies that the animation is complete

NOTE: Make sure to define both 0% as well as 100% selectors to deliver animation with best browser support.

Basement Remodel Ideas for Your Personality Type

You would probably want to control the appearance of your animations. For this purpose, you’ll have to use the animation properties. For example, below code snippet illustrates how you can assign name to your animation:

The Best Devices to Take With You to Work While Travelling

.typography a span:hover {

animation-name: frameEffect;

}

As you can in the above code, we are using the “animation-name” property of the @keyframe rule. Keep in mind that this property value should be in-sync with the identifier present inside the @keyframe rule. You can also choose to set the value to none, by using JavaScript.

Steadily Migrating from Android to iOS; What to do?

There are a few other animation property values that you can consider based on your requirements, such as keyframe-selector (determines the percentage of the animation duration) and css-styles (to determine one or more legal CSS style properties).

Easy Ways to Make Your Yard More Private

Lettering.js – a jQuery Plugin

Other than the @keyframe rule, we will be required to use the lettering.js plugin that helps to style each and every letter of the words. CSS fails to offer control over letters, this is where this plugin comes at handy.

Example: Demonstrating What All We Have Learnt

The HTML

<!DOCTYPE html>

<html>

<head>

<meta charset=”UTF-8″>

<title>How to Implement Typography Effects Using CSS and jQuery?</title>

</head>

<body>

<div id=”typography” class=”typography”>

<a href=”#”>Typography Effects</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>

Using CSS

.typography {

padding: 18px;

margin: 20px auto;

text-align: center;

font-weight: 500;

text-transform: uppercase;

letter-spacing: 1px;

}

.typography a {

text-align: center;

padding: 18px;

text-decoration: none;

}

.typography a span {

font-size: 102px;

color: #ccccbb;

opacity: 1;

display: inline-block;

text-shadow: 0px 0px 3px #444, 1px 1px 5px 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); }


Using JavaScript

<script type=”text/javascript”>

$(function() {

$(“#typography a”).lettering();

});

</script>

That’s it, I hope this post will serve as a good starting point for you, providing useful insight on how to enhance typography of your site with CSS3 and jQuery.

Mike Swan is a WordPress developer by profession and do blogging as a hobby. He loves writing information-rich blogs on PSD to responsive WordPress theme conversion services. Currently, he is employed with Markupcloud Ltd, a leading markup conversion services company that has delivered top-grade markup conversion services since 8 years.