Home HTML Javascript Tutorial Membuat Efek Matrix Background Menggunakan HTML dan Javascript

Membuat Efek Matrix Background Menggunakan HTML dan Javascript

by HEUSC Maret 04, 2018

Read

HTML Javascript Tutorial

Maret 04, 2018

Selamat malam, kali ini saya akan membagigan Cara Membuat Efek Matrix Background Menggunakan HTML dan Javascript.

Membuat Efek Matrix Background Menggunakan HTML dan Javascript

Biasanya kalian menggunakan background matrix pada blog atau HTML page menggunakan Image, nah kali ini saya akan berbagi Membuat Efek Matrix Background Menggunakan HTML dan Javascript

Berikut codenya :

<html>
    <head>
        <style>
            
            *{
                margin: 0;
                padding: 0;
            }
            
            body {background: black;}
            canvas {display:block;}
        
        </style>
    </head>
    <body>
    
        <canvas id="anampedia"></canvas>
        
        <script>
 
        var c = document.getElementById("anampedia");
        var ctx = c.getContext("2d");

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

        var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
        matrix = matrix.split("");

        var font_size = 10;
        var columns = c.width/font_size;

        var drops = [];

        for(var x = 0; x < columns; x++)
            drops[x] = 1; 

        function draw()
        {

            ctx.fillStyle = "rgba(0, 0, 0, 0.04)";
            ctx.fillRect(0, 0, c.width, c.height);

            ctx.fillStyle = "#0F0"; // ubah warna tulisan disini
            ctx.font = font_size + "px arial";

            for(var i = 0; i < drops.length; i++)
            {

                var text = matrix[Math.floor(Math.random()*matrix.length)];

                ctx.fillText(text, i*font_size, drops[i]*font_size);


                if(drops[i]*font_size > c.height && Math.random() > 0.975)
                    drops[i] = 0;
                drops[i]++;
            }
        }

        setInterval(draw, 35);

        </script>
    </body>
</html>

Copy Kenotepad lalu simpan dengan ekstensi .HTML, dan lihat hasilnya.
Oke sekian saja artikel singkat ini, semoga bermanfaat.

TAG : Membuat Matrix Background Munggunakan HTML dan Javascript, Matrix Backgorund, HTML Animated, Animasi HTML, ANimasi Javascript, Animasi Matrix