ivabus/www
1
0
Fork 0
mirror of https://github.com/ivabus/www synced 2024-09-20 02:50:46 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

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

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

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