gribse/page-perso-chokbar
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

paper pages !

Browse source
This commit is contained in:
gribse 2025-11-29 14:14:03 +01:00
parent 2ac58a3d14
commit a0aadcf8f3
3 changed files with 149 additions and 49 deletions
Download patch file Download diff file Expand all files Collapse all files

69
type.html
View file

@ -1,39 +1,39 @@
<!DOCTYPE html>
<html lang="en">
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Typewriter Upward Swing</title>
<style>
body {
font-family: monospace;
padding: 40px;
font-size: 2rem;
overflow-x: hidden;
}
<meta charset="UTF-8">
<title>Typed</title>
<style>
body {
font-family: monospace;
padding: 40px;
font-size: 2rem;
overflow-x: hidden;
}
#typewriter {
position: relative;
display: inline-block;
white-space: pre;
line-height: 1.4;
}
#typewriter {
position: relative;
display: inline-block;
white-space: pre;
line-height: 1.4;
}
#text {
position: relative;
}
#text {
position: relative;
}
#typebar {
position: absolute;
width: 40px;
height: 800px; /* long typebar */
transform-origin: bottom center;
opacity: 0;
transition:
transform 0.12s ease-out,
opacity 0.15s ease-out;
pointer-events: none;
}
</style>
#typebar {
position: absolute;
width: 40px;
height: 800px; /* long typebar */
transform-origin: bottom center;
opacity: 0;
transition:
transform 0.5s ease-out,
opacity 0.5s ease-out;
pointer-events: none;
}
</style>
</head>
<body>
@ -56,8 +56,6 @@ let i = 0;
function nextChar() {
if (i >= fullText.length) return;
// Measure character position
const range = document.createRange();
range.setStart(textEl.firstChild, i);
@ -75,9 +73,6 @@ function nextChar() {
// Set initial REST POSITION
typebar.style.transform = `rotate(${restAngle}deg)`;
// FADE IN before swing
// STRIKE
requestAnimationFrame(() => {
typebar.style.transform = `rotate(0deg)`;
@ -94,7 +89,7 @@ function nextChar() {
});
i++;
setTimeout(nextChar, 300);
setTimeout(nextChar, 500);
}
nextChar();