How to make typography effects with jQuery and CSS3?

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 an h2 element that contains an anchor. Here is the container that wraps the headline:

Sun

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 sunrise {

/* rule sets go here … */

}

The Keyframe Selectors

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

@keyframes sunrise {
0% {
bottom: 0;
left: –;
background:— ;
}

33% {
bottom: —;
left: —;
background: #—;
}

66% {
bottom: —-;
left: —-;
background: #—;
}

100% {
bottom: —;
left: —;
background: #—;
}
}

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:

#sun.animate {

animation-name: sunrise;

}

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. Animationname 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.