Fading text

by hexzero

HTML

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./style.css" />
    <title>Answer</title>
  </head>
  <body>
    <nav></nav>
    <section>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae
        officia sapiente quidem suscipit. Tempora dignissimos sed doloremque
        reprehenderit numquam. Doloribus sapiente impedit culpa ea ducimus
        provident laborum error nihil repellendus! Delectus ipsam non ipsa
        tempora, molestias consequatur laudantium nobis! Quia natus doloremque
        ullam quibusdam, harum excepturi minus sit quas doloribus possimus
        molestiae, assumenda quo sunt repellendus fugiat sapiente ad ducimus
        dicta cumque quos iusto corporis ex modi cupiditate! Ex, provident.
        Praesentium quia totam ipsum inventore. Unde animi maxime, asperiores
        impedit aliquam repellendus eligendi est nemo pariatur laudantium
        magnam, quos blanditiis voluptatibus. Fugit doloribus corrupti nihil,
        quasi at laboriosam magni error quo ratione aliquam doloremque aperiam
        necessitatibus voluptates, dolorum vel explicabo. Porro deleniti
        laborum, rerum nisi, nihil magni ipsa tenetur exercitationem officiis
        nostrum a minima! Odit deserunt obcaecati debitis ab quasi dolorum
        recusandae assumenda magnam consequuntur mollitia rerum tempore dolorem
        neque autem hic porro similique itaque alias minus saepe iure, atque
        voluptatibus accusantium vel. Ipsam ea eligendi, velit quidem voluptas
        sit praesentium minus animi iure officia, explicabo eveniet laudantium
        et reiciendis reprehenderit quasi quos eum maiores, magnam ex cumque id
        accusamus commodi? Harum aliquid officia reprehenderit modi, a facere
        nam delectus optio consectetur aspernatur dolores nobis totam sint
        quisquam....

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background-image: black;
  background-position: center center;
  -webkit-background-size: cover;
  background-size: cover;
  background-attachment: fixed;
  color: #fff;
}

nav {
  background: rgba(0, 0, 0, 0.616);
  width: 100%;
  position: fixed;
  top: 0;
  height: 6rem;
  z-index: 4;
}

section {
  position: absolute;
  padding: 3rem 25%;
  background-image: Linear-gradient(
    transparent 6rem,
    #fff 30%,
    #fff 70%,
    transparent 90%
  );
  -webkit-background-clip: text;
  background-clip: text;
  background-attachment: fixed;
  scroll-behavior: auto;
  z-index: 3;
}

section > p {
  margin-top: 12rem;
  color: transparent;
}

.text-background {
  width: 60%;
  height: 100vh;
  right: 20%;
  position: fixed;
  top: 0;
  background-image: Linear-gradient(
    transparent 6rem,
    rgba(102, 51, 153, 0.924) 20%,
    rgba(102, 51, 153, 0.931) 90%,
    transparent 100%
  );
  z-index: 0;
}

canvas {
  width: 100%;
  background-color: rebeccapurple;
  position: fixed;
  top: 0;
  z-index: -1;
}

footer {
  position: fixed;
  width: 100%;
  height: 1rem;
  background: rebeccapurple;
  z-index: 1;
  bottom: 0;
}

p {
  font-size: 2rem;
}

JavaScript

var canvas = document.getElementById("canvas1");
var ctx = canvas.getContext("2d");
ctx.canvas.width = window.innerWidth;
ctx.canvas.height = window.outerHeight;
var particleArray;
function Particle(x, y, directionX, directionY, size, color) {
  this.x = x;
  this.y = y;
  this.directionX = directionX;
  this.directionY = directionY;
  this.size = size;
  this.color = color;
}
Particle.prototype.draw = function () {
  ctx.beginPath();
  ctx.arc(this.x, this.y, this.size, 0, Math.PI * 2, false);
  ctx.fillStyle = this.color;
  ctx.fill();
};
Particle.prototype.update = function () {
  if (this.x + this.size > canvas.width || this.x - this.size < 0) {
    this.directionX = -this.directionX;
  }
  if (this.y + this.size > canvas.width || this.y - this.size < 0) {
    this.directionY = -this.directionY;
  }
  this.x += this.directionX;
  this.y += this.directionY;
  this.draw();
};
function init() {
  particleArray = [];
  for (var i = 0; i < 200; i++) {
    var size = Math.random() * 10;
    var x = Math.random() * (innerWidth - size * 2);
    var y = Math.random() * (innerHeight - size * 2);
    var directionX = Math.random() * 2 - 0.4;
    var directionY = Math.random() * 1 - 0.4;
    var color = "white";
    particleArray.push(new Particle(x, y, directionX, directionY, size, color));
  }
}
function animate() {
  requestAnimationFrame(animate);
  ctx.clearRect(0, 0, innerWidth, innerHeight);
  for (var i = 0; i < particleArray.length; i++) {
    particleArray[i].update();
  }
}
init();
animate();
window.addEventListener("resize", function () {
  canvas.width = this.innerWidth;
  canvas.height = this.innerHeight;
  init();
});