Binary Rain
How do I make an binary rain?
Based on the popular 'Matrix Rain' effect, Binary Rain is a series of one's and zero's falling from a cloud. This is a Pure CSS Image that uses jQuery for the animation.. What is a binary rain? How do you make a binary rain? This script and codes were developed by Kenneth Alvares on 06 December 2022, Tuesday.
Binary Rain - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Binary Rain</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <link href="https://fonts.googleapis.com/css?family=Roboto+Mono" rel="stylesheet">
<body> <div class="box"> <center> <span class="frame" id="frame-1"> <span class="title">Binary Rain</span> </span> </center> <div class="oblong"></div> <div class="circle-1"></div> <div class="circle-2"></div> <div class="circle-3"></div> <div class="oblong-copy"></div> <div class="circle-2-copy"></div> <div class="circle-3-copy"></div> <div class="rain" id="rain-1"> 0<span class="glow">1</span>010 <br/> 1010<span class="glow">1</span> <br/> <span class="glow">0</span>1010 <br/> 10<span class="glow">1</span>01 <br/> 0101<span class="glow">0</span> <br/> <span class="glow">1</span>0101 <br/> 010<span class="glow">1</span>0 <br/> 1<span class="glow">0</span>101 <br/> 01010 <br/> 10101 <br/> 010<span class="glow">1</span>0 </div> <div class="rain" id="rain-2"> 010<span class="glow">1</span>0 <br/> 1<span class="glow">0</span>101 <br/> 0101<span class="glow">0</span> <br/> <span class="glow">1</span>0101 <br/> 01<span class="glow">0</span>10 <br/> 1010<span class="glow">1</span> <br/> <span class="glow">0</span>1010 <br/> 101<span class="glow">0</span>1 <br/> 0<span class="glow">1</span>010 <br/> 10101 <br/> 01010 </div> <div class="rain" id="rain-3"> 01010 <br/> 101<span class="glow">0</span>1 <br/> 0<span class="glow">1</span>010 <br/> 1010<span class="glow">1</span> <br/> <span class="glow">0</span>1010 <br/> 10<span class="glow">1</span>01 <br/> 0101<span class="glow">0</span> <br/> <span class="glow">1</span>0101 <br/> 010<span class="glow">1</span>0 <br/> 1<span class="glow">0</span>101 <br/> 01010 </div> </div>
</body> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
Binary Rain - Script Codes CSS Codes
body { background: #1d2d47;
}
.box { position: relative; margin: 0 auto; height: 210px; width: 300px; background: none;
}
.oblong { position: relative; width: 70%; height: 15%; background: #D1E0FF; left: 15%; top: 55%; border-radius: 500px;
}
.circle-1 { position: relative; height: 35%; width: 25%; background: #D1E0FF; border-radius: 50%; top: 20%; left: 23%;
}
.circle-2 { position: relative; height: 40%; width: 27%; background: #D1E0FF; border-radius: 50%; top: -30%; left: 37%;
}
.circle-3 { position: relative; height: 25%; width: 20%; background: #D1E0FF; border-radius: 50%; top: -53%; left: 57%;
}
.oblong-copy { position: relative; width: 60%; height: 10%; background: #96ADD9; left: 29%; top: -65%; border-radius: 500px; z-index: -1;
}
.circle-2-copy { position: relative; height: 20%; width: 17%; background: #96ADD9; border-radius: 50%; top: -100%; left: 55%; z-index:-1;
}
.circle-3-copy { position: relative; height: 20%; width: 15%; background: #96ADD9; border-radius: 50%; top: -110%; left: 65%; z-index: -1;
}
.rain { top: -93%; left: 25%; position: relative; background: none; width: 100%; height: 100%; color: #D1E0FF; font-family: 'Roboto Mono', monospace; font-size: 16px; letter-spacing: 25px; line-height: 30px
}
.title { color: #D1E0FF; font-family: 'Roboto Mono', monospace; font-size: 3em; letter-spacing: 25px;
}
.glow { text-shadow: 0 0 5px #fff; font-weight: 900;
}
.frame { text-align: center; position: relative; left: 0;
}
Binary Rain - Script Codes JS Codes
$( document ).ready(function() { var currentIndex = 0;
$(".rain:not(:eq("+ currentIndex +"))").hide();
var totalDiv = $(".rain").length;
setInterval(function(){ currentIndex = (currentIndex + 1) % totalDiv; $(".rain").hide(); $(".rain").eq(currentIndex).show();
},300);
});
Developer | Kenneth Alvares |
Username | kenalvares |
Uploaded | December 06, 2022 |
Rating | 3 |
Size | 2,528 Kb |
Views | 8,096 |
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!
Name | Size |
Fidget Spinner | 2,305 Kb |
Super Nintendo | 2,304 Kb |
Koala | 2,745 Kb |
Stuart the Minion | 2,828 Kb |
Pure CSS iPhone 5S | 3,689 Kb |
Bookshelf | 1,916 Kb |
Tupac Shakur - PureCSS Tribute | 5,313 Kb |
Newspaper - Intermediate PureCSS | 2,437 Kb |
Responsive Grid Using Bootstrap | 1,927 Kb |
Bruce Lee | 4,145 Kb |
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!
Name | Username | Size |
BenU Maintenance Site | Ksherman | 4,893 Kb |
Gradient-ui-button-mark-fx | Tabspace | 1,881 Kb |
Direction-icon | Alexandremasy | 3,323 Kb |
JQuery FullScreen Overlay | _codemics | 2,252 Kb |
Custom Checkbox and radio inputs SCSS | Rgfx | 3,367 Kb |
Awesome | Samarthpd | 2,901 Kb |
Heatmap Color Scales | Stevepepple | 2,331 Kb |
The Fly | GianlucaGuarini | 3,405 Kb |
A Pen by boilzzz | Boilzzz | 2,761 Kb |
TigerWoods Freecodecamp Page | Baileytj | 2,869 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!