HOME  >   HTML5 CANVAS  >   HTML5 Canvas Flame Text Animation Effects
HTML5 Canvas Flame Text Animation Effects
BY Edward12 Jan,2021
Tags:

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

HTML5 Canvas Flame Text Animation Effects
HTML Body Code
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()
  })
  
}                        
Css Code
html, body {
  margin:0px;
  padding:0px;
  background-color:#000000;
}

#logo { 
	position: absolute;
  right:0px;
  bottom:0px;
}

canvas {
  background-color:#000000;
  left: 0;
}                        

Advertisement