Particles write text

In this example below you will see how to do a Particles write text with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by plasm, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright plasm ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Particles write text</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <div class="title">
    <h3>A N O T H E R <strong>C O D E P E N</strong></h3>
  </div>
  <div class="more-pens">
    <a target="_blank" href="https://codepen.io/plasm/" class="white-mode">VIEW OTHER PENS</a>
    <a target="_blank" href="https://codepen.io/collection/nZpPbz/" class="white-mode">VIEW OTHER PARTICLES</a>
  </div>
  <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/plasm/particles-write-text-zwjMPy */
@import url("https://fonts.googleapis.com/css?family=Montserrat:200,300,400,600");
.more-pens {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 10;
  font-family: "Montserrat";
  font-size: 12px;
}

a.white-mode, a.white-mode:link, a.white-mode:visited, a.white-mode:active {
  font-family: "Montserrat";
  font-size: 12px;
  text-decoration: none;
  background: #212121;
  padding: 4px 8px;
  color: #f7f7f7;
}
a.white-mode:hover, a.white-mode:link:hover, a.white-mode:visited:hover, a.white-mode:active:hover {
  background: #edf3f8;
  color: #212121;
}

body {
  margin: 0;
  padding: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  background: #111111;
}

.title {
  z-index: 10;
  position: absolute;
  left: 50%;
  top: 50%;
  height: 250px;
  transform: translateX(-50%) translateY(-50%);
  font-family: "Montserrat";
  text-align: center;
  width: 100%;
}
.title h3 {
  position: absolute;
  bottom: 0;
  width: 100%;
  text-align: center;
  font-weight: 200;
  font-size: 20px;
  padding: 0;
  margin: 0;
  line-height: 1;
  color: #EEEEEE;
  letter-spacing: 2px;
}


/*Downloaded from https://www.codeseek.co/plasm/particles-write-text-zwjMPy */
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var particles = [];
var frequency = 20;
// Popolate particles
setInterval(function () {
  popolate();
}.bind(this), frequency);

var c1 = createCanvas({ width: $(window).width(), height: $(window).height() });
var c2 = createCanvas({ width: $(window).width(), height: $(window).height() });
var c3 = createCanvas({ width: $(window).width(), height: $(window).height() });

var tela = c1.canvas;
var canvas = c1.context;

// $("body").append(tela);
$("body").append(c3.canvas);
writeText(c2.canvas, c2.context, "PARTICLES\nWRITE\nTEXT");

var Particle = function () {
  function Particle(canvas, options) {
    _classCallCheck(this, Particle);

    var random = Math.random();
    this.canvas = canvas;
    this.x = options.x;
    this.y = options.y;
    this.s = 3 + Math.random();
    this.a = 0;
    this.w = $(window).width();
    this.h = $(window).height();
    this.radius = 0.5 + Math.random() * 20;
    this.color = this.radius > 5 ? "#FF5E4C" : "#ED413C"; //this.randomColor()
  }

  _createClass(Particle, [{
    key: "randomColor",
    value: function randomColor() {
      var colors = ["#FF5E4C", "#FFFFFF"];
      return colors[this.randomIntFromInterval(0, colors.length - 1)];
    }
  }, {
    key: "randomIntFromInterval",
    value: function randomIntFromInterval(min, max) {
      return Math.floor(Math.random() * (max - min + 1) + min);
    }
  }, {
    key: "render",
    value: function render() {
      this.canvas.beginPath();
      this.canvas.arc(this.x, this.y, this.radius, 0, 2 * Math.PI);
      this.canvas.lineWidth = 2;
      this.canvas.fillStyle = this.color;
      this.canvas.fill();
      this.canvas.closePath();
    }
  }, {
    key: "move",
    value: function move() {
      //this.swapColor()
      this.x += Math.cos(this.a) * this.s;
      this.y += Math.sin(this.a) * this.s;
      this.a += Math.random() * 0.8 - 0.4;

      if (this.x < 0 || this.x > this.w - this.radius) {
        return false;
      }

      if (this.y < 0 || this.y > this.h - this.radius) {
        return false;
      }
      this.render();
      return true;
    }
  }]);

  return Particle;
}();

function createCanvas(properties) {
  var canvas = document.createElement('canvas');
  canvas.width = properties.width;
  canvas.height = properties.height;
  var context = canvas.getContext('2d');
  return {
    canvas: canvas,
    context: context
  };
}

function writeText(canvas, context, text) {
  var size = 100;
  context.font = size + "px Montserrat";
  context.fillStyle = "#111111";
  context.textAlign = "center";
  var lineheight = 70;
  var lines = text.split('\n');
  for (var i = 0; i < lines.length; i++) {
    context.fillText(lines[i], canvas.width / 2, canvas.height / 2 + lineheight * i - lineheight * (lines.length - 1) / 3);
  }
}

function maskCanvas() {
  c3.context.drawImage(c2.canvas, 0, 0, c2.canvas.width, c2.canvas.height);
  c3.context.globalCompositeOperation = 'source-atop';
  c3.context.drawImage(c1.canvas, 0, 0);
  blur(c1.context, c1.canvas, 2);
}

function blur(ctx, canvas, amt) {
  ctx.filter = "blur(" + amt + "px)";
  ctx.drawImage(canvas, 0, 0);
  ctx.filter = 'none';
}

/*
 * Function to clear layer canvas
 * @num:number number of particles
 */
function popolate() {
  particles.push(new Particle(canvas, {
    x: $(window).width() / 2,
    y: $(window).height() / 2
  }));
  return particles.length;
}

function clear() {
  canvas.globalAlpha = 0.03;
  canvas.fillStyle = '#111111';
  canvas.fillRect(0, 0, tela.width, tela.height);
  canvas.globalAlpha = 1;
}

function update() {
  clear();
  particles = particles.filter(function (p) {
    return p.move();
  });
  maskCanvas();
  requestAnimationFrame(update.bind(this));
}

update();

Comments