How to Implement JQuery & CSS3 for Typography Effects

The ever fluctuating web design trends have made it really hard to pace up with the ongoing trends. But, it is essential to have an edge over it to ensure the surefire success of your product in the market.

Typography is undoubtedly a crucial aspect of any website or application. Since, it is said that 90 percent of web design is typography, one can’t ignore its appearance while creating an appealing web presence. There are several ways that can help you beautify your typography. You may choose to adorn the typography by implementing a suitable typeface; for instance, casual websites look great with creative and stylish fonts, while professional websites appear beautiful with sleek and elegant fonts.

There is one more amazing way to embellish the look and feel of a website. And this can be achieved by creating typography effects with the implementation of CSS3 and jQuery technologies.

In this post, I will reveal an ideal way to create interesting and impressive typography effects with jQuery and CSS3. Let’s begin.How to Implement JQuery & CSS3 for Typography Effects

Prerequisite: having a glance into CSS3 @Keyframe rule

CSS3 @Keyframe rule, which also known as CSS3 keyframe animation helps one to develop high end animation without getting deep into elongated scripts. It is advisable to use this concise way to define the set of animation rules instead of writing lengthy scripts that can make the process cumbersome.

Syntax of @Keyframe rule:

@keyframes effectRule{
/* define set of rule */
}

Note: Each CSS3 animation code relies on the @keyframe rule. And, there is a specific identifier that follows each CSS3 animation code. To seek the reference for this identifier, you will need to access a different CSS selection.

Creating Typography Effect

First things first, Add an anchor within a div element and include it in the HTML structure. Let’s observe the code for wrapping the headline via a container.

<div id=”typography” class=”typography”>
<a href=”#”>Typography</a>
</div>
  • Implementing Keyframe Selectors – Selectors that are used for creating effects in typography embrace their own protocols and values. It can be defined in the following way.
@keyframes effectRule{
0% { … }
45% { … }
75% { … }
100% { … }
}

It is clear from the aforementioned piece of code that the animation begins at 0% and terminates when level reaches a 100% value. The code also includes two intermediate values, namely – 45% and 72%. These intermediate values represent various states of animation that are kept under observation. You can tweak it in a desired fashion, as you can set different values for each component of the keyframe. This certainly facilitates customization.

  • To insert a name for the animation – The next step is to add a name for the animation. It can be accomplished by using the below-mentioned lines of code.
.typoeffect a span:hover {
animation-name: effectRule;
}
[wp_admin_camp_5]In this piece of code, an animation-name property is used, whose value is required to be kept in synchronization with the identifier; remember, identifier exists in @keyframe rule (explained earlier).

The animation-name property will help determine the name of the animation and the keyframe-selector property will identify the animation duration mentioned in terms of percentage.

  • Using Lettering.js to to style each letter individually – js is a fabulous jQuery plugin that enables one to define a particular style to each letter included in the headline. This incredible plugin implements .char# pattern to scour the text included in the CSS. This offer a simple and effective way to introduce a specific pattern by tweaking the text. The plugin is easy to deploy and lightweight, thus doesn’t add to the loading time. Most importantly, you can reap its blissful benefits without investing a penny; it is absolutely free.

Code Snippet of the HTML used for creating typography effects:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A Guide To Implement jQquery & CSS3 To Create Stunning Typography Effects</title>
</head>
<body>
<div id="typoeffect" class="typoeffect">
<a href="#">Typoeffect</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>

Code Snippet of the CSS cod used for creating the typography effects:

body{
background: #794c06 ;
}
.typoeffect {
padding: 15px 0;
text-align: center;
font-weight: bold;
text-transform: uppercase;
letter-spacing: 2px;
}
.typoeffect a span {
font-size: 100px;
color: #FFF;
display: inline-block;
text-shadow: 0px 0px 2px #000, 1px 1px 4px rgba(0,0,0,0.7);
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
transition: all 0.5s linear;
}
.typoeffect a span:hover{
color: #000;
text-shadow: 0px 0px 2px #FFF, 1px 1px 4px rgba(0,0,0,0.7);
-webkit-animation: effectRule 0.5s linear forwards;
-moz-animation: effectRule 0.5s linear forwards;
animation: effectRule 0.5s linear forwards;
}
@keyframes effectRule {
100% {
transform: rotate(360deg);
}
}
@-moz-keyframes effectRule {
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes effectRule {
100% {
transform: rotate(360deg);
}
}

Code Snippet of the JavaScript for creating the typography effects:

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

Output of the typography effect:

By implementing the aforementioned code appropriately, you will get the following typography effect.

Reflection

By exploring the possibilities that CSS3 transitions and animations can augment, you can create beautiful typography effects to enhance the visual appearance of your web design. Typography being a preeminent design element is capable of creating an impressive and riveting impact on your viewers, which is a key to the successful design. I have unleashed a basic guide for designing requisite typography effects by including a simple example. I hope this help you easily get started and enhance your web typography in a miraculous way.

Author Biography:

Samuel Dawson is master professional in the key area of web development and designing. He is a associate front end developer at senior level in Designs2html a psd to html company with enhanced knowledge to show. He has shown here how the typography effect works in web design.

How to be Successful with Startup
HIMSS Implements Latest Technology in EMR/EHR

Get more stuff like this
in your inbox

Subscribe to our mailing list and get interesting stuff and updates to your email inbox.