On 12/11/2011 07:20, James wrote :
Hello,
I was wondering if there is a way to emulate the "flowing text animation"
from the following 100% flash-based website opening page:
http://hazeltinephotography.com
I do not think so, because this would mean modifying how a particular
font is drawn, which AFAIK cannot be done through scripting.
I think I can do all the rest in JavaScript, however this text animation is
bothering me. Perhaps I need to use HTML 5 canvas... Hummm....
Well, I believe that you'd have to draw yourself the letters, that would
certainly be possible, yet quite a pain to set up.
I think I could show the text as a sliding div with overflow: hidden... But
it would not be as pretty...
I like a good challenge when waking up on Saturday morning, so I have
tried and built something (see below). The script comes in two parts: an
HTML page and a script include. It works fine on Chrome 15, IE9 and
Firefox 5, but I am not sure of how it will render on other (and
especially older) browsers.
Have fun,
Elegie.
----
HTML file
----
<!doctype html>
<html>
<head>
<title>Text Effect</title>
<meta charset='utf-8'>
<style type="text/css">
#top {
background-color: #aaa ;
border: 1px #000 solid;
position: absolute;
height: 40%; width: 60%;
left: 20%; top: 10%;
}
#bottom {
background-color: #000 ;
border: 1px #000 solid;
position: absolute;
height: 30%; width: 60%;
left: 20%; top: 50%;
}
#title {
color: #fff;
font-size: 2em; font-family: Segoe Script;
position: absolute;
margin-top: -0.5em; padding-left: 0.5em;
left: 20%; top: 50%;
}
</style>
<script type="text/javascript" src="text-effects.js"></script>
</head>
<body>
<div id="top"></div>
<div id="bottom"></div>
<div id="title">Illuminating the essences of nature.</div>
<script type="text/javascript">
var target = document.getElementById("title");
var effect = TextEffects.createProgressiveEffect(
TextEffects.createSmoothEffect()
);
effect.applyOnTarget(target);
</script>
</body>
</html>
----
Script file (text-effects.js)
----
var TextEffects = (function () {
var EFFECT_TIMEOUT = 42;
function createSmoothEffect (parentEffect) {
var effect = {};
effect.applyOnTarget = function(target) {
var opacity = 0;
target.style.opacity = opacity;
if (parentEffect && parentEffect.applyOnTarget) {
parentEffect.applyOnTarget(target);
}
setTimeout(
function() {
opacity += 0.1;
if (opacity<1) {
target.style.opacity = opacity;
setTimeout(arguments.callee, EFFECT_TIMEOUT);
} else {
target.style.opacity = 1;
}
},
EFFECT_TIMEOUT
);
};
return effect;
}
function createProgressiveEffect(parentEffect) {
var effect = {};
effect.applyOnTarget = function(target) {
// Main algorithm
denormalizeNodes(target);
hideNodes(target);
showNodes(target);
// Helpers
function traverse(root, actionsByNodeType) {
var children = root.childNodes;
for (var ii=0; ii<children.length; ii++) {
var child = children[ii];
var action = actionsByNodeType[child.nodeType];
if (action) {
action(child);
}
}
}
function denormalizeNodes(target) {
traverse(target, {
"1" : function(node) {
traverse(node, this);
},
"3" : function (node) {
var text = node.nodeValue;
if (text) {
var parts = text.split("");
for (var j=0; j<parts.length; j++) {
var container = document.createElement("span");
container.appendChild(
document.createTextNode(parts[j])
);
node.parentNode.insertBefore(container, node);
}
node.parentNode.removeChild(node);
}
}
});
}
function hideNodes(target) {
traverse(target, {
"1" : function(node) {
traverse(node, this);
node.style.visibility = "hidden";
}
});
}
function showNodes(target) {
var list = [];
traverse(target, {
"1" : function(node) {traverse(node, this); list.push(node);}
});
var index=0;
setTimeout(
function() {
var node = list[index++];
if(node) {
node.style.visibility = "visible";
if (parentEffect && parentEffect.applyOnTarget) {
parentEffect.applyOnTarget(node);
}
setTimeout(arguments.callee, EFFECT_TIMEOUT);
}
},
EFFECT_TIMEOUT
);
}
};
return effect;
}
return {
createSmoothEffect : createSmoothEffect,
createProgressiveEffect : createProgressiveEffect
};
})();
