Text animation effects based on HTML5 Canvas particle effects,
We have previously shared many cool text effects, including HTML5 and CSS3. Today we will share a special text effect based on HTML5 Canvas. input the text you want to display in the input box and press enter to draw a text animation of the particle effect on the canvas, pretty cool animation effect.
Download Online Preview source code
Implementation code.
Html code:
<canvas class="canvas"></canvas> <div class="help"> ?</div> <div class="ui"> <input class="ui-input" type="text" /> <span class="ui-return">↵</span> </div> <div class="overlay"> <div class="tabs"> <div class="tabs-labels"> <span class="tabs-label">Commands</span><span class="tabs-label">Info</span><span class="tabs-label">Share</span></div> <div class="tabs-panels"> <ul class="tabs-panel commands"> <li class="commands-item"><span class="commands-item-title">Text</span><span class="commands-item-info" data-demo="Hello :)">Type anything</span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Countdown</span><span class="commands-item-info" data-demo="#countdown 10">#countdown<span class="commands-item-mode">number</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Time</span><span class="commands-item-info" data-demo="#time">#time</span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Rectangle</span><span class="commands-item-info" data-demo="#rectangle 30x15">#rectangle<span class="commands-item-mode">width x height</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item"><span class="commands-item-title">Circle</span><span class="commands-item-info" data-demo="#circle 25">#circle<span class="commands-item-mode">diameter</span></span><span class="commands-item-action">Demo</span></li> <li class="commands-item commands-item--gap"><span class="commands-item-title">Animate</span><span class="commands-item-info" data-demo="The time is|#time|#countdown 3|#icon thumbs-up"><span class="commands-item-mode">command1</span> |<span class="commands-item-mode">command2</span></span><span class="commands-item-action">Demo</span></li> </ul> <div class="tabs-panel ui-details"> <div class="ui-details-content">
Via: http://www.w2bc.com/Article/31144