50 lines
1.2 KiB
Plaintext
50 lines
1.2 KiB
Plaintext
---
|
|
/**
|
|
* Reveal — apparition au scroll (fade + léger translate), sobre.
|
|
*
|
|
* Props :
|
|
* - delay (number, 0) : décalage en ms (pour échelonner une grille)
|
|
* - class (string) : classes additionnelles
|
|
*
|
|
* Motion piloté-utilisateur : déclenché par le scroll (IntersectionObserver).
|
|
* Sous prefers-reduced-motion: reduce → contenu visible immédiatement, aucun
|
|
* mouvement. Sans JS → rien n'est masqué (garde html[data-js]).
|
|
*/
|
|
interface Props {
|
|
delay?: number;
|
|
class?: string;
|
|
}
|
|
|
|
const { delay = 0, class: className } = Astro.props;
|
|
---
|
|
|
|
<div
|
|
class:list={["tf-reveal", className]}
|
|
data-reveal
|
|
style={delay ? `--reveal-delay: ${delay}ms` : undefined}
|
|
>
|
|
<slot />
|
|
</div>
|
|
|
|
<style>
|
|
@media (prefers-reduced-motion: no-preference) {
|
|
:global(html[data-js]) .tf-reveal {
|
|
opacity: 0;
|
|
translate: 0 12px;
|
|
transition: opacity var(--dur-slow) var(--ease-out),
|
|
translate var(--dur-slow) var(--ease-out);
|
|
transition-delay: var(--reveal-delay, 0ms);
|
|
}
|
|
|
|
:global(html[data-js]) .tf-reveal.is-visible {
|
|
opacity: 1;
|
|
translate: 0 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
import { initReveal } from "../js/reveal.js";
|
|
initReveal();
|
|
</script>
|