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

Discussion in 'Javascript' started by James, Nov 12, 2011.

  1. James

    James Guest

    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...
    James, Nov 12, 2011
    #1
    1. Advertising

  2. James

    Elegie Guest

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

    })();
    Elegie, Nov 12, 2011
    #2
    1. Advertising

  3. On Nov 12, 12:20 am, "James" <> wrote:
    > 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....



    SVG perhaps:

    http://svg-wow.org/text-effects/text-effects.xhtml
    Michael Haufe (TNO), Nov 12, 2011
    #3
    1. Advertising

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

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Bernie
    Replies:
    0
    Views:
    530
    Bernie
    Sep 5, 2004
  2. Replies:
    8
    Views:
    23,463
    SABOND21
    Feb 9, 2012
  3. Pine nut
    Replies:
    7
    Views:
    1,565
    Jonathan N. Little
    Aug 14, 2007
  4. Chris Jakeman
    Replies:
    1
    Views:
    114
    Markus Ernst
    Jul 17, 2003
  5. Replies:
    3
    Views:
    93
    Julian Turner
    Feb 1, 2006
Loading...

Share This Page