diff --git a/index.html b/index.html index 8b1d5d6..52c2b94 100644 --- a/index.html +++ b/index.html @@ -15,31 +15,122 @@ src:url(TT2020Base-Regular.woff2)format('woff2'); } - html { - background-image: url(papier.jpg); - background-repeat: repeat; + background-color: rgb(255, 255, 246); font-family: tt2020, 'Courier New', Courier, monospace; font-size: 1.2em; font-weight: 500; } - body { + body > div { + position: absolute; + background-image: url(papier.jpg); + background-repeat: repeat; width: 800px; - margin-left: auto; - margin-right: auto; - margin-top: 100px; + height: 1150px; + + left: 0; + right: 0; + margin-inline: auto; + margin-top: 50px; + box-shadow: 5px 5px 30px #302e2a, inset 5px 5px 30px #d5d5d5; + rotate: calc(sin(var(--i) * 1.61) * 1.5deg) + } + .page-content { + padding: 100px; + } + .tape-tab { + position: absolute; + height: 80px; + width: 150px; + background-color: red; + margin-top: calc(50px + (var(--i) - 1) * 100px); + margin-left: -100px; + rotate: calc(sin(var(--i) * 1.61) * 1.5deg) } - -

Heyyyy !

-

Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de chokbar.bzh

-

Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à mon (super) blog.

+
+
+ Accueil +
+
+

Heyyyy !

+

Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de chokbar.bzh

+

Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à mon (super) blog.

+ Page mise à jour le 2025-11-23 +
+
+
+
+ page2 +
+
+

Heyyyy !

+

Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de chokbar.bzh

+

Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à mon (super) blog.

+ Page mise à jour le 2025-11-23 +
+
+
+
+ page2 +
+
+

Heyyyy !

+

Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de chokbar.bzh

+

Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à mon (super) blog.

+ Page mise à jour le 2025-11-23 +
+
+
+
+ page2 +
+
+

Heyyyy !

+

Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de chokbar.bzh

+

Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à mon (super) blog.

+ Page mise à jour le 2025-11-23 +
+
+
+
+ page2 +
+
+

Heyyyy !

+

Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de chokbar.bzh

+

Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à mon (super) blog.

+ Page mise à jour le 2025-11-23 +
+
+
+
+ page2 +
+
+

Heyyyy !

+

Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de chokbar.bzh

+

Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à mon (super) blog.

+ Page mise à jour le 2025-11-23 +
+
+
+
+ page2 +
+
+

Heyyyy !

+

Je suis Gribse, un des trois zigotals de la filouterie, hébergeurs de chokbar.bzh

+

Sinon, si les machines à écrire et le tissage vous intéressent, allez jeter un oeil à mon (super) blog.

+ Page mise à jour le 2025-11-23 +
+
- Page mise à jour le 2025-11-23 + diff --git a/readMe.md b/readMe.md new file mode 100644 index 0000000..ce98375 --- /dev/null +++ b/readMe.md @@ -0,0 +1,14 @@ +# Todo : + +- randomize tape color +- replace tape-tab with conditional div css rule +- make clicking the tab push page to front +- make the tab cutely bend when hovered +- write content (lol) +- add sounds ? + + +- add dossier cartonné ? +- add table background with linked objects ? +- find better paper texture +- make typed text more realistic (blur ?) \ No newline at end of file diff --git a/type.html b/type.html index 6590594..d7de053 100644 --- a/type.html +++ b/type.html @@ -1,39 +1,39 @@ - + - -Typewriter Upward Swing - + #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; + } + @@ -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();