jQuery plugin to achieve code rain effect

This article shares the specific code of the jQuery plug-in to achieve the code rain special effect for your reference. The specific content is as follows

Code Rain Effect

Provides a general idea. Although the effect is different from the target, it is easy to learn from it and change it to the corresponding effect.

The effect is as follows

Code section

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Make a code rain</title>
  <script src="js/jquery-3.4.1.min.js"></script>
  <style>
   *{
    margin: 0px;
    padding: 0px;
    user-select:none;
   }
   #div{
    position: fixed;
    top: 0px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    background-color: black;
    z-index: 1;
   }
   .item{
    font-size: 12px;
    position: absolute;
    top: 0px;
    bottom: 0px;
    color: #2ecc71;
    -webkit-writing-mode:vertical-lr;
    /* animation: down 0.9s linear; */
   }
   /* Draw animation frame */
   @keyframes down{
    from{}
    to{
     opacity: 0;
     top: 100%;
    }
   }
  </style>
 </head>
 <body>
  <div id="div">
  </div>
 </body>
</html>
<script>
 var count = 15 // How many records are generated each time var time = 200 // Refresh interval var num = 15 // How many characters are generated at most var span = 1000 // Duration of animation effect for each data var tdown = 900 // How long does each animation last at most $(document).ready(function(){
  setInterval(function(){
   for(var i = 0;i<count;i++){
    var str = getchar(num) // Randomly generate garbled characters drawitem(str) // Randomly generate dom, and then give animation effect }
  },time)
 })
 function drawitem(str){
  var op = parseFloat((Math.random()*1).toFixed(2)); //initial transparency var top = Math.floor(Math.random()*100) //initial height var left = Math.floor(Math.random()*100) //initial left distance var $item = $("<div class='item'>"+str+"</div>");
  $item.appendTo($("#div"));
  var tspan = parseFloat(Math.floor(Math.random()*tdown)/1000)
  tspan=tspan<=0.5?0.5:tspan
  $item.css({
   'top':top+'%',
   'left':left+'%',
   'opacity':op,
   'animation':'down '+tspan+'s linear'
  })
  
  setTimeout(function(){
   $item.remove();
  },span)
 }
 function getchar(num){//Generate a bunch of random characters num=num==undefined?1:Math.floor(Math.random()*num);
  var str = "";
  for(var i = 0;i<num;i++){
   var n = Math.floor(Math.random()*256)
   n =String.fromCharCode(n);
   str+=n;
  }
  return str;
 }
</script>

Explanation of ideas

There are comments in the code

The above is the full content of this article. I hope it will be helpful for everyone’s study. I also hope that everyone will support 123WORDPRESS.COM.

You may also be interested in:

JS+CSS+HTML realizes "code rain" similar to the falling effect of text in The Matrix
HTML+JS realizes the source code of "code rain" effect (the Matrix text falling effect)
Sample code for creating your own digital rain avatar with canvas+gif.js

<<: Detailed analysis of replication in Mysql

>>: Solution to the failure of loading dynamic library when Linux program is running