- Create Beautiful Typography Effects Through jQuery and Pure CSS3
Web fonts play a significant role in creating a foundation for beautiful and usable websites. Typography is an essential component of a website, and it’s justifiably so because much of the content available on the site is typography. Having a considerable knowledge of it allows designers to enhance the readability and the legitimacy of a site.
Lately, there has been a significant amount of websites focusing on the use of CSS3 and jQuery to create aesthetically pleasing typography effects. CSS3 and jQuery are two leading technologies that are dictating the trend. Both are great to make a website look and feel good. CSS3 and jQuery effects can be great in making your content eye-catching and rich. They are ideal solutions available to make your website and its content look stand out.
In this tutorial, I’ll show you how to play around CSS3 and jQuery to produce some really awesome and fantastic text effects. So, without rambling on too much further, lets begin:
The HTML
As you can see, I have created a basic structure where div is the main element under which our anchor resides. Here we have the container that wraps the line this way.
<div id=”typography” class=”typography”>
<a href=”#”>Typography</a>
</div>
We haven’t done with any kind of styling here. Just a basic markup it is. We can say, this is just the way browser presents the content without any style.
Now, before I proceed to discuss the coding part, let me tell you what exactly the CSS3 Keyframe Animations is.
It’s a method webmasters use to generate smooth, impeccable animation effects that work gracefully and they aren’t script-driven like other traditional techniques. It’s just great because it allows designers to solve real-world designing problems in the manner most effective. CSS3 animations make it possible to animate transitions from one style to another.
Now, @Keyframe rule is an important part of this concept because it defines the animation code. During the animation, designers are allowed to change one CSS animation sequence to another. This is how a typical @rule looks like:
@keyframes frameEffect{
/* rule sets go here … */
}
Understanding Keyframe Selectors
Keyframe selectors have their own rules and values. Following is the way of defining them:
@keyframes frameEffect{
0% { … }
30% { … }
55% { … }
100% { … }
}
From the above code, you can see that at the beginning of animation the level is at 0%, but as soon as it finishes the level is reached up to 100%. Between we have levels- 30% and 55%. These intermediate values indicate the different states of animation.
Each part of the Keyframe is provided with its own unique set of values that are quite helpful in performing modifications. For instance, you might want to use z-index for stacking up the elements. You can also add the following piece of code to define the name of the animation.
.typography a span:hover {
animation-name: frameEffect;
}
You can see that we have defined the name of the animation. This is the value that needs to be synced with the identifier which consists in the @keyframe rule. Here, the value can also be changed to “none” using JS.
In addition, there are also two main properties that need to be consider. They are- Animation-name (defines the name of the animation) and Keyframe selector (defines the percentage of animation).
Lettering.js
As a jQuery plugin, Lettering.js provides designers an efficient way to use CSS and add style specific words or letters. It is simple, lightweight, and easy to use jQuery plugin that gives webmasters complete control on web typography.
Since, CSS lacks this level of control, this is where the role of Lettering.js comes in.
Following is the example showcasing everything that we have learned so far:
The HTML
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″>
<title>Producing typography effects using 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: 30px;
margin: 30px auto;
text-align: center;
font-weight: 800;
text-transform: uppercase;
letter-spacing: 1px;
}
.typography a {
text-align: center;
padding: 30px;
text-decoration: none;
}
.typography a span {
font-size: 104px;
color: #fefefe;
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>
To Conclude
All said and done! The above mentioned effects will help you achieve a beautiful looking typography effects on a website. Try it for yourself and see the magic.
After this, it’s time for a bit fun with CSS! The following examples are created to help you explain the different styling options available for CSS.
About the Author:
If you need to convert psd to app template then simply get in touch with Amanda via Twitter and Google+. she has also written interesting and informative articles on Custom Software Development, Web and Mobile Application Development etc. As a Web Developer she is currently serving Designs2html Ltd. – Transform your designs into responsive and high quality.
