HTML5 technology is really quite powerful, especially Canvas canvas is to make web animation become colorful. Today we are sharing a HTML5 Canvas based flame text animation effect, which can make dense flames appear above any text, as if the text is burning.
Advertisement
function init() { canvas = document.getElementById("canvas"); exportRoot = new lib.Text3(); canvas.width = window.innerWidth; canvas.height = window.innerHeight; stage = new createjs.Stage(canvas); createjs.Touch.enable(stage); stage.addChild(exportRoot); stage.update(); hello = exportRoot.hello; stage.on("stagemousedown", handleClick, this); container = new createjs.Container(); exportRoot.addChild(container); createjs.Ticker.timingMode = createjs.Ticker.RAF; createjs.Ticker.on("tick", onTick); handleResize(); window.addEventListener("resize", handleResize); createjs.Tween.get(this).wait(1000).call(function() { handleClick() }) }
html, body { margin:0px; padding:0px; background-color:#000000; } #logo { position: absolute; right:0px; bottom:0px; } canvas { background-color:#000000; left: 0; }
Advertisement