{"id":14062,"date":"2015-01-23T08:11:08","date_gmt":"2015-01-23T08:11:08","guid":{"rendered":"http:\/\/premiumcoding.com\/?p=14062"},"modified":"2015-01-23T08:11:08","modified_gmt":"2015-01-23T08:11:08","slug":"make-typography-effects-jquery-css3","status":"publish","type":"post","link":"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/","title":{"rendered":"How to make typography effects with jQuery and CSS3?"},"content":{"rendered":"

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.<\/p>\n

This post is meant to address both \u2013 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\u00a0 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.<\/p>\n

CSS3 and jQuery will perform the groundwork as well as the final implementation of each example.<\/p>\n

The HTML<\/strong><\/p>\n

Our underline structure is an h2 element that contains an anchor. Here is the container that wraps the headline:<\/p>\n

<\/p>\n
\n

Sun<\/a><\/h2>\n<\/div>\n

<\/div>\n

Now, let us put forth the examples wherein we will throw light on different styles.<\/p>\n

But, before we begin the coding part, it is extremely essential for us to know about CSS3 Keyframe animations<\/strong>.<\/p>\n

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.<\/p>\n

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.<\/p>\n

The typical @rule will look like:<\/p>\n

@keyframes sunrise {<\/strong><\/p>\n

\/* rule sets go here \u2026 *\/<\/strong><\/p>\n

}<\/strong><\/p>\n

 <\/p>\n

The Keyframe Selectors<\/strong><\/p>\n

Selectors have their own set of values and rules, and here is how we define them:<\/p>\n

<\/p>\n

@keyframes sunrise {
\n 0% {
\n bottom: 0;
\n left: –;
\n background:— ;
\n }<\/p>\n

33% {
\n bottom: —;
\n left: —;
\n background: #—;
\n }<\/p>\n

66% {
\n bottom: —-;
\n left: —-;
\n background: #—;
\n }<\/p>\n

100% {
\n bottom: —;
\n left: —;
\n background: #—;
\n }
\n}<\/p>\n

<\/div>\n

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.<\/p>\n

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.<\/p>\n

We can also add a small snippet of code to our example below as it gives animation its name:<\/p>\n

<\/p>\n

#sun.animate {<\/p>\n

animation-name: sunrise;<\/p>\n

}<\/p>\n

<\/div>\n

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.<\/p>\n

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.<\/p>\n

Lettering.js<\/strong><\/p>\n

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\u00a0 for us to change certain pieces of text on the fly.<\/p>\n

Let’s Take an Example that Implements All We Have Learnt<\/strong><\/p>\n

The HTML<\/em><\/strong><\/p>\n

<\/p>\n


\n
\n
\n
\n How to make typography effects with jQuery and CSS3?<\/title><br \/>\n<\/head><br \/>\n<body><\/p>\n<div id=\"typography\" class=\"typography\">\n\t<a href=\"#\">Typography<\/a>\n<\/div>\n<p><script type=\"text\/javascript\" src=\"http:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.2\/jquery.min.js\"><\/script><br \/>\n<script type=\"text\/javascript\" src=\"js\/jquery.lettering.js\"><\/script><br \/>\n<\/body><br \/>\n<\/html><\/p>\n<p><\/div>\n<p> <\/p>\n<p><strong>The CSS<\/strong><\/p>\n<div class=\"pmc-code\"><\/p>\n<p>.typography {<br \/>\n\tpadding: 20px;<br \/>\n\tmargin: 20px auto;<br \/>\n\ttext-align: center;<br \/>\n\tfont-weight: 700;<br \/>\n\ttext-transform: uppercase;<br \/>\n\tletter-spacing: 1px;<br \/>\n}<br \/>\n.typography a {<br \/>\n\ttext-align: center;<br \/>\n\tpadding: 20px;<br \/>\n\ttext-decoration: none;<br \/>\n}<br \/>\n.typography a span {<br \/>\n\tfont-size: 105px;<br \/>\n\tcolor: #7f7f7f;<br \/>\n \topacity: 1;<br \/>\n \tdisplay: inline-block;<br \/>\n \ttext-shadow: 0px 0px 2px #444, 1px 1px 4px rgba(0,0,0,0.7);<br \/>\n\t-webkit-transition: all 0.5s linear;<br \/>\n\t-moz-transition: all 0.5s linear;<br \/>\n\t-o-transition: all 0.5s linear;<br \/>\n\t-ms-transition: all 0.5s linear;<br \/>\n\ttransition: all 0.5s linear;<br \/>\n}<br \/>\n.typography a span:hover{<br \/>\n\tcolor: #000;<br \/>\n\t-webkit-animation: frameEffect 0.6s linear infinite forwards ;<br \/>\n\t-moz-animation: frameEffect 0.6s linear infinite forwards ;<br \/>\n\t-ms-animation: frameEffect 0.6s linear infinite forwards ;<br \/>\n\tanimation: frameEffect 0.6s linear infinite forwards ;<br \/>\n}<\/p>\n<p>@keyframes frameEffect {<br \/>\n 0% {<br \/>\n \ttransform: scale(1.2);<br \/>\n }<br \/>\n 25% {<br \/>\n \ttransform: scale(1.4);<br \/>\n }<br \/>\n 50% {<br \/>\n \ttransform: scale(1.6);<br \/>\n }<br \/>\n 75% {<br \/>\n \ttransform: scale(1.3);<br \/>\n }<br \/>\n 100% {<br \/>\n transform: scale(1);<br \/>\n }<br \/>\n}<br \/>\n@-moz-keyframes frameEffect {<br \/>\n 0% {<br \/>\n \t-moz-transform: scale(1.2);<br \/>\n }<br \/>\n 25% {<br \/>\n \t-moz-transform: scale(1.4);<br \/>\n }<br \/>\n 50% {<br \/>\n \t-moz-transform: scale(1.6);<br \/>\n }<br \/>\n 75% {<br \/>\n \t-moz-transform: scale(1.3);<br \/>\n }<br \/>\n 100% {<br \/>\n -moz-transform: scale(1);<br \/>\n }<br \/>\n}<br \/>\n@-webkit-keyframes frameEffect {<br \/>\n 0% {<br \/>\n \t-webkit-transform: scale(1.2);<br \/>\n }<br \/>\n 25% {<br \/>\n \t-webkit-transform: scale(1.4);<br \/>\n }<br \/>\n 50% {<br \/>\n \t-webkit-transform: scale(1.6);<br \/>\n }<br \/>\n 75% {<br \/>\n \t-webkit-transform: scale(1.3);<br \/>\n }<br \/>\n 100% {<br \/>\n transform: scale(1);<br \/>\n }<br \/>\n}<br \/>\n@-ms-keyframes frameEffect {<br \/>\n 0% {<br \/>\n \t-ms-transform: scale(1.2);<br \/>\n }<br \/>\n 25% {<br \/>\n \t-ms-transform: scale(1.4);<br \/>\n }<br \/>\n 50% {<br \/>\n \t-ms-transform: scale(1.6);<br \/>\n }<br \/>\n 75% {<br \/>\n \t-ms-transform: scale(1.3);<br \/>\n }<br \/>\n 100% {<br \/>\n -ms-transform: scale(1);<br \/>\n }<br \/>\n}<\/p>\n<p><\/div>\n<p> <\/p>\n<p><strong>The JavaScript<\/strong><\/p>\n<div class=\"pmc-code\"><\/p>\n<p><script type=\"text\/javascript\">\n$(function() {\n\t$(\"#typography a\").lettering();\n});\n<\/script><\/p>\n<p><\/div>\n<p> <\/p>\n<p>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.<\/p>\n<p><strong>Author Bio- <\/strong>Mike Swan is a WordPress developer by profession, working for <strong>Markupcloud Ltd.<\/strong>. Give your website an appealing look with <a href=\"http:\/\/www.markupcloud.com\/services\/psd-to-wordpress\">Photoshop to wordpress theme conversion<\/a>, and maximize the profits by adding new features in the website.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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 …<\/p>\n","protected":false},"author":1,"featured_media":14063,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[4,178],"tags":[1574,1575,1576,1577],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v15.6.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to make typography effects with jQuery and CSS3? - PremiumCoding<\/title>\n<meta name=\"description\" content=\"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\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to make typography effects with jQuery and CSS3? - PremiumCoding\" \/>\n<meta property=\"og:description\" content=\"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\" \/>\n<meta property=\"og:url\" content=\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/\" \/>\n<meta property=\"og:site_name\" content=\"PremiumCoding\" \/>\n<meta property=\"article:published_time\" content=\"2015-01-23T08:11:08+00:00\" \/>\n<meta name=\"twitter:card\" content=\"summary\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\">\n\t<meta name=\"twitter:data1\" content=\"4 minutes\">\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Organization\",\"@id\":\"https:\/\/premiumcoding.com\/#organization\",\"name\":\"PremiumCoding\",\"url\":\"https:\/\/premiumcoding.com\/\",\"sameAs\":[],\"logo\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#logo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/premiumcoding.com\/wp-content\/uploads\/2013\/12\/premiumcoding-wordpress-themes-logo@2x.png\",\"width\":400,\"height\":134,\"caption\":\"PremiumCoding\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/#logo\"}},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/premiumcoding.com\/#website\",\"url\":\"https:\/\/premiumcoding.com\/\",\"name\":\"PremiumCoding\",\"description\":\"WordPress Themes, Tutorials & Articles\",\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":\"https:\/\/premiumcoding.com\/?s={search_term_string}\",\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/#primaryimage\",\"inLanguage\":\"en-US\",\"url\":\"\"},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/#webpage\",\"url\":\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/\",\"name\":\"How to make typography effects with jQuery and CSS3? - PremiumCoding\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/#primaryimage\"},\"datePublished\":\"2015-01-23T08:11:08+00:00\",\"dateModified\":\"2015-01-23T08:11:08+00:00\",\"description\":\"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\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/\"]}]},{\"@type\":\"Article\",\"@id\":\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/#webpage\"},\"author\":{\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\"},\"headline\":\"How to make typography effects with jQuery and CSS3?\",\"datePublished\":\"2015-01-23T08:11:08+00:00\",\"dateModified\":\"2015-01-23T08:11:08+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/#webpage\"},\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/premiumcoding.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/#primaryimage\"},\"keywords\":\"typography css3,typography effects,typography effects css3,typography effects jquery\",\"articleSection\":\"Blog,Tutorials\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/premiumcoding.com\/make-typography-effects-jquery-css3\/#respond\"]}]},{\"@type\":\"Person\",\"@id\":\"https:\/\/premiumcoding.com\/#\/schema\/person\/e82e4a7d2166758ae7c30a69e651b04c\",\"name\":\"Ales\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\/\/premiumcoding.com\/#personlogo\",\"inLanguage\":\"en-US\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/a5b70a6c161b959988486ba65abb4653?s=96&d=wp_user_avatar&r=g\",\"caption\":\"Ales\"},\"sameAs\":[\"https:\/\/premiumcoding.com\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","_links":{"self":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/14062"}],"collection":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/comments?post=14062"}],"version-history":[{"count":0,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/posts\/14062\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media\/14063"}],"wp:attachment":[{"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/media?parent=14062"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/categories?post=14062"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/premiumcoding.com\/wp-json\/wp\/v2\/tags?post=14062"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}