Create a Star Wars-Like Crawl Using CSS & JavaScript

// stars.js

// Get canvas element by its ID
var field = document.getElementById("field");

// Make sure field canvas exists
var f = (typeof field.getContext === 'function') ? field.getContext("2d") : null;

// Config
var stars = {};
var starIndex = 0;
var numStars = 0;
var acceleration = 1;
var starsToDraw = (field.width * field.height) / 200;

function Star() {
    this.X = field.width / 2;
    this.Y = field.height / 2;

    this.SX = Math.random() * 10 - 5;
    this.SY = Math.random() * 10 - 5;

    var start = 0;

    if (field.width > field.height)
        start = field.width;
    else
        start = field.height;

    this.X += this.SX * start / 10;
    this.Y += this.SY * start / 10;

    this.W = 1;
    this.H = 1;

    this.age = 0;
    this.dies = 500;

    starIndex++;
    stars[starIndex] = this;

    this.ID = starIndex;
    this.C = "#ffffff";
}

Star.prototype.Draw = function () {
    if (!f) {
        console.log('Could not load canvas element');
        return;
    }
    this.X += this.SX;
    this.Y += this.SY

    this.SX += this.SX / (50 / acceleration);
    this.SY += this.SY / (50 / acceleration);

    this.age++;

    if (this.age == Math.floor(50 / acceleration) | this.age == Math.floor(150 / acceleration) | this.age == Math.floor(300 / acceleration)) {
        this.W++;
        this.H++;
    }

    if (this.X + this.W < 0 | this.X > field.width |
        this.Y + this.H < 0 | this.Y > field.height) {
        delete stars[this.ID];
        numStars--;
    }

    f.fillStyle = this.C;
    f.fillRect(this.X, this.Y, this.W, this.H);
}

field.width = window.innerWidth;
field.height = window.innerHeight;

function draw() {
    if (!f) {
        console.log('Could not load canvas element');
        return;
    }

    if (field.width != window.innerWidth)
        field.width = window.innerWidth;
    if (field.height != window.innerHeight)
        field.height = window.innerHeight;

    // The alpha value can be adjusted to create a stream effect
    f.fillStyle = "rgba(0, 0, 0, 0.6)";

    f.fillRect(0, 0, field.width, field.height);

    for (var i = numStars; i < starsToDraw; i++) {
        new Star();
        numStars++;
    }

    for (var star in stars) {
        stars[star].Draw();
    }
}

// Modify interval to adjust speed
if (f) setInterval(draw, 40);

/* global.css */

body {
    margin: 0;
    padding: 0;
    background-color: black;
}

main {
    width: 100vw;
    height: 100vh;
}

#field {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -3;
}

#crawl {
    position: fixed;
    top: 0;
    bottom: 0;
    z-index: -2;
    font-family: Deathstar, Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    color: white;
    font-size: 4rem;
    perspective: 200px;
}

#crawl p {
    transform: rotateX(20deg);
    animation: starwars 30s ease-in;
    animation-iteration-count: infinite;
    margin: 0 auto;
}

#crawl p span {
    font-size: 150%;
}

#overlay {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: -1;
    background-color: rgba(0, 0, 0, 0.4);
}

@keyframes starwars {
    0% {
        transform: rotateX(20deg) translateY(750px);
    }

    100% {
        transform: rotateX(20deg) translateY(-1500px);
    }
}

@keyframes starwars1200 {
    0% {
        transform: rotateX(20deg) translateY(565px);
    }

    100% {
        transform: rotateX(20deg) translateY(-1500px);
    }
}

@media only screen and (max-width: 1200px) {
    #crawl {
        font-size: 1rem;
    }

    #crawl p {
        animation: starwars1200 30s ease-in;
    }
}

@font-face {
    font-family: 'Deathstar';
    font-style: normal;
    font-weight: 100;
    font-display: swap;
    src: url('https://cdn.designly.biz/fonts/deathstar/death_star-webfont.eot');
    src: local(''),
        url('https://cdn.designly.biz/fonts/deathstar/death_star-webfont.eot?#iefix') format('embedded-opentype'),
        url('https://cdn.designly.biz/fonts/deathstar/death_star-webfont.woff2') format('woff2'),
        url('https://cdn.designly.biz/fonts/deathstar/death_star-webfont.woff') format('woff'),
        url('https://cdn.designly.biz/fonts/deathstar/deathstar.otf') format('opentype'),
        url('https://cdn.designly.biz/fonts/deathstar/death_star-webfont.svg') format('svg');
}

<html lang="en">

<head>
    <meta name="robots" content="index, follow" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes" />
    <link rel="stylesheet" href="css/global.css" />
</head>

<body>
    <main>
        <canvas id="field"></canvas>
        <div id="crawl">
            <p>
                <span>Episode IV</span>
                <br /><br />
                A New Hope
                <br /><br />
                It is a period of civil war.
                Rebel spaceships, striking
                from a hidden base, have won
                their first victory against
                the evil Galactic Empire.
                <br /><br />
                During the battle, Rebel
                spies managed to steal secret
                plans to the Empire's
                ultimate weapon, the DEATH
                STAR, an armored space
                station with enough power to
                destroy an entire planet.
                <br /> <br />
                Pursued by the Empire's
                sinister agents, Princess
                Leia races home aboard her
                starship, custodian of the
                stolen plans that can save
                her people and restore
                freedom to the galaxy....
            </p>
        </div>
        <div id="overlay"></div>
    </main>
</body>

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

</html>