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

First animation amended

Browse source
This commit is contained in:
Thomas Smith 2023-02-28 11:40:09 -05:00
parent 3ad61e1e98
commit d9cd98ebf6
2 changed files with 38 additions and 34 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
src/layouts/index.html
View file

@ -321,7 +321,7 @@
<div class="traffic-light"></div> <div class="traffic-light"></div>
<div class="traffic-light"></div> <div class="traffic-light"></div>
</div> </div>
<div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3"> <div class="terminal-content p-xl-5 p-lg-5 p-md-5 p-sm-2 p-3" style="position:relative;">
<code id="terminal-output-2"> <code id="terminal-output-2">
<div style="margin-top: 15%;"> <div style="margin-top: 15%;">
{{- partial "play-btn.html" -}} {{- partial "play-btn.html" -}}

70
src/layouts/partials/animation-1.html
View file

@ -1,38 +1,42 @@
<script> <script>
const commands2 = [ const commands2 = [
{ input: "$ sh <(curl https://tea.xyz)<br>################################", output: `<br><br>k, we installed /Users/thomassmith/.tea/tea.xyz/v0.24.2/bin/tea` }, { input: '$ sh <(curl https://tea.xyz)<br>################################', output: '<br><br>k, we installed /Users/thomassmith/.tea/tea.xyz/v0.24.2/bin/tea' },
{ input: `<br><br>$ tea redis-cli ping<br>################################`, output: `<br>installed: ~/.tea/redis.io/v7.0.8<br><div class="comment-success p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-check-circle"></i>tea installs 'redis' automagically.</code></div>` }, { input: `<br><br>$ tea redis-cli ping<br>################################`, output: `<br>installed: ~/.tea/redis.io/v7.0.8<br><div class="comment-success p-2" style="position:relative; top:5px;"><code class="small"><i class="icon-check-circle"></i>tea installs 'redis' automagically.</code></div>` },
{ input: "", output: `<br><br>pong` }, { input: '', output: '<br>pong' },
]; ];
let commandIndex2 = 0; let commandIndex2 = 0;
let command2 = commands2[commandIndex2]; let command2 = commands2[commandIndex2];
let commandOutput2 = ""; let commandOutput2 = '';
function typeCommand2() { function typeCommand2() {
if (commandIndex2 === commands2.length) { if (commandIndex2 === commands2.length) {
return; return;
} }
if (command2.input.length === 0) { if (command2.input.length === 0) {
commandOutput2 += '\n' + command2.output + '\n'; commandOutput2 += '\n' + command2.output + '\n';
document.querySelector("#terminal-output-2").innerHTML = commandOutput2; document.querySelector('#terminal-output-2').innerHTML = commandOutput2;
commandIndex2++; commandIndex2++;
command2 = commands2[commandIndex2]; command2 = commands2[commandIndex2];
setTimeout(typeCommand2, 1000); setTimeout(typeCommand2, 1000);
return; return;
} }
commandOutput2 += command2.input[0]; let char = command2.input[0];
command2.input = command2.input.slice(1); if (char === '$') {
document.querySelector("#terminal-output-2").innerHTML = commandOutput2; char = '<span class="purple">$</span>';
setTimeout(typeCommand2, 100); }
} commandOutput2 += char;
command2.input = command2.input.slice(1);
document.querySelector('#terminal-output-2').innerHTML = commandOutput2;
setTimeout(typeCommand2, 100);
}
const observer2 = new IntersectionObserver((entries) => { const observer2 = new IntersectionObserver((entries) => {
if (entries[0].isIntersecting) { if (entries[0].isIntersecting) {
typeCommand2(); typeCommand2();
observer2.disconnect(); observer2.disconnect();
} }
}); });
const target2 = document.querySelector("#terminal-output-2"); const target2 = document.querySelector('#terminal-output-2');
observer2.observe(target2); observer2.observe(target2);
</script> </script>