Member Avatar for jspence29

I am trying to get an animation, like the one at http://tympanus.net/Tutorials/TypographyEffects/index6.html
But for some reason it is not animating at all. Is there any fix for this? My code is

<DOCTYPE html>
<html>
<head>
<title> Saturday Night Live </title>
<style>

body {
background-image: url('http://images.fanpop.com/images/image_uploads/SNL-Wallpaper-saturday-night-live-784022_1024_768.jpg');
background-size: cover;
}

.letter-container h2 a{
text-align: justify;
float: right;
margin-right: 100px;
font-size: 130px;
line-height: 160px;
display: block;
padding-bottom: 30px;
color: #fff;
cursor:default;
text-decoration: none;
}
.letter-container h2 a span {
color: #000;
opacity: 1;
text-decoration: none;
transition: all 0.3s linear;
animation: sharpen 0.9s linear backwards;
}
.letter-container h2 a span:nth-child(1) {
    animation-delay: 0s;
}
.letter-container h2 a span:nth-child(2) {
    animation-delay: 0.1s;
}
.letter-container h2 a span:nth-child(3) {
    animation-delay: 0.2s;
}
.letter-container h2 a span:nth-child(4) {
    animation-delay: 0.3s;
}
.letter-container h2 a span:nth-child(5) {
    animation-delay: 0.4s;
}
.letter-container h2 a span:nth-child(6) {
    animation-delay: 0.5s;
}
.letter-container h2 a span:nth-child(7) {
    animation-delay: 0.8s;
}
.letter-container h2 a span:nth-child(8) {
    animation-delay: 0.9s;
} 
.letter-container h2 a span:nth-child(9) {
    animation-delay: 0.10s;
}
.letter-container h2 a span:nth-child(10) {
    animation-delay: 0.11s;
} 
.letter-container h2 a span:nth-child(11) {
    animation-delay: 0.12s;
}
.letter-container h2 a span:nth-child(12) {
    animation-delay: 0.13s;
} 
.letter-container h2 a span:nth-child(13) {
    animation-delay: 0.14s;
}
.letter-container h2 a span:nth-child(14) {
    animation-delay: 0.15s;
} 
.letter-container h2 a span:nth-child(15) {
    animation-delay: 0.16s;
}
.letter-container h2 a span:nth-child(16) {
    animation-delay: 0.17s;
} 
.letter-container h2 a span:nth-child(17) {
    animation-delay: 0.18s;
}
@keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-moz-keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-webkit-keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-ms-keyframes sharpen {
 0% {
 opacity: 0;
 text-shadow: 0px 0px 100px #fff;
 color: transparent;
 }
 90% {
 opacity: 0.9;
 text-shadow: 0px 0px 10px #fff;
 color: transparent;
 }
 100% {
 color: #fff;
 opacity: 1;
 text-shadow: 0px 0px 2px #fff, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
</style>
</head>
<body>

<div id="letter-container" class="letter-container">
    <h2><a href="#"><font color="red">S</font>aturday <br/> <font color="red">N</font>ight <br/> <font color="red">L</font>ive</a></h2>
</div>
</body>
</html>

Sorry for it being so long, most of it is just repetitive. Thank you!

Edited by jspence29
  • 3 Contributors
  • 7 Replies
  • 202 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by jspence29

Recommended Answers

All 7 Replies

Member Avatar for LastMitch

@jspence29

Why does this animation not work?

I don't see you connecting to the JQUERY file in order for this to work?

It should look like this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>

It should be part of your code without this the animation won't work

Edited by LastMitch because: grammer
Member Avatar for designershiv

Hi @jspence29,
this is css3, so need to have jquery link

Member Avatar for LastMitch

Yet for a reason that eludes me it odesn't in my website please help!

You need to put the javascript before the body another words it should be in the header not in body.

Member Avatar for jspence29

Do you mean all the javascript? because I put it all there and there was no change

Member Avatar for LastMitch

Do you mean all the javascript? because I put it all there and there was no change

This can't be a school project right?

Give me a good reason why you link this file from their website and it should be link to your OWN website:

<script type="text/javascript" src="tympanus.net/Tutorials/TypographyEffects/js/jquery.lettering.js"></script>

This file: jquery.lettering.js should be on your server not linking to their website.

<off topic> You know I realize you been posting alot of threads and questions it would be nice if you can click Mark Question Solve on the bottom left corner so the thread is close and solve so noone can add stuff to it. </off topic>

Member Avatar for jspence29

Thank you @LastMitch and I just fixed my issue, I followed you advice, and I changed the file, and I also moved the code to the bottom of the body, and it worked!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.