An open-source alternative for those Flash based Twitter Fountains, built using HTML5, CSS (SASS) and Javascript.
Assuming you've got all the scripts loaded, setting up Fontana is just a few lines of code.
// Search Twitter for #twitterfontana
var data = new Fontana.datasources.Twitter('#twitterfontana');
// Default settings
var settings = new Fontana.config.Settings();
// Setup the GUI and draw it in the selected HTML element
var fontana = new Fontana.GUI(data, settings);
fontana.start($('#twitter-fontana'));
You could even set up several Fontanas with different settings and datasources on the same page.
Fullscreen mode uses the new HTML5 fullscreen API. Fontana comes with a simple wrapper (this method only works if it's called from a click or key event).
Fontana.utils.requestFullscreen(document.getElementById('twitter-fontana'));
Note that the fullscreen API is currently only implemented in Gecko and WebKit based browsers (Firefox, Chrome, Safari and some lesser known browsers).
Users of other browser (e.g. Internet Explorer) can press F11 to go fullscreen. The drawback is that this doesn't hide the interface.
Getting messages from Twitter is cool and all, but what if you want to show a specific set of pre-written messages? That's possible by using one of these alternative datasources.
The HTML datasource loads messages from an HTML element. The Twitter Fontana site uses this datasource on the homepage.
This HTML snippet is a perfectly valid datasource:
<div id="fontana-data">
<div class="fontana-message">
<q>This is not a real Tweet, but it sure looks like one.</q>
<cite>tweetfontana</cite>
</div>
<div class="fontana-message">
<q>Just some text and a username is enough.</q>
<cite>tweetfontana</cite>
</div>
</div>
Just set up the HTML datasource and Fontana will cycle through those two messages indefinitely:
var data = new Fontana.datasources.HTML('#fontana-data');
var fontana = new Fontana.GUI(data, new Fontana.config.Settings());
The static datasource takes an array of objects. These objects contain a subset of the fields returned in a Twitter search JSON response. Setting up Fontana with this datasource looks like this:
var data = new Fontana.datasources.Static([{
'created_at': new Date().toString(),
'text': 'A fake Tweet, in a fake JSON response',
'from_user': 'tweetfontana',
'profile_image_url': 'http://api.twitter.com/1/users/profile_image/tweetfontana'
})];
var fontana = new Fontana.GUI(data, new Fontana.config.Settings());
The following settings are available
message_animate_interval
The amount of time a message is shown (in miliseconds).
message_template
jQuery template string for displaying the messages
twitter_search
Search twitter for this string. Changing this setting for an existing Fontana
instance will change the datasource to Twitter, regardless of what it was
initialized with!
effect
The effect is used to transition between the messages. Current built in effects
are Fade, Slide and Zoom.
The messages are styled using CSS. The following settings mostly exist so the 'wizard' can do it's magic.
font-face
Font used in the messages
text_color
Color of the messages
special_color
Color of the hashtags and usernames
bg_color
Background color of the container
bg_image
Background image of the container
box_bg
Background color of the message container
The repository doesn't include minified scripts. Instead it offers a Makefile with a build command.
Running this build script requires a unix like environment (Linux, OSX etc.)
with make, tar & sed availabele (should be there by default on Linux).
The only non-standard tool is jammit.
Insalling jammit can be easily done by entering sudo gem install jammit
in your terminal (if you've got ruby and rubygems available).
Created by Jaap Roes, Jorik Tangelder and Arjen Scherff-de Water at Eight Media in Arnhem, the Netherlands.