Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #8250 > unrolled thread

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

Started by"James" <no@spam.invalid>
First post2011-11-11 22:20 -0800
Last post2011-11-12 10:21 -0800
Articles 3 — 3 participants

Back to article view | Back to comp.lang.javascript

Contents

  emulating a flash based site with dynamic html/css/javascript "James" <no@spam.invalid> - 2011-11-11 22:20 -0800
    Re: emulating a flash based site with dynamic html/css/javascript Elegie <elegie@anonymous.invalid> - 2011-11-12 12:14 +0100
    Re: emulating a flash based site with dynamic html/css/javascript "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2011-11-12 10:21 -0800

#8250 — emulating a flash based site with dynamic html/css/javascript

From"James" <no@spam.invalid>
Date2011-11-11 22:20 -0800
Subjectemulating a flash based site with dynamic html/css/javascript
Message-ID<j9l369$rbv$1@speranza.aioe.org>
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...

[toc] | [next] | [standalone]

#8252

FromElegie <elegie@anonymous.invalid>
Date2011-11-12 12:14 +0100
Message-ID<4ebe5532$0$648$426a74cc@news.free.fr>
In reply to#8250
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
   };

})();

[toc] | [prev] | [next] | [standalone]

#8266

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2011-11-12 10:21 -0800
Message-ID<632c435e-f45d-499a-9a52-3ef4e55e19ba@g21g2000yqc.googlegroups.com>
In reply to#8250
On Nov 12, 12:20 am, "James" <n...@spam.invalid> 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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web