Saya mengkodekan efek latar belakang biner berdenyut sederhana untuk situs web pribadi saya, dan saya ingin mendapatkan masukan tentang cara paling efisien untuk melakukan ini (saya cukup yakin metode saya sangat loyo dan bukan cara terbaik untuk melakukannya).

Tujuan akhir saya adalah menciptakan sesuatu yang kurang statis dan lebih mengalir bebas. Alih-alih memiliki daftar digit untuk berdenyut (seperti yang saya miliki saat ini), saya ingin semua digit memiliki kesempatan untuk berdenyut, tetapi mengulang melalui 25000 spans membutuhkan banyak sumber daya di sisi klien dan menciptakan beberapa lag yang tidak diinginkan.

Tujuan lain saya adalah untuk membuat angka jatuh seperti gravitasi yang bekerja pada mereka, seperti animasi gaya matriks :D

Setiap informasi tentang bagaimana membuat ini mungkin akan dihargai!

Kode dan JSFiddle diberikan: JSFiddle

document.write("<div id='binaryWrapper'>");
for (var i = 0; i < 25000; i++) {
    var digit = Math.round(Math.random());
    if (Math.random() > 0.03) {
        document.write("<span class='digit binaryDigit'>" + digit + "</span>");
    } else {
        document.write("<span class='digit binaryDigitColored'>" + digit + "</span>");
    } 
}
document.write("</div>");

var elements = document.getElementsByClassName("binaryDigitColored");
var staticElements = [];
for (var i = 0; i < elements.length; i++) {
    staticElements.push(elements[i]);
}
setInterval(function() {
    for (var i = 0; i < staticElements.length; i++) {
        if (Math.round(Math.random()) > 0.02) {
            staticElements[i].setAttribute("class", "binaryDigit");
        } else {
            var index = Math.round(Math.random() * (staticElements.length - 1));
            staticElements[index].removeAttribute("class", "binaryDigit");
            staticElements[index].setAttribute("class", "binaryDigitColored");
        }
    }
}, 500);
#binaryWrapper {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    word-wrap: break-word;
    z-index: -1;
    background-color: #000000;
}
.binaryDigit {
    color: #222222;
    transition: color 1s ease-in;
}
.binaryDigitColored {
    color:lightgreen;
    transition: color 1s ease-out;
}
0
Ethan Noble 5 April 2021, 10:43

2 jawaban

Jawaban Terbaik

Saya pikir Anda harus melihat kanvas js, ada banyak sumber daya online untuk mereka.

Jika Anda ingin belajar tentang pemrograman secara umum maka saya akan merekomendasikan Anda untuk mencoba dan melakukan ini menggunakan OOP, di mana setiap digit adalah objek instantiated. Itu akan memberikan beberapa struktur pada kode Anda.

Jika Anda hanya menginginkan solusi maka berikut adalah beberapa kode: http://jsfiddle.net/jnuas/vxnpu7y0/

var c = document.getElementById("c");
var ctx = c.getContext("2d");

//making the canvas full screen
c.height = window.innerHeight;
c.width = window.innerWidth;

//chararr 
var chararr = "0123456789";
//converting the string into an array of single characters
chararr = chararr.split("");

var font_size = 10;
var columns = c.width/font_size; //number of columns for the rain
//an array of drops - one per column
var drops = [];
//x below is the x coordinate
//1 = y co-ordinate of the drop(same for every drop initially)
for(var x = 0; x < columns; x++)
    drops[x] = 1; 

//drawing the characters
function draw()
{
    //Black BG for the canvas
    //translucent BG to show trail
    ctx.fillStyle = "rgba(0, 0, 0, 0.05)";
    ctx.fillRect(0, 0, c.width, c.height);
    
    ctx.fillStyle = "#0F0"; //green text
    ctx.font = font_size + "px arial";
    //looping over drops
    for(var i = 0; i < drops.length; i++)
    {
        //a random chararr character to print
        var text = chararr[Math.floor(Math.random()*chararr.length)];
        //x = i*font_size, y = value of drops[i]*font_size
        ctx.fillText(text, i*font_size, drops[i]*font_size);
        
        //sending the drop back to the top randomly after it has crossed the screen
        //adding a randomness to the reset to make the drops scattered on the Y axis
        if(drops[i]*font_size > c.height && Math.random() > 0.975)
            drops[i] = 0;
        
        //incrementing Y coordinate
        drops[i]++;
    }
}

setInterval(draw, 33);
0
Péter Szabó-tóth 5 April 2021, 08:28

Sepertinya Anda hanya membutuhkannya sebagai latar belakang dan tidak memerlukan pola atau urutan yang tepat untuk angka Anda,

Saya menemukan codepen animasi matriks yang cukup mudah dan bagus ini oleh Clive Cooper menggunakan kanvas, ini kode js-nya.

code in the snippet
// Initialising the canvas
    var canvas = document.querySelector('canvas'),
        ctx = canvas.getContext('2d');
    
    // Setting the width and height of the canvas
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
    
    // Setting up the letters
    var letters = 'ABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZABCDEFGHIJKLMNOPQRSTUVXYZ';
    letters = letters.split('');
    
    // Setting up the columns
    var fontSize = 10,
        columns = canvas.width / fontSize;
    
    // Setting up the drops
    var drops = [];
    for (var i = 0; i < columns; i++) {
      drops[i] = 1;
    }
    
    // Setting up the draw function
    function draw() {
      ctx.fillStyle = 'rgba(0, 0, 0, .1)';
      ctx.fillRect(0, 0, canvas.width, canvas.height);
      for (var i = 0; i < drops.length; i++) {
        var text = letters[Math.floor(Math.random() * letters.length)];
        ctx.fillStyle = '#0f0';
        ctx.fillText(text, i * fontSize, drops[i] * fontSize);
        drops[i]++;
        if (drops[i] * fontSize > canvas.height && Math.random() > .95) {
          drops[i] = 0;
        }
      }
    }
    
    // Loop the animation
    setInterval(draw, 33);
* {margin: 0; padding: 0}
body {background: #000;}
canvas {display: block;}
<canvas>
            
</canvas>

Terakhir, untuk menggunakannya sebagai latar belakang di halaman Anda, lihat ini

0
Dharman 5 April 2021, 08:54