In this post we will see how to achieve that effect with a little help of lettering.js and css3 transition property.
Let's take a look at the demo first:
HTML
Typical HTML5 document is laid out complete with Doctype and link to the CSS stylesheet. I applied class "title" to <h1> so we can have individual letter control with lettering.js.
<!DOCTYPE><html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">;
<head>;
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />;
<title>Create Super Cool Text Effect using CSS3 and Lettering.js</title>
<link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="js/jquery.lettering-0.6.min.js" type="text/javascript"></script>
<script>
(document).ready(function(){
(".title").lettering();
});
</script>
</head>
<body>
<div id="container">
<h1 class="title">confessions3</h1>
</div><!--container-->
</body>
</html>
font-face
Import Mensch font in css using @font-face.
@font-face {
2 font-family: 'MenschThin';
3 src: url('../fonts/mensch-thin-wf.eot');
4 src: url('../fonts/mensch-thin-wf.eot?#iefix') format('embedded-opentype'),
5 url('../fonts/mensch-thin-wf.woff') format('woff'),
6 url('../fonts/mensch-thin-wf.ttf')
format('truetype'),
7 url('../fonts/mensch-thin-wf.svg#MenschMenschThin') format('svg');
8 font-weight: normal;
9 font-style: normal;
10 }
11
12 @font-face {
13 font-family: 'MenschBold';
14 src: url('../fonts/mensch-bold-wf.eot');
15 src: url('../fonts/mensch-bold-wf.eot?#iefix') format('embedded-opentype'),
16 url('../fonts/mensch-bold-wf.woff') format('woff'),
17 url('../fonts/mensch-bold-wf.ttf') format('truetype'),
18 url('../fonts/mensch-bold-wf.svg#MenschMenschBold') format('svg');
19 font-weight: normal;
20 font-style: normal;
21 }
Style .char Classes Generated by Lettering.js
h1.title {
2 font: 9em/1 'MenschThin';
3 text-transform: uppercase;
4 color: #e4b405;
5 display: inline-block;
6 width: 100%;
7 text-shadow: 0px 0px 30px rgba(235,191,16,0),
8 0px 0px 30px rgba(235,191,16,0),
9 1px 1px 0px #f8f7e5,
10 1px -1px 0px #fdce25;
11 margin-bottom: 1.7em;
12 overflow: hidden;
13 }
14
15 .title span {
16 zoom: 1;
17 display: inline-block;
18 z-index: 1;
19 position: absolute;
20 }
21 .title .char1 {left: .1em; padding-left: .05em;}
22
23 .title .char2 {left: .62em; padding-left: .05em;}
24
25 .title .char3 {left: 1.13em; padding-left: .05em;}
26
27 .title .char4 {left: 1.7em; padding-left: .05em;}
28
29 .title .char5 {left: 2.19em; padding-left: .05em;}
30
31 .title .char6 {left: 2.71em; padding-left: .05em;}
32
33 .title .char7 {left: 3.24em; padding-left: .05em;}
34
35 .title .char8 {left: 3.77em; padding-left: .05em;}
36
37 .title .char9 {left: 4.07em; padding-left: .05em;}
38
39 .title .char10 {left: 4.57em; padding-left: .05em;}
40
41 .title .char11 {left: 5.14em; padding-left: .05em;}
42
43 .title .char12 {left: 5.9em; padding-left: .05em;}
::after Pseudo Class
.char1::after {content: "C"; margin-left: -.478em;}
2
3 .char2::after {content: "O"; margin-left: -.442em;}
4
5 .char3::after {content: "N"; margin-left: -.49em;}
6
7 .char4::after {content: "F"; margin-left: -.448em;}
8
9 .char5::after {content: "E"; margin-left: -.448em;}
10
11 .char6::after {content: "S"; margin-left: -.448em;}
12
13 .char7::after {content: "S"; margin-left: -.448em;}
14
15 .char8::after {content: "I"; margin-left: -.245em;}
16
17 .char9::after {content: "O"; margin-left: -.447em;}
18
19 .char10::after {content: "N"; margin-left: -.49em;}
20
21 .char11::after {content: "S"; margin-left: -.448em;}
22
23 .char12::after {content: "3"; margin-left: -.42em;}
24
25 .char1::after, .char2::after, .char3::after, .char4::after, .char5::after, .char6::after, .char7::after, .char8::after, .char9::after,
26 .char10::after, .char11::after, .char12::after {
27 color: #f8f7e5;
28 text-align: center;
29 position: absolute;
30 font-family: 'MenschBold';
31 font-size: 105.6%;
32 text-transform: uppercase;
33 margin-top: .06em;
34 z-index: -1;
35 *display: inline;
36 -webkit-mask-image: url('../img/mask.png');
37 -moz-mask-image: url('../img/mask.png');
38 -o-mask-image: url('../img/mask.png');
39 -ms-mask-image: url('../img/mask.png');
40 mask-image: url('../img/mask.png');
41 text-shadow: 10px 5px 0px rgba(0,0,0,0.4);
42 padding-right: .1em;
43 }
Transitions
.title {
2 -webkit-transition: all 0.6s ease-in-out;
3 -moz-transition: color 0.6s ease-in-out;
4 -o-transition: color 0.6s ease-in-out;
5 -ms-transition: color 0.6s ease-in-out;
6 transition: color 0.6s ease-in-out;
7 }
8
9 .title:hover {
10 text-shadow: none;
11 color: #2b2a29;
12 cursor: pointer;
13 }
14
15 .title:hover span::after {opacity: .2;}
16
17 .char1, .char6, .char11, .char12 {
18 -webkit-transition: all 1.2s ease-in-out;
19 -moz-transition: all 1.2s ease-in-out;
20 -o-transition: all 1.2s ease-in-out;
21 -ms-transition: all 1.2s ease-in-out;
22 transition: all 1.2s ease-in-out;
23 }
24
25 .title:hover .char1, .title:hover .char6, .title:hover .char11, .title:hover .char12 {
26 text-shadow: 0px 0px 10px rgba(235,191,16,1),
27 0px 0px 20px rgba(235,191,16,1),
28 0px 0px 30px rgba(235,191,16,1),
29 0px 0px 40px rgba(235,191,16,1),
30 0px 0px 50px rgba(235,191,16,1);
31 color: #e4b405;
32 }
Add Audio
I decided to go a little further and insert audio when you hover over title.
<div id="container"><h1 class="title">confessions3</h1>
<audio id="electricity" preload="auto">
<source src="audio/electricity.mp3"></source>
<source src="audio/electricity.ogg"></source>
</audio>
</div><!--container-->
<script>
var electricity = $("#electricity")[0];
$(".title")
.mouseenter(function() {
electricity.play();
});
</script>
DEMO
