Matrix Digital Rain

Developer
Sam Seay
Size
2,393 Kb
Views
8,096
  1. Matrix Digital Rain Previews
  2. Matrix Digital Rain HTML Codes
  3. Matrix Digital Rain CSS Codes
  4. Matrix Digital Rain JS Codes

How do I make an matrix digital rain?

Just playing around with making something similar to the digital rain in the matrix. All in the name of fun :). What is a matrix digital rain? How do you make a matrix digital rain? This script and codes were developed by Sam Seay on 07 January 2023, Saturday.

Matrix Digital Rain Previews
IQ Test

Matrix Digital Rain - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Matrix Digital Rain</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="rain1"> <div class="rain2"> <div class="rain3"> <div class="rain4"> <div class="rain5"> </div> </div> </div> </div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Matrix Digital Rain - Script Codes CSS Codes

body { background-color: black;
}
.digital-rain { position: relative; top -50px; word-wrap: break-word; float: left; width: 10px; color: green; line-height: 10px; font-size: 15px;
}
.light { color: lightgreen;
}
.speed1 { animation: rain 8s linear infinite; -moz-animation: rain 8s linear infinite; /* Firefox */ -webkit-animation: rain 8s linear infinite; /* Safari and Chrome*/ -o-animation: rain 8s linear infinite; /* Opera */
}
.speed2 { animation: rain 6s linear infinite; -moz-animation: rain 6s linear infinite; /* Firefox */ -webkit-animation: rain 6s linear infinite; /* Safari and Chrome*/ -o-animation: rain 6s linear infinite; /* Opera */
}
.speed3 { animation: rain 4s linear infinite; -moz-animation: rain 4s linear infinite; /* Firefox */ -webkit-animation: rain 4s linear infinite; /* Safari and Chrome*/ -o-animation: rain 4s linear infinite; /* Opera */
}
.speed4 { animation: rain 3s linear infinite; -moz-animation: rain 3s linear infinite; /* Firefox */ -webkit-animation: rain 3s linear infinite; /* Safari and Chrome*/ -o-animation: rain 3s infinite; /* Opera */
}
.speed5 { animation: rain 2s linear infinite; -moz-animation: rain 2s linear infinite; /* Firefox */ -webkit-animation: rain 2s linear infinite; /* Safari and Chrome*/ -o-animation: rain 2s linear infinite; /* Opera */
}
@keyframes rain { from {top: -350px; } to {top: 350px;}
}
@-moz-keyframes rain { from {top: -350px;} to {top: 350px;}
}
@-webkit-keyframes rain { from {top: -350px; } to {top: 350px; }
}
@-o-keyframes rain { from {top: -350px;} to {top: 350px; }
}

Matrix Digital Rain - Script Codes JS Codes

var charsArray = ['ч','а','щ','а','х','ю','г','а','ж','и','л', 'б','ы','ц','и','т','р','у','с','Д','а','н','о','ф','а','л','ь','ш','и','в','ы','й','э','к','з','е','м','п','л','я','р'];
var randStringArray = [];
var randString;
var charLimit;
for ( var i = 0; i < 100; i++ ) { charLimit = Math.floor(Math.random() * 55) + 1; for ( var j = 0; j < charLimit; j++ ) { randString += charsArray[Math.floor(Math.random() * 15) + 1]; } randStringArray.push(randString); randString = "";
}
for ( var l = 0; l < 250; l++ ) { var el = $('<p class="digital-rain">'+ randStringArray[Math.floor(Math.random() * randStringArray.length)] + '</p>'); var className = "speed" + ( Math.floor(Math.random() * 5) + 1 ); el.addClass(className); el.css("margin-top","-" + Math.floor(Math.random() * 30) + "px"); $(".rain" + ( Math.floor(Math.random() * 4) + 1 )).append(el);
}
Matrix Digital Rain - Script Codes
Matrix Digital Rain - Script Codes
Home Page Home
Developer Sam Seay
Username samueljseay
Uploaded January 07, 2023
Rating 3
Size 2,393 Kb
Views 8,096
Do you need developer help for Matrix Digital Rain?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Sam Seay (samueljseay) Script Codes
Name
CSS3 Rainbow Wheel
UIkit date time sandbox
Bootstrap Template
A Pen by Sam Seay
Magazine Cover
CSS3 keyframe onload animation.
Create amazing video scripts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!