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.