emulating a flash based site with dynamic html/css/javascript

J

James

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 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....


I think I could show the text as a sliding div with overflow: hidden... But
it would not be as pretty...

Are there any good IDE's for HTML 5 canvas? Perhaps I can do it in Flash CS5
and use something like Wallaby...
 
E

Elegie

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
};

})();
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

No members online now.

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top