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

Random typing effect

Browse source
This commit is contained in:
Thomas Smith 2023-02-28 13:54:48 -05:00
parent 3ee0cd1290
commit 5b5245e3d1
2 changed files with 7 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/layouts/index.html
View file

@ -151,7 +151,6 @@
</div> </div>
</div> </div>
</div> </div>
<hr class="mb-3">
<div class="row"> <div class="row">
<div class="col"> <div class="col">
{{- partial "click-to-copy.html" . -}} {{- partial "click-to-copy.html" . -}}
@ -626,7 +625,7 @@
<div class="row two-boxes-down"> <div class="row two-boxes-down">
<div class="col"> <div class="col">
<h2 class="display-5 text-center">Ready to start building?<br>All you need is tea.</h2> <h2 class="display-5 text-center">Ready to start building?<br>All you need is tea.</h2>
<p class="lead text-center mb-5"><span class="tea">tea</span>’s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access your entire ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p> <p class="lead text-center mb-5"><span class="tea">tea</span>’s +pkg syntax embodies our core belief that good tools should just get out of the way so that you can keep making the internet a better place. Access the entire open source ecosystem with one command, compose and combine everything, and enjoy an all-around more delightful dev experience.</p>
<div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div> <div class="bottom-cta">{{- partial "desktop-ctas.html" -}}</div>
</div> </div>
</div> </div>

10
src/layouts/partials/hero-terminal-animation.html
View file

@ -51,9 +51,9 @@
} }
let currentChar = command.input[0]; let currentChar = command.input[0];
if (currentChar === '$') { if (currentChar === '$') {
currentChar = '<span class="purple">$</span>'; currentChar = '<span class="purple">$</span>';
} }
commandOutput += currentChar; commandOutput += currentChar;
command.input = command.input.slice(1); command.input = command.input.slice(1);
@ -61,7 +61,9 @@
if (document.querySelector(".grid-gray").contains(document.createTextNode(currentChar))) { if (document.querySelector(".grid-gray").contains(document.createTextNode(currentChar))) {
setTimeout(typeCommand, 50); // Reduce timeout delay for '#' character for faster animation setTimeout(typeCommand, 50); // Reduce timeout delay for '#' character for faster animation
} else { } else {
setTimeout(typeCommand, 80); // Add a random delay between 40ms and 80ms (except for '#' characters)
const delay = Math.floor(Math.random() * 40) + 80;
setTimeout(typeCommand, delay);
} }
document.querySelector("#terminal-output").innerHTML = commandOutput; document.querySelector("#terminal-output").innerHTML = commandOutput;