Terminal animation
How do I make an terminal animation?
What is a terminal animation? How do you make a terminal animation? This script and codes were developed by Omar Hassane on 21 January 2023, Saturday.
Terminal animation - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>terminal animation</title> <link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Dancing+Script'>
<link rel='stylesheet prefetch' href='http://fonts.googleapis.com/css?family=Terminal+Dosis'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class='console-container'><span id='text'></span><div class='console-underscore' id='console'>_</div></div> <script src="js/index.js"></script>
</body>
</html>
Terminal animation - Script Codes CSS Codes
@import url(https://fonts.googleapis.com/css?family=Khula:700);
body { background: #111;
}
.hidden { opacity:0;
}
.console-container { font-family: 'Terminal Dosis'; font-size:4em; text-align:center; height:200px; width:600px; display:block; position:absolute; color:white; top:0; bottom:0; left:0; right:0; margin:auto;
}
.console-underscore { display:inline-block; position:relative; top:-0.14em; left:10px;
}
Terminal animation - Script Codes JS Codes
consoleText(['HELLO.', 'MY NAME IS HASSANE OMAR.', 'A FRONT END DEVELOPER AVAILABLE FOR YOU.'], 'text',['#ddf123','#dfe123','#dfg123']);
function consoleText(words, id, colors) { if (colors === undefined) colors = ['#fff']; var visible = true; var con = document.getElementById('console'); var letterCount = 1; var x = 1; var waiting = false; var target = document.getElementById(id) target.setAttribute('style', 'color:' + colors[0]) window.setInterval(function() { if (letterCount === 0 && waiting === false) { waiting = true; target.innerHTML = words[0].substring(0, letterCount) window.setTimeout(function() { var usedColor = colors.shift(); colors.push(usedColor); var usedWord = words.shift(); words.push(usedWord); x = 1; target.setAttribute('style', 'color:' + colors[0]) letterCount += x; waiting = false; }, 1000) } else if (letterCount === words[0].length + 1 && waiting === false) { waiting = true; window.setTimeout(function() { x = -1; letterCount += x; waiting = false; }, 1000) } else if (waiting === false) { target.innerHTML = words[0].substring(0, letterCount) letterCount += x; } }, 120) window.setInterval(function() { if (visible === true) { con.className = 'console-underscore hidden' visible = false; } else { con.className = 'console-underscore' visible = true; } }, 400)
}
Developer | Omar Hassane |
Username | omodev |
Uploaded | January 21, 2023 |
Rating | 3 |
Size | 2,403 Kb |
Views | 6,072 |
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 |
Svg exercises | 10,044 Kb |
Cv | 8,159 Kb |
Quote-generator | 2,284 Kb |
TODO | 4,271 Kb |
Errachidia-Morocco | 3,872 Kb |
Smooth scrolling | 2,086 Kb |
Mini-projet | 5,147 Kb |
Portfolio2 | 7,217 Kb |
Portfolio-animation | 3,375 Kb |
Homepage | 6,048 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 |
Amazing CSS Menu with Notification Badges | Faizanasad | 2,549 Kb |
Shape Outside - Polygon | Stacy | 3,954 Kb |
Pericles mi loro... | Judag | 4,125 Kb |
Very Simple Slider | Doodlemarks | 2,682 Kb |
HTML5 Breakout | Jaysalvat | 4,873 Kb |
Login-ng-modal | Heedoo | 3,566 Kb |
Placeholder support for contentEditable elements, without JavaScript | Flesler | 1,863 Kb |
Minimal Material Design Form Input | Koenigsegg1 | 3,076 Kb |
IE11 Test | Boostnewmedia | 4,998 Kb |
ASCII triangle image overlay | Mitchdot | 2,200 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!