HTML5 Canvas Flame Text Animation Effects

HTML5 Canvas Flame Text Animation Effects: BY Edward12 Jan,2021; Tags:
HTML5 Animation HTML5 Canvas CreateJS Text Effects

Introduction

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.

HTML5 Canvas Flame Text Animation Effects

Instructions

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;
}

VIEW NOW