Text effect

  <div class="intro v-center">
    <div>
    <p class="typer">cyberpunk 2077</p>
  </div>
    </div>
  <canvas id="canvas" width="2600" height="900"></canvas> 

html {
  background: #000;
}

body {
  overflow: hidden;
}

canvas {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: 0;
}

.intro {
  font-family: "Orbitron", sans-serif;
  margin: 0 auto;
  position: relative;
  z-index: 2;
  display: table;
  width: 100%;
}

p.typer {
  display: table;
  text-align: center;
  vertical-align: middle;
  margin: 0 auto;
  padding: 15% 0;
  font-size: 3em;
  line-height: 3em;
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

i {
  display: inline-block;
  font-style: normal;
  padding: 0 0.25em;
  -webkit-transform: scale(0);
  -moz-transform: scale(0);
  -ms-transform: scale(0);
  -o-transform: scale(0);
  transform: scale(0);
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}
i.fly-in-out {
  color: rgba(255, 255, 255, 0.9);
  -webkit-animation: fly-in-out 4s infinite ease-in-out;
  -moz-animation: fly-in-out 4s infinite ease-in-out;
  animation: fly-in-out 4s infinite ease-in-out;
}

@-webkit-keyframes fly-in-out {
  0% {
    -webkit-transform: scaleY(-3) translate3d(0, -300%, 0);
  }
  15%, 45% {
    color: rgba(255, 255, 255, 0.8);
    -webkit-transform: scaleZ(1) translate3d(0, 10%, 0);
  }
  100% {
    color: rgba(236, 243, 186, 0.2);
    /* Come Closer */
    /* Fade Up */
    -webkit-transform: scale3d(9);
  }
}
@-moz-keyframes fly-in-out {
  0% {
    -moz-transform: scaleY(-3) translate3d(0, -300%, 0);
  }
  15%, 45% {
    color: rgba(255, 255, 255, 0.8);
    -moz-transform: scaleZ(1) translate3d(0, 10%, 0);
  }
  100% {
    color: rgba(236, 243, 186, 0.2);
    /* Come Closer */
    /* Fade Up */
    -moz-transform: scale3d(9);
  }
}
@keyframes fly-in-out {
  0% {
    -webkit-transform: scaleY(-3) translate3d(0, -300%, 0);
    -moz-transform: scaleY(-3) translate3d(0, -300%, 0);
    -ms-transform: scaleY(-3) translate3d(0, -300%, 0);
    -o-transform: scaleY(-3) translate3d(0, -300%, 0);
    transform: scaleY(-3) translate3d(0, -300%, 0);
  }
  15%, 45% {
    color: rgba(255, 255, 255, 0.8);
    -webkit-transform: scaleZ(1) translate3d(0, 10%, 0);
    -moz-transform: scaleZ(1) translate3d(0, 10%, 0);
    -ms-transform: scaleZ(1) translate3d(0, 10%, 0);
    -o-transform: scaleZ(1) translate3d(0, 10%, 0);
    transform: scaleZ(1) translate3d(0, 10%, 0);
  }
  100% {
    color: rgba(236, 243, 186, 0.2);
    /* Come Closer */
    /* Fade Up */
    -webkit-transform: scale3d(9);
    -moz-transform: scale3d(9);
    -ms-transform: scale3d(9);
    -o-transform: scale3d(9);
    transform: scale3d(9);
  }
}

//Text Animation
var paragraph = document.getElementsByTagName('p')[0];

function textEffect(animationName) {
  var text = paragraph.innerHTML,
		chars = text.length,
		newText = '',
		animation = animationName,
		char,
		i;

	for (i = 0; i < chars; i += 1) {
		newText += '<i>' + text.charAt(i) + '</i>';
	}

	paragraph.innerHTML = newText;

	var wrappedChars = document.getElementsByTagName('i'),
		wrappedCharsLen = wrappedChars.length,
		j = 0;

	function addEffect () {
		setTimeout(function () {
			wrappedChars[j].className = animation;
			j += 1;
			if (j < wrappedCharsLen) {
				addEffect();
			}
		}, 100)
	}

	addEffect();
};

textEffect('fly-in-out');

//Space
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

var DeepSpace = function(size, number, speed)
{
  this.size = size;
	this.number = number;
	this.speed = speed;
	this.objects = new Array();

	this.initialize = function()
	{
		this.creationImage();
		this.drawCircle();
		this.animate();
	}

	this.creationImage = function()
	{
		for(var i = 0; i < this.number; i++)
		{
			var star = {
				'x' : Math.random()*2000,
				'y' : Math.random()*900,
				'radius' : Math.random()*this.size+1,
			}
			this.objects.push(star);
		}
	}

	this.drawCircle = function(x, y, radius)
	{
		with(ctx)
		{
			beginPath();
			arc(x, y, radius, 0, 2*Math.PI);
			fillStyle = 'white';
			fill();
			stroke();
			closePath();
		}
	}

	this.animate = function()
	{
		for(var j in this.objects)
		{
			var x = this.objects[j].x--;
			var y = this.objects[j].y;
			var radius = this.objects[j].radius;
      
      if(x < -2) this.objects[j].x = 2000;

			this.drawCircle(x, y, radius);
      
		}
	}
  
  setInterval(this.animate.bind(this), this.speed);
}

var space = new DeepSpace(0.1, 1000, 2);
space.initialize();
var space = new DeepSpace(.7, 1000, 3);
space.initialize();
var space = new DeepSpace(1.5, 10, 1);
space.initialize();