Textillate Base
HTML
<link rel="stylesheet" href="http://jschr.github.io/textillate/assets/animate.css">
<script src="http://jschr.github.io/textillate/assets/jquery.lettering.js"></script>
<span class="brand" style="display:none">
<h1>
<ul class="texts">
<li>E L Y S I U M</li>
<li></li>
</ul>
</h1>
</span>
JavaScript
loadTextillate(jQuery);
$(window).bind("load", function () {
function ShowBrand() {
var docHeight = $(document).height();
var docWidth = $(document).width();
$newSpan = $(".brand");
spanHeight = $newSpan.height();
spanWidth = $newSpan.width();
maxHeight = docHeight - spanHeight;
maxWidth = docWidth - spanWidth;
$newSpan.show().css({
top: Math.floor(Math.random() * maxHeight),
left: Math.floor(Math.random() * maxWidth)
}).textillate({
in: {effect:'fadeInLeft'},
out: {effect:'fadeOutUp'}
});
}
setInterval(ShowBrand,4700);
});
/*
* textillate.js
* http://jschr.github.com/textillate
* MIT licensed
*
* Copyright (C) 2012-2013 Jordan Schroter
*/
function loadTextillate ($) {
"use strict";
function isInEffect (effect) {
return /In/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.inEffects) >= 0;
};
function isOutEffect (effect) {
return /Out/.test(effect) || $.inArray(effect, $.fn.textillate.defaults.outEffects) >= 0;
};
// custom get data api method
function getData (node) {
var attrs = node.attributes || []
, data = {};
if (!attrs.length) return data;
$.each(attrs, function (i, attr) {
if (/^data-in-*/.test(attr.nodeName)) {
data.in = data.in || {};
data.in[attr.nodeName.replace(/data-in-/, '')] = attr.nodeValue;
} else if (/^data-out-*/.test(attr.nodeName)) {
data.out = data.out || {};
data.out[attr.nodeName.replace(/data-out-/, '')] = attr.nodeValue;
} else if (/^data-*/.test(attr.nodeName)) {
data[attr.nodeName] = attr.nodeValue;
}
})
...