Using Textillate.js (http://jschr.github.io/textillate/) and just trying to get a basic animation going for it, not sure why mine is not working, looked at other SO questions and I literally just copied and pasted just to see if it was working, and it wasn't. I did add a jquery.lettering.js and jquery.textillate.js files to my project as well (also animate.css) but I figured since I just copied and pasted from github I wouldn't need to post it here.
HTML
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>AIM II Spring 2014 - Jordan Max Assignment 5 © 2014 </title>
<link rel="stylesheet" type="text/css" href="styles.css" />
<link rel="stylesheet" type="text/css" href="CSS/animate.css" />
<link href='http://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="jquery.flip.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<script src="jquery.lettering.js"></script>
<script src="jquery.textillate.js"></script>
<script type="text/javascript">
$('.tlt').textillate({
in: {
shuffle: false,
sync: true
},
out: {
effect: 'fadeOutRightBig',
shuffle: false,
sync: true
},
loop: true
});
});
</script>
</head>
<body>
<h1><p> Writing 3... jQuery Remix!</p></h1>
<h2><a href="http://iam.colum.edu/students/jordan.max/algorerhythm/index.html"><p class="animated bounceInRight">Go Back to Portfolio »</p></a></h2>
<?php
// Each sponsor is an element of the $sponsors array:
$quotes = array(
array('Diegetic elements are objects within a media that only the user knows about in a video game for instance, a diegetic element would be the items you see on the side of the screen that inform you how much health or ammo you have remaining.','These are necessary components for they are needed to tell the player perhaps where to go for their next objective, or if any enemies are around you. Non-diegetic elements are items inside interactivity that are supposed to be there. '),
array('Some patterns being used in interactive media today include the majority of diegetic elements that would at one time be diegetic, but attempting to translate it into a non-diegetic element.','One of the biggest examples of great uses of non-diegetic elements is the way the players health is damaged. Older games will have a health bar, but more modern games will mostly have a “shock” state where the screen might turn red...'),
array('Does this mean we should stop using diegetic elements altogether? This is a question anyone in any form of interactive media should be asking themselves.','Websites are the same, and it would be logical and smart for developers to start thinking about how we can eliminate clutter, and turn it into a non-diegetic element for the user. ')
);
// Randomizing the order of sponsors:
shuffle($quotes);
?>
<div class="tlt">
<ul class="texts">
<li>Hello World!</li>
<li>I hate you</li>
</ul>
</div>
<nav id="main">
<figure class="sponsorListHolder">
<?php
// Looping through the array:
foreach($quotes as $FlipSide)
{
echo'
<div class="quote" title="Click to flip">
<div class="quoteFlip" >
<p>'.$FlipSide[0].'</p>
</div>
<div class="quoteData">
<div class="quoteDescription">
'.$FlipSide[1].'
</div>
</div>
</div>
';
}
?>
<aside class="clear"></aside>
</figure>
</nav>
<footer class="animated bounceInUp">
<p class="note"> © 2014. Jordan Max. Al Gore Rhythm Labs. </p>
</footer>
</body>
</html>
CSS
*{
/* Resetting the default styles of the page */
margin:0;
padding:0;
}
body{
/* Setting default text color, background and a font stack */
font-size:0.825em;
color:#B0F26D;
background-color:#6AAC2B;
font-family:Arial, Helvetica, sans-serif;
}
.quoteListHolder{
margin-bottom:30px;
}
.quote{
width:250px;
height:400px;
float:left;
margin:4px;
padding: 30px;
/*background-color: #F03C79;*/
/* Giving the sponsor div a relative positioning: */
position:relative;
cursor:pointer;
}
.quoteFlip{
/* The sponsor div will be positioned absolutely with respect
to its parent .sponsor div and fill it in entirely */
position:absolute;
left:0;
top:0;
width:100%;
height:100%;
border:1px solid #ddd;
background: #36D8AA;
color:#EF6C9A;
font-family: 'PT Sans', sans-serif;
font-size: 2em;
}
.quoteFlip:hover{
border:1px solid #999;
/* CSS3 inset shadow: */
-moz-box-shadow:0 0 30px #999 inset;
-webkit-box-shadow:0 0 30px #999 inset;
box-shadow:0 0 30px #999 inset;
}
.quoteFlip>p{
font-style:italic;
padding:50px 10px 20px 20px;
}
.quoteFlip img{
/* Centering the logo image in the middle of the sponsorFlip div */
/* Not being used right now
position:absolute;
top:50%;
left:50%;
margin:-70px 0 0 -70px;
*/
}
.quoteData{
/* Hiding the .sponsorData div */
display:none;
}
.quoteDescription{
padding:50px 10px 20px 20px;
font-style:italic;
}
.clear{
/* This class clears the floats */
clear:both;
}
/* The styles below are only necessary for the styling of the demo page: */
#main{
position:relative;
margin:0 auto;
width:960px;
}
h1{
padding:30px 0;
text-align:center;
text-shadow:0 1px 1px black;
margin-bottom:30px;
background-color: #F03C79;
letter-spacing: 20px;
}
footer {
color: #F03C79;
}
h1,h2{
font-family:"Myriad Pro",Arial,Helvetica,sans-serif;
}
h2{
font-size:14px;
font-weight:normal;
text-align:center;
position:absolute;
right:40px;
top:40px;
}
.note{
font-size:12px;
font-style:italic;
padding-bottom:20px;
text-align:center;
}
a, a:visited {
color:#0196e3;
text-decoration:none;
outline:none;
color: lightgreen;
}
a img{
border:none;
}
looks like you have this typo and extra });
try this instead::
$(function(){
$('.tlt').textillate({ in : {
shuffle: false,
sync: true
},
out: {
effect: 'fadeOutRightBig',
shuffle: false,
sync: true
},
loop: true
});
});
or:
$(document).ready(function(){
$('.tlt').textillate({ in : {
shuffle: false,
sync: true
},
out: {
effect: 'fadeOutRightBig',
shuffle: false,
sync: true
},
loop: true
});
});
if it still doesnt work, according to their docs, it needs to be inside an anonymous function, so try to execute inside one..
$(function () {});
or document ready:
also please fix this;
<h1><p> Writing 3... jQuery Remix!</p></h1>
it should be:
<h1>Writing 3... jQuery Remix!</h1>
is not a valid html mark up, and if you want a H1 for SEO reasons, just give it a class and use css to make it look the way you want.