Are you looking to create an eye-catching Matrix-style effect for your website or project? With a bit of JavaScript, HTML5 Canvas, and CSS, you can build an engaging animation that simulates the iconic digital rain from The Matrix movie. In this blog post, we’ll walk you through the steps to achieve this, using the code provided below.

Matrix Screen Effect with Html Css Javascript

Overview of the Effect

This project combines:

  • A Matrix-style digital rain animation created using the HTML5 <canvas> element.
  • A “Welcome” message animation where letters appear dynamically in a visually pleasing way.
  • A start button that initiates the effect with a smooth fade-out.

When users click the “Enter the Matrix” button, they are greeted with cascading green text that mimics the digital rain seen in The Matrix. After a few seconds, a “Welcome” message fades into view, letter by letter.

The Code Breakdown

1. HTML Structure

The HTML is straightforward. It includes:

  • A <button> to start the animation.
  • A <canvas> element to draw the Matrix effect.
  • A <div> to display the animated “Welcome” message.
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Enter the Matrix</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background: #051e09;
            font-family: Arial, sans-serif;
        }
        #startButton {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            padding: 15px 30px;
            background: #0a3c1b;
            color: lime;
            border: 2px solid lime;
            font-size: 50px;
            cursor: pointer;
            text-transform: uppercase;
            transition: .3s all ease;
            z-index: 10;
        }
        #startButton:hover {
            background: lime;
            color: #0a3c1b;
            padding: 20px 35px;
        }
        canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        #welcomeMessage {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: lime;
            font-size: 5rem;
            text-transform: uppercase;
            text-shadow: 0 0 10px lime, 0 0 20px lime;
            display: flex;
            gap: 0.5rem;
            z-index: 5;
        }
        .welcome-letter {
            opacity: 0.4;
        }
    </style>
</head>
<body>
    <button id="startButton">Enter the Matrix</button>
    <canvas id="matrix"></canvas>
    <div id="welcomeMessage"></div>

    <script>
        // Code goes here
    </script>
</body>
</html>

2. CSS Styling

The styling creates a dark, immersive background and positions the button and “Welcome” message at the center of the screen. The button has a hover effect for better user interaction.

3. JavaScript Functionality

The JavaScript contains three main functionalities:

a) Matrix Effect

The digital rain is simulated using a combination of:

  • A string of characters (letters and numbers).
  • Columns represented as falling streams of text.
  • A draw function that updates the canvas at regular intervals.
const canvas = document.getElementById('matrix');
const ctx = canvas.getContext('2d');
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;

const letters = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";
const fontSize = 16;
const columns = canvas.width / fontSize;
const drops = Array.from({ length: columns }).fill(1);

function draw() {
    ctx.fillStyle = 'rgba(0, 0, 0, 0.05)';
    ctx.fillRect(0, 0, canvas.width, canvas.height);

    ctx.fillStyle = 'lime';
    ctx.font = `${fontSize}px monospace`;

    drops.forEach((y, index) => {
        const text = letters[Math.floor(Math.random() * letters.length)];
        const x = index * fontSize;
        ctx.fillText(text, x, y * fontSize);

        if (y * fontSize > canvas.height && Math.random() > 0.975) {
            drops[index] = 0;
        }
        drops[index]++;
    });
}
setInterval(draw, 50);

b) Welcome Message Animation

This function reveals each letter of “WELCOME” dynamically, creating a suspenseful effect:

const welcomeText = "WELCOME";

function revealWelcomeLetter(index) {
    return new Promise((resolve) => {
        const letterElement = document.createElement('span');
        welcomeMessage.appendChild(letterElement);

        let currentLetter = '';
        const interval = setInterval(() => {
            currentLetter = letters[Math.floor(Math.random() * letters.length)];
            letterElement.textContent = currentLetter;
        }, 80);

        setTimeout(() => {
            clearInterval(interval);
            letterElement.textContent = welcomeText[index];
            letterElement.style.opacity = 1;
            resolve();
        }, 800);
    });
}

async function revealWelcomeText() {
    for (let i = 0; i < welcomeText.length; i++) {
        await revealWelcomeLetter(i);
    }
}

c) Start Button

The button fades out when clicked, initiating the Matrix animation and, after a delay, the “Welcome” message.

const startButton = document.getElementById('startButton');

startButton.addEventListener('click', () => {
    startButton.style.opacity = 1;
    const fadeOut = setInterval(() => {
        startButton.style.opacity -= 0.05;
        if (startButton.style.opacity <= 0) {
            clearInterval(fadeOut);
            startButton.style.display = 'none';
            setInterval(draw, 50);
            setTimeout(() => {
                revealWelcomeText();
            }, 5000);
        }
    }, 50);
});

Customizing the Effect

You can tweak the following parameters to make the effect your own:

  • Font Size: Adjust fontSize for larger or smaller text.
  • Animation Speed: Change the interval timing in setInterval(draw, 50).
  • Welcome Text: Replace “WELCOME” with your desired text.

Conclusion

With just a few lines of code, you can create a mesmerizing Matrix-inspired animation for your website. This project demonstrates the power of HTML5 Canvas combined with JavaScript and CSS to deliver engaging visual experiences. Feel free to modify the code to suit your project and share your creative versions!

Categorized in:

Yazılım,