HTML/Javascript Staged Animation Meter Presentation Tutorial

HTML/Javascript Staged Animation Meter Presentation Tutorial

HTML/Javascript Staged Animation Meter Presentation Tutorial

Slideshows can be a great way to present information. A slideshow is a form of animation that at its fastest is like a movie, where the images overlay on top of each other so fast our brains declare it a “stream of vision”, but today we “stage” the information slowly, in order to help let visual and textual information be absorbed, perhaps over several repeated viewings.

We think the “<meter>” HTML5 element can help this presentation enormously. It helps reduce anxiety with learning if the learner is presented with some idea of the size of the whole project they’re undertaking, and where they are at with this during their specific “slide” view, and a “<meter>” is a great presentation tool for this.

Today we study The Water Cycle (and thanks to this link for good information), but you’ll see this staged approach when you tackle many eCommerce website Shopping Cart functionalities, as well.

Another good tool to use is the idea of drilling down on the information, especially if you have the luxury of being able to repeat the presentation, as we allow for here, today. Drilling down can involve, as we do today, visual cues and textual information that at first pares the gist of the information into big text, and then allows the learner to drill down into the smaller text sized detail information, also available as bigger text at any time by a (non-mobile) hover over the visual image presented.

So sit back and see what you learn (if you didn’t know already) from The Water Cycle as a live run or study the code you could call water_cycle.html

If this was interesting you may be interested in this too.

This entry was posted in Animation, eLearning, GUI, Tutorials and tagged , , , , , , , , , , , , , , . Bookmark the permalink.

12 Responses to HTML/Javascript Staged Animation Meter Presentation Tutorial

  1. hello!,I love your writing so a lot! share we keep up a correspondence more approximately your article on AOL? I require an expert on this space to unravel my problem. Maybe that’s you! Looking ahead to see you.

  2. Simply desire to say your article is as surprising. The clearness to your publish is just excellent and that i can assume you’re an expert on this subject. Fine together with your permission allow me to clutch your feed to stay updated with impending post. Thank you 1,000,000 and please carry on the enjoyable work.|

  3. Health says:

    I just wanted to compose a quick note in order to thank you for some of the awesome ideas you are showing on this site. My long internet search has at the end been honored with professional know-how to go over with my friends. I ‘d express that we website visitors are very fortunate to live in a wonderful place with so many wonderful individuals with helpful opinions. I feel truly blessed to have discovered your entire web site and look forward to plenty of more excellent minutes reading here. Thanks once again for everything.

  4. Diani Beach says:

    Would you mind fundamentally if I cite a few your discussions provided that I provide you credit at the same time as article sources returning for your webblog? My web portal is inside the identical industry as your web site and my prospects would definitely use some of the suggestions you truly present at this web site. Please let me know if this really is okay with you. Adios for now!

  5. Award says:

    I enjoy you discussing your point of view.. I appreciate you discussing your perspective.. Honestly very helpful outlook, thank you for writing.. My browsing efforts seem full.. thank you.

  6. honest says:

    Really practical point of view, thank you for writing.. So pleased to possess identified this article.. Liking the post.. all the best Very very helpful mindset, appreciate your sharing..

  7. Dee Jankins says:

    I am glad for commenting to make you understand of the perfect encounter my wife’s child developed reading your web site. She came to understand too many issues, which include what it is like to have a marvelous helping style to get others without hassle grasp chosen impossible matters. You actually did more than my expectations. Many thanks for showing these helpful, healthy, edifying and also cool thoughts on your topic to Evelyn.

  8. Freshness says:

    Great blog here! Additionally your website so much up fast! What host are you using? Can I am getting your affiliate link for your host? I wish my web site loaded up as fast as yours lol

  9. generous says:

    Supporting the publish.. with thanks Undoubtedly handy mindset, thanks for sharing with us.. Certainly beneficial perspective, thank you for blogging.. Liking the post.. thanks much

  10. advice says:

    I appreciate you conveying your viewpoint.. sure, analysis is paying off. My internet browsings seem full.. thank you. I value you expressing your point of view..

  11. Leigh Ojala says:

    I truly enjoy looking at on this website , it contains fantastic content . “He who sees the truth, let him proclaim it, without asking who is for it or who is against it.” by Henry George.

  12. Jo Raz says:

    I precisely wished to thank you very much all over again. I’m not certain what I could possibly have done in the absence of these techniques contributed by you relating to such a situation. It has been a very frustrating setting for me personally, nevertheless taking a look at a expert approach you handled it forced me to jump over delight. I am just happier for the support and in addition pray you are aware of a great job you have been undertaking instructing men and women via your webblog. Most probably you’ve never encountered any of us.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>