Hacking Animation using HTML CSS & JS

This code creates a hacking animation using HTML, CSS, and JavaScript. It simulates a scanning process with a console-like display. The main functionality is to display a series of messages related to hacking and scanning in a visually appealing way. The messages are stored in an array and are shuffled periodically to create the effect of real-time scanning.

The code uses CSS animations to make the message “Scanning” blink continuously. After a specific duration, the animation changes to display “ACCESS GRANTED” with a green background, indicating a successful hack. It can be helpful for creating engaging and dynamic animations on websites related to hacking themes or for educational purposes to demonstrate hacking concepts in a visual manner.

How to Create Hacking Animation using HTML CSS & JS

1. Create the HTML structure for the animation interface as follows:

<div class="msg">Scanning</div>
<div id="console">
</div>

2. Use the following CSS code to style and animate the hacking screen.

body{
    padding: 5vh 5vw;
    background: black !important;
    min-height: 450px;
    overflow:hidden;
  }
  
  * {
    box-sizing: border-box;
  }
  
  #console p {
    font-family: monospace;
    font-weight: bold;
    font-size: 4.1vh;
    margin: 0;
    padding: 0;
    line-height: 1;
    color: limegreen;
    text-shadow: 0px 0px 10px limegreen;
  }
  
  .msg {
    font-family: monospace;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 5vh;
    padding-top: 5vh;
    background: red;
    box-shadow: 0 0 30px red;
    text-shadow: 0 0 20px white;
    color: white;
    padding : 20px;
    position: absolute;
    left: 50%;
    margin-left: -10vw;
    top: 50%;
    margin-top: -5vh;
    text-align: center;
    min-width: 200px;
    animation-name: blink;
    animation-duration: 0.6s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-timing-function: linear;
  }
  
  @keyframes blink {
    0% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }

3. Finally, add the following JavaScript function between the <script> and </script> tag just before clsoing the body element.

var intervalID = window.setInterval(updateScreen, 200);
var console = document.getElementById("console");
const msg = document.querySelector(".msg");

var txt = [
  "FORCE: XX0022. ENCYPT://000.222.2345",
  "TRYPASS: ********* AUTH CODE: ALPHA GAMMA: 1___ PRIORITY 1",
  "RETRY: REINDEER FLOTILLA",
  "Z:> /FALKEN/GAMES/TICTACTOE/ EXECUTE -PLAYERS 0",
  "================================================",
  "Priority 1 // local / scanning...",
  "scanning ports...",
  "BACKDOOR FOUND (23.45.23.12.00000000)",
  "BACKDOOR FOUND (13.66.23.12.00110000)",
  "BACKDOOR FOUND (13.66.23.12.00110044)",
  "...",
  "...",
  "BRUTE.EXE -r -z",
  "...locating vulnerabilities...",
  "...vulnerabilities found...",
  "MCP/> DEPLOY CLU",
  "SCAN: __ 0100.0000.0554.0080",
  "SCAN: __ 0020.0000.0553.0080",
  "SCAN: __ 0001.0000.0554.0550",
  "SCAN: __ 0012.0000.0553.0030",
  "SCAN: __ 0100.0000.0554.0080",
  "SCAN: __ 0020.0000.0553.0080",
]

var docfrag = document.createDocumentFragment();

function updateScreen() {
  //Shuffle the "txt" array
  txt.push(txt.shift());
  //Rebuild document fragment
  txt.forEach(function(e) {
    var p = document.createElement("p");
    p.textContent = e;
    docfrag.appendChild(p);
  });
  //Clear DOM body
  while (console.firstChild) {
    console.removeChild(console.firstChild);
  }
  console.appendChild(docfrag);
}

setTimeout(() => { msg.style.background = "limegreen";
msg.innerHTML = "ACCESS GRANTED";
msg.style.boxShadow = "0 0 30px limegreen";
console.style.display = "none";}, 5000);

Disclaimer

The code provided is intended for educational and entertainment purposes only. It is a simulated animation and does not involve or provide any actual hacking-related functionality. The code is purely fictional and does not represent any real hacking techniques or methods. The author and the code-sharing platform do not endorse or encourage any illegal activities or the misuse of this code

That’s all! hopefully, you have successfully created a hacking animation using HTML CSS & JS. If you have any questions or suggestions, feel free to comment below.