Skip to content

Instantly share code, notes, and snippets.

@alixcan
Last active August 19, 2021 11:22
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save alixcan/5cd9721ff002d4623c96f1e3c737f0c4 to your computer and use it in GitHub Desktop.
Save alixcan/5cd9721ff002d4623c96f1e3c737f0c4 to your computer and use it in GitHub Desktop.
Browser console animation https://stackoverflow.com/a/48812316
<script>
(function() {
var frame = 0;
var frames = [
"This",
"is",
"SPARTA!",
" ",
"SPARTA!",
" ",
"SPARTA!",
" ",
"SPARTA!",
" ",
"SPARTA!",
" ",
"SPARTA!",
" ",
"Kappa AlixcaN.Net"
];
var showNext = () => {
console.clear();
console.log(
`%c `,
"background: red; color: white; font-size: 15px; padding: 3px 41%;"
);
console.log(
`%c ${frames[frame]}`,
"background: red; color: white; font-size: 25px; padding: 3px 40%;"
);
console.log(
`%c `,
"background: red; color: white; font-size: 15px; padding: 3px 41%;"
);
setTimeout(
showNext,
frames[frame] === "SPARTA!" || frames[frame] === " " ? 100 : 1500
);
// next frame and loop
frame++;
if (frame >= frames.length) {
frame = 0;
}
};
showNext();
})();
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment