ewen/eweng.space
1
1
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

nouvelle animation titre fenetre

Browse source
This commit is contained in:
ewen 2026-04-01 14:08:32 +02:00
parent 233457d19e
commit b5951cbd32
9 changed files with 230 additions and 39 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

28
blog/entries/index.html
View file

@ -26,6 +26,22 @@
font-family: 'IM Fell English', serif;
font-size: 20px;
}
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 500px;
border: 1px solid black;
@ -81,9 +97,13 @@
</div>
<script>
const el = document.querySelector('.fenetre-nom');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
</script>
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>

28
blog/entries/march2026/bonjour.html
View file

@ -24,6 +24,22 @@
font-family: 'IM Fell English', serif;
font-size: 20px;
}
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 500px;
border: 1px solid black;
@ -78,9 +94,13 @@
</div>
<script>
const el = document.querySelector('.fenetre-nom');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
</script>
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>

28
blog/entries/march2026/multipotentiel.html
View file

@ -24,6 +24,22 @@
font-family: 'IM Fell English', serif;
font-size: 20px;
}
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 500px;
border: 1px solid black;
@ -85,9 +101,13 @@
</div>
<script>
const el = document.querySelector('.fenetre-nom');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
</script>
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>

28
blog/entries/march2026/retransmettre.html
View file

@ -25,6 +25,22 @@
font-family: 'IM Fell English', serif;
font-size: 20px;
}
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 500px;
border: 1px solid black;
@ -79,9 +95,13 @@
</div>
<script>
const el = document.querySelector('.fenetre-nom');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
</script>
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>

24
depeches.html
View file

@ -14,6 +14,20 @@
font-size: 20px;
}
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 600px;
border: 1px solid black;
@ -154,9 +168,13 @@ fetch('/api/depeches')
});
const el = document.getElementById('titre-nav');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 12s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>

54
index.html
View file

@ -23,6 +23,20 @@
font-family: 'IM Fell English', serif;
font-size: 20px;
}
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 550px;
border: 1px solid black;
@ -49,7 +63,30 @@
height: 400px;
width: auto;
display: block;
}
}
.now {
font-size: 0.75rem;
font-style: italic;
color: #555;
padding-top: 0.6rem;
margin-top: 0.8rem;
margin-right: -3rem;
line-height: 1.6;
}
.now-titre {
font-style: normal;
color: #999;
font-size: 0.7rem;
display: block;
margin-bottom: 0.2rem;
}
@media (max-width: 600px) {
body { font-size: 17px; }
.fenetre { grid-template-columns: 1fr; }
.fenetre img.perso { width: 100%; height: auto; }
}
@media (max-width: 600px) {
body {
@ -66,8 +103,9 @@
</style>
</head>
<body>
<div>
<span class="fenetre-nom">eweng.space &#9734;</span>
<div style="display:flex; align-items:baseline; justify-content:space-between; max-width:550px;">
<span class="fenetre-nom" id="titre-nav">eweng.space &#9734;</span>
<span class="now">/now : faut que je fasses les courses.</span>
</div>
<div class="fenetre">
<div class="fenetre-contenu">
@ -88,9 +126,13 @@
</div>
<script>
const el = document.querySelector('.fenetre-nom');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>

25
qui.html
View file

@ -23,6 +23,21 @@
font-family: 'IM Fell English', serif;
font-size: 20px;
}
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 950px;
border: 1px solid black;
@ -92,9 +107,13 @@
</div>
<script>
const el = document.querySelector('.fenetre-nom');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>

27
reviews/albums/az.html
View file

@ -13,6 +13,20 @@
font-family: 'IM Fell English', serif;
font-size: 20px;
}
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 900px;
@ -192,11 +206,14 @@
</div>
<script>
const el = document.getElementById('titre-nav');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
const el = document.querySelector('.fenetre-nom');
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 6s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>

27
reviews/index.html
View file

@ -14,7 +14,20 @@
font-size: 20px;
}
/* ── identique à ton site ── */
@keyframes colorshift {
0% { color: hsl(0, 60%, 70%); }
25% { color: hsl(90, 60%, 70%); }
50% { color: hsl(180, 60%, 70%); }
75% { color: hsl(270, 60%, 70%); }
100% { color: hsl(360, 60%, 70%); }
}
@keyframes levite {
0% { transform: translateY(0px); }
50% { transform: translateY(-5px); }
100% { transform: translateY(0px); }
}
.fenetre {
max-width: 600px;
border: 1px solid black;
@ -33,7 +46,6 @@
min-width: 0;
}
/* ── nav retour ── */
.retour {
font-family: 'IM Fell English', serif;
font-size: 20px;
@ -181,11 +193,14 @@ fetch('data/albums.json')
document.getElementById('grille').textContent = 'impossible de charger les albums.';
});
// animation titre
const el = document.getElementById('titre-nav');
el.innerHTML = el.textContent.split('').map(c =>
c === ' ' ? ' ' : `<span style="display:inline-block;transform:translateY(${Math.floor(Math.random()*8)-4}px)">${c}</span>`
).join('');
el.innerHTML = el.textContent.split('').map((c, i) => {
if (c === ' ') return ' ';
const delayColor = (i * 0.3).toFixed(1);
const delayLevite = (Math.random() * 4).toFixed(2);
const duree = (3 + Math.random() * 3).toFixed(2);
return `<span style="display:inline-block;animation:colorshift 12s ease-in-out infinite,levite ${duree}s ease-in-out infinite;animation-delay:-${delayColor}s,-${delayLevite}s">${c}</span>`;
}).join('');
</script>
</body>
</html>