Fittext.js and jQuery animation not working together
I am trying to use Fittext.js on my large headings that are already
animated with CSS3 and jQuery but cannot get them to work together. Either
the Fittext plugin works but whips away all my styling and animation, or
it just doesn't work at all and everything stays how it was before I tried
applying it. I'm not sure what to do. Any help is appreciated.
HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jessica ____: PORTFOLIO</title>
<link rel="stylesheet" type="text/css" href="style1.css">
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript" src="jquery.lettering.js"></script>
<script type="text/javascript" src="jquery.fittext.js"></script>
<link href='http://fonts.googleapis.com/css?family=Quicksand:300,400,700'
rel='stylesheet' type='text/css'>
<link
href='http://fonts.googleapis.com/css?family=Playfair+Display:700italic'
rel='stylesheet' type='text/css'>
<link rel="shortcut icon" href="favicon.ico" />
</head>
<body>
<div id="letter-container" class="letter-container">
<div id="heading" class="fittext1">HELLO,</div>
<div id="aboutintro">My name is</div>
<div id="name">jessica _____</div>
<div id="aboutbody">and I'm a student studying Graphic
Communication Design at the
__________________________________________. I like to
design websites and take pictures.</div>
<div id="enter">click here to access my <a id="red"
href="/portfolio.html">portfolio</a> and <a id="red"
href="/resume.pdf">resume</a></div>
</div>
<script type="text/javascript">
$(function() {
$("#heading").lettering();
});
</script>
<script type="text/javascript">
$(function(){
$("#aboutintro").delay(4000).fadeIn(500);
});
</script>
<script type="text/javascript">
$(function() {
$("#name").lettering();
});
</script>
<script type="text/javascript">
$(".fittext1").fitText(1.1, { minFontSize: '50px', maxFontSize:
'310px' });
</script>
<script type="text/javascript">
$(function(){
$("#aboutbody").delay(6000).fadeIn(500);
});
</script>
<script type="text/javascript">
$(function(){
$("#enter").delay(7000).fadeIn(500);
});
</script>
</div>
</body>
</html>
CSS
@charset "UTF-8";
/* CSS Document */
html {
background: url(grungebg.png) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
@font-face {
font-family: 'league_gothicregular';
src: url('leaguegothic-regular-webfont.eot');
src: url('leaguegothic-regular-webfont.eot?#iefix')
format('embedded-opentype'),
url('leaguegothic-regular-webfont.woff') format('woff'),
url('leaguegothic-regular-webfont.ttf') format('truetype'),
url('leaguegothic-regular-webfont.svg#league_gothicregular')
format('svg');
font-weight: normal;
font-style: normal;
}
.letter-container
{
max-width:500px;
text-align:center;
margin:auto;
max-height:700px;
position:relative;
}
#heading {
font-family: league_gothicregular, sans-serif;
text-align:center;
}
#heading span {
font-size: 310px;
color:#9f9f9f;
background: -webkit-linear-gradient(transparent, transparent),
url(mask.png);
background: -o-linear-gradient(transparent, transparent), url(mask.png);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.6s linear backwards;
-moz-animation: sharpen 0.6s linear backwards;
-ms-animation: sharpen 0.6s linear backwards;
animation: sharpen 0.6s linear backwards;
}
#heading span:nth-child(1) {
-webkit-animation-delay: 2.2s;
-moz-animation-delay: 2.2s;
-ms-animation-delay: 2.2s;
animation-delay: 2.2s;
}
#heading span:nth-child(2) {
-webkit-animation-delay: 2.6s;
-moz-animation-delay: 2.6s;
-ms-animation-delay: 2.6s;
animation-delay: 2.6s;
}
#heading span:nth-child(3) {
-webkit-animation-delay: 2.9s;
-moz-animation-delay: 2.9s;
-ms-animation-delay: 2.9s;
animation-delay: 2.9s;
}
#heading span:nth-child(4) {
-webkit-animation-delay: 2.4s;
-moz-animation-delay: 2.4s;
-ms-animation-delay: 2.4s;
animation-delay: 2.4s;
}
#heading span:nth-child(5) {
-webkit-animation-delay: 3s;
-moz-animation-delay: 3s;
-ms-animation-delay: 3s;
animation-delay: 3s;
}
#heading span:nth-child(6) {
-webkit-animation-delay: 2.7s;
-moz-animation-delay: 2.7s;
-ms-animation-delay: 2.7s;
animation-delay: 2.7s;
}
}
@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);
}
}
#aboutintro
{
font-family: 'Quicksand', sans-serif;
font-size:88px;
font-weight:300;
color:white;
display:none;
text-align:center;
margin-top:-50px;
}
#name
{
font-family: 'Playfair Display', serif;
font-size:99px;
font-weight:700;
font-style:italic;
color:#b90504;
background: -webkit-linear-gradient(transparent, transparent),
url(colormask.png);
background: -o-linear-gradient(transparent, transparent),
url(colormask.png);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-webkit-transition: all 0.3s linear;
-moz-transition: all 0.3s linear;
-o-transition: all 0.3s linear;
-ms-transition: all 0.3s linear;
transition: all 0.3s linear;
-webkit-animation: sharpen 0.6s linear backwards;
-moz-animation: sharpen 0.6s linear backwards;
-ms-animation: sharpen 0.6s linear backwards;
animation: sharpen 0.6s linear backwards;
-webkit-animation-delay: 5s;
-moz-animation-delay: 5s;
-ms-animation-delay: 5s;
animation-delay: 5s;
text-align:center;
}
}
@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);
}
}
#aboutbody
{
font-family: 'Quicksand', sans-serif;
font-size:14px;
font-weight:400;
color:#e5e5e5;
display:none;
text-align:left;
}
#enter
{
font-family: 'Quicksand', sans-serif;
font-weight:400;
font-size:18px;
color:#e5e5e5;
text-align:left;
display:none;
}
#red
{
color:#b90504;
font-weight:700;
text-decoration:none;
}
#red:hover
{
text-transform:uppercase;
}
No comments:
Post a Comment