ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-11-22 14:45:05 +03:00
Code Issues Projects Releases Packages Wiki Activity Actions

Second and third animations

Browse source
This commit is contained in:
Thomas Smith 2023-02-28 11:54:21 -05:00
parent d9cd98ebf6
commit 8092c83269
2 changed files with 62 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
src/layouts/partials/animation-2.html
View file

@ -1,7 +1,7 @@
<script> <script>
const commands3 = [ const commands3 = [
{ input: "$ node --version<br>", output: `v19.3.0<br><br>` }, { input: '$ node --version<br>', output: `v19.3.0<br><br>` },
{ input: "$ cat <<EOF >>my-project/README.md<br>", output: `# Dependencies<br> { input: `$ cat &lt;&lt;EOF &gt;&gt;my-project/README.md<br>`, output: `# Dependencies<br>
<table> <table>
<thead> <thead>
<tr> <tr>
@ -16,15 +16,15 @@
</tr> </tr>
</tbody> </tbody>
</table> </table>
EOF EOF
<br><br>` }, <br><br>` },
{ input: "$ cd my-project<br>", output: `my-project<br><br>` }, { input: '$ cd my-project<br>', output: `my-project<br><br>` },
{ input: "$ node --version<br>", output: `v18.13.0` }, { input: '$ node --version<br>', output: `v18.13.0` },
]; ];
let commandIndex3 = 0; let commandIndex3 = 0;
let command3 = commands3[commandIndex3]; let command3 = commands3[commandIndex3];
let commandOutput3 = ""; let commandOutput3 = '';
function typeCommand3() { function typeCommand3() {
if (commandIndex3 === commands3.length) { if (commandIndex3 === commands3.length) {
@ -32,19 +32,23 @@ EOF
} }
if (command3.input.length === 0) { if (command3.input.length === 0) {
commandOutput3 += '\n' + command3.output + '\n'; commandOutput3 += '\n' + command3.output + '\n';
document.querySelector("#terminal-output-3").innerHTML = commandOutput3; document.querySelector('#terminal-output-3').innerHTML = commandOutput3;
commandIndex3++; commandIndex3++;
command3 = commands3[commandIndex3]; command3 = commands3[commandIndex3];
setTimeout(typeCommand3, 1000); setTimeout(typeCommand3, 1000);
return; return;
} }
commandOutput3 += command3.input[0]; let char = command3.input[0];
if (char === '$') {
char = '<span class="purple">$</span>';
}
commandOutput3 += char;
command3.input = command3.input.slice(1); command3.input = command3.input.slice(1);
document.querySelector("#terminal-output-3").innerHTML = commandOutput3; document.querySelector('#terminal-output-3').innerHTML = commandOutput3;
setTimeout(typeCommand3, 100); setTimeout(typeCommand3, 100);
} }
const terminalOutput = document.querySelector("#terminal-output-3"); const terminalOutput = document.querySelector('#terminal-output-3');
const observer = new IntersectionObserver((entries) => { const observer = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
typeCommand3(); typeCommand3();
@ -52,4 +56,5 @@ EOF
} }
}); });
observer.observe(terminalOutput); observer.observe(terminalOutput);
</script> </script>

87
src/layouts/partials/animation-3.html
View file

@ -1,46 +1,51 @@
<script> <script>
const commands4 = [ const commands4 = [
{ input: "$ tea github.com/teaxyz/hello-universe.sh<br><br>", output: `*** Interpreters ***<br><br>`}, { input: '$ tea github.com/teaxyz/hello-universe.sh<br><br>', output: `*** Interpreters ***<br><br>`},
{ input: "", output: `TypeScript: Hello, World!<br>`}, { input: '', output: `TypeScript: Hello, World!<br>`},
{ input: "", output: `Go: Hello, World!<br>`}, { input: '', output: `Go: Hello, World!<br>`},
{ input: "", output: `JavaScript: Hello, World!<br>`}, { input: '', output: `JavaScript: Hello, World!<br>`},
{ input: "", output: `Perl: Hello, World!<br>`}, { input: '', output: `Perl: Hello, World!<br>`},
{ input: "", output: `Python: Hello, World!<br>`}, { input: '', output: `Python: Hello, World!<br>`},
{ input: "", output: `Ruby: Hello World!<br>`}, { input: '', output: `Ruby: Hello World!<br>`},
{ input: "", output: `Lua: Hello, World!<br><br>`}, { input: '', output: `Lua: Hello, World!<br><br>`},
{ input: "", output: `*** Compilers ***<br><br>`}, { input: '', output: `*** Compilers ***<br><br>`},
{ input: "", output: `C: Hello, World!<br>`}, { input: '', output: `C: Hello, World!<br>`},
{ input: "", output: `Rust: Hello, World!<br>`}, { input: '', output: `Rust: Hello, World!<br>`},
]; ];
let commandIndex4 = 0; let commandIndex4 = 0;
let command4 = commands4[commandIndex4]; let command4 = commands4[commandIndex4];
let commandOutput4 = ""; let commandOutput4 = '';
function typeCommand4() { function typeCommand4() {
if (commandIndex4 === commands4.length) { if (commandIndex4 === commands4.length) {
return; return;
} }
if (command4.input.length === 0) { if (command4.input.length === 0) {
commandOutput4 += '\n' + command4.output + '\n'; commandOutput4 += '\n' + command4.output + '\n';
document.querySelector("#terminal-output-4").innerHTML = commandOutput4; document.querySelector('#terminal-output-4').innerHTML = commandOutput4;
commandIndex4++; commandIndex4++;
command4 = commands4[commandIndex4]; command4 = commands4[commandIndex4];
setTimeout(typeCommand4, 1000); setTimeout(typeCommand4, 1000);
return; return;
} }
commandOutput4 += command4.input[0]; let char = command4.input[0];
command4.input = command4.input.slice(1); if (char === '$') {
document.querySelector("#terminal-output-4").innerHTML = commandOutput4; char = '<span class="purple">$</span>';
setTimeout(typeCommand4, 100); }
} commandOutput4 += char;
command4.input = command4.input.slice(1);
document.querySelector('#terminal-output-4').innerHTML = commandOutput4;
setTimeout(typeCommand4, 100);
}
const terminalOutput4 = document.querySelector('#terminal-output-4');
const observer4 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
typeCommand4();
observer4.disconnect();
}
});
observer4.observe(terminalOutput4);
const terminalOutput4 = document.querySelector("#terminal-output-4");
const observer4 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) {
typeCommand4();
observer4.disconnect();
}
});
observer4.observe(terminalOutput4);
</script> </script>