abstrxtInfinity
diff --git a/‎EXTRAS.txt‎
Lines changed: 99 additions & 0 deletions b/‎EXTRAS.txt‎
Lines changed: 99 additions & 0 deletions
diff --git a/‎Matrix Background.html‎
Lines changed: 78 additions & 0 deletions b/‎Matrix Background.html‎
Lines changed: 78 additions & 0 deletions
@@ -0,0 +1,99 @@
+EXTRAS
+
+PARTICLES-CSS---------------------------------------------
+#particles-js {                                                                 
+  background: black;                                
+  height: 100vh;                                
+  width: 100%;                              
+}                               
+                                
+HTML PART--- IN HEADER TAG                              
+ <div id="particles-js"></div>                                  
+                                
+ JS PART                                
+ <script src="./js/particles.js"></script>                              
+<script src="./js/app.js"></script>                             
+
+
+STARS CSS--------------------------------------------------
+section {
+  position: absolute;
+  width: 100%;
+  height: 100vh;
+  overflow: hidden;
+  background: #000200;
+  display: flex;
+  z-index: -1;
+  .stars {
+    position: absolute;
+    top: 10%;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    animation: animate 8s ease-in-out infinite,
+      backgroundmove 16s linear infinite;
+  }
+  .s1 {
+    animation-delay: -0s;
+    background: url(./stars/star1.png);
+  }
+  .s2 {
+    animation-delay: -1s;
+    background: url(./stars/star2.png);
+  }
+  .s1 {
+    animation-delay: -2s;
+    background: url(./stars/star1.png);
+  }
+  .s3 {
+    animation-delay: -3s;
+    background: url(./stars/star3.png);
+  }
+  .s4 {
+    animation-delay: -4s;
+    background: url(./stars/star4.png);
+  }
+  .s5 {
+    animation-delay: -5s;
+    background: url(./stars/star5.png);
+  }
+  .s6 {
+    animation-delay: -6s;
+    background: url(./stars/star6.png);
+  }
+  .s7 {
+    animation-delay: -7s;
+    background: url(./stars/star7.png);
+  }
+  .s8 {
+    animation-delay: -8s;
+    background: url(./stars/star8.png);
+  }
+}
+
+@keyframes animate {
+  0%,
+  20%,
+  40%,
+  60%,
+  80%,
+  100% {
+    opacity: 0;
+  }
+  10%,
+  30%,
+  50%,
+  70%,
+  90% {
+    opacity: 1;
+  }
+}
+@keyframes backgroundmove {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(2);
+  }
+}
@@ -0,0 +1,78 @@
+<!--Made By Boujjou Achraf-->
+<html>
+    <head>
+        <style>
+            
+            /*basic reset */
+            
+            *{
+                margin: 0;
+                padding: 0;
+            }
+            
+            body {background: black;}
+            canvas {display:block;}
+        
+        </style>
+    </head>
+    <body>
+    
+        <canvas id="c"></canvas>
+        
+        <script>
+        // geting canvas by id c
+        var c = document.getElementById("c");
+        var ctx = c.getContext("2d");
+
+        //making the canvas full screen
+        c.height = window.innerHeight;
+        c.width = window.innerWidth;
+
+        //chinese characters - taken from the unicode charset
+        var matrix = "ABCDEFGHIJKLMNOPQRSTUVWXYZ123456789@#$%^&*()*&^%";
+        //converting the string into an array of single characters
+        matrix = matrix.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.04)";
+            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 chinese character to print
+                var text = matrix[Math.floor(Math.random()*matrix.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, 35);
+
+        
+        </script>
+    </body>
+</html>