This project is an experiment in HTML5, CSS3, PHP, jQuery/JavaScript, Twitter, Twitter Bootstrap, and kinetic typography. That's a lotta stuff right there, I know. That's why it's taken an entire semester.
Having no prior experience in most of these things, it's probably taken me a lot more time and more trial-and-error than it probably should. But that's why it's an experiment, isn't it?
Tweets are pulled from our Twitter account's RSS feed, by way of an XML file. PHP is used to pull tweets from the XML file to be displayed on the page.
A PHP array of keywords is set aside for when any of those words show up. If a word appears in a tweet, that word is duplicated (to also appear inline), given a CSS style, and put in a <span> element to be handled by jQuery.
jQuery animations are applied to keywords (which, through PHP become <span> elements), making them fly out from the tweet, toward the viewer. The animation is based on the location of the tweet, and moves toward the viewer, with a bit of randomization.
Showing new tweets happens automatically through AJAX, where every few seconds, an XML request is made to a cache file. If new tweets are found, they show up. If not, nothing happens.
Reloading tweets also made animations stop, so I now automatically reload them too.
This typography experiment uses Twitter's Bootstrap framework for responsive layout elements and some limited styling.