W

Créé le
Modifié le

12 visites

site-avancement-retours

index

Animation très (trop) lente ; 15s max ? À moins que ce ne soit (aussi) un problème d’easing.
forwards laisse l’anim dans son dernier état (plutôt que la ramener au début.

animation: 15s spacing-mouv cubic-bezier(.68,.68,.39,1) forwards;

Exemples d’easings ici : https://easings.net/#easeInOutQuint
Éditeur ici : https://cubic-bezier.com/#.68,.68,.39,1

avant-propos

/!\ <text id="" class=""> l’id doit être unique, la class peut-être affectée de multiples fois.

Pourquoi pas déclencher /lire les phrases l’une après l’autre (après un clic) ?
Avec le code ci dessous, un test. Le morceau-trois est également animé du point de vue de son attribut startOffset ; ce qui me semble intéressant pour améliorer la lisibilité (note que j’ai aussi allongé le chemin chemin-trois.

HTML :

<a href="page-une.html">
    <svg width="420mm" height="297mm" version="1.1" viewBox="0 0 420 297" xmlns="http://www.w3.org/2000/svg"&gt;
        <defs>
            <path id="chemin" d=" m 16.203044,283.23655 c 5.98438,0.40684 11.606274,-5.06177 25.47012,-4.11924 11.360824,0.77234 5.693214,5.93877 27.350591,0.86956 11.118417,-2.60242 8.833321,-6.61548 23.126966,-13.72749 7.34679,-3.65551 10.839399,-12.50331 24.083029,-13.58106 9.07912,-0.73885 10.58741,3.3754 22.04785,1.15199"/>
            <path id="chemin-deux" d="m 121.69927,268.29062 c 6.26246,8.47648 26.5233,0.54539 40.96062,2.77258 18.07753,2.78876 35.20638,7.04942 41.89668,-9.46461 4.73795,-11.69494 -4.47746,-10.79478 -7.40672,-21.29645 -2.77467,-9.94746 2.41907,-13.89299 2.12798,-29.6368 -0.35379,-19.13529 41.77117,-15.00498 41.77117,-15.00498"/>
            <path id="chemin-trois" d="m124.55 128.85c-8.5194-7.7866-6.4416-2.4216-15.472-4.4114-7.553-1.6643-9.437 8.2238-1.4689 11.405 9.6625 3.8578 7.0292 12.165 16.962 17.32 10.998 5.7072-4.3413 21.886-2.2768 32.572 1.876 9.7099-0.0286 24.162 12.944 26.696 21.821 4.2621 17.849 12.148 44.287-0.4731 16.125-10.05 16.255-21.122 38.14-28.677 21.884-7.5553 36.083-6.1224 42.596 1.1724s15.892 18.758 10.682 34.911"/>
            <path id="chemin-quatre" d=" M 112.81192,172.24094 C 110.3917,158.05496 64.33697,163.45149 60.185539,139.118 56.558126,117.85599 34.052366,119.15117 39.01987,98.727384 47.216175,65.028454 59.858144,75.135791 85.280319,49.764709 95.50133,39.564243 98.875492,29.211737 124.17103,26.896741 136.27884,25.788658 150.6491,12.437094 163.48489,17.213606"/>
            <path id="chemin-cinq" d="m 118.83574,49.039372 c 14.27061,2.401303 21.36476,14.388168 49.90244,-1.602032 16.7658,-9.394191 7.04779,-2.452258 24.97916,-7.381347 32.95676,-9.059367 -2.15429,22.074944 22.14462,23.354609 22.29166,1.173961 -10.30527,63.496488 27.1385,54.234598 46.47628,-11.49613 43.24582,-39.99915 73.27028,-39.418826"/>
            <path id="chemin-six" d="m 225.75241,141.15674 c 3.2108,22.68395 27.24096,10.6341 48.63969,32.03282 74.05898,74.05899 -42.56883,35.503 18.84703,96.91887 18.63985,18.63985 21.9302,-0.17775 44.92774,13.09989 33.02476,19.06686 49.76103,-34.68175 48.27036,-41.88283 -9.35435,-45.18865 -45.97991,-39.94677 -55.45199,-75.29704 -10.29317,-38.41463 16.45219,-54.10764 22.1618,-90.298903 6.4473,-40.867311 46.89843,4.133682 49.17424,-50.062486"/>
        </defs>

        <text id="morceau-un" class="texte animated">
            <textPath href="#chemin" startOffset="0">
                C'est notre récit, à nous, les deux entités vivantes.
            </textPath>
        </text>

        <text id="morceau-deux" class="texte">
            <textPath href="#chemin-deux" startOffset="50%" text-anchor="middle">
                Au travers de ma pensée et de la présence d'une coéquipière marginale appelée « Moisissure »,
            </textPath>
        </text>

        <text id="morceau-trois" class="texte" >
            <textPath href="#chemin-trois" startOffset="0" data-endoffset="30">
                nous espérons pouvoir vous transmettre l'expérience de nos vie en commun.
            </textPath>
        </text>

        <text id="morceau-trois" class="texte">
            <textPath href="#chemin-quatre" startOffset="0">
                Il s'agit d'une rencontre, d'une insistance à vivre ensemble dans un appartement.
            </textPath>
        </text>

        <text id="morceau-trois" class="texte">
            <textPath href="#chemin-cinq" startOffset="0">
                Vous découvrirez mes appréhensions d'humain·e face à la présence d'une autre forme de vie.
            </textPath>
        </text>

        <text id="morceau-trois" class="texte">
            <textPath href="#chemin-six" startOffset="0">
                La question d'une coexistence délicate mais néanmoins vitale se pose si l'on veut se donner une
                chance de repenser le monde du vivant aujourd’hui et pour demain.
            </textPath>
        </text>

    </svg>

</a>

Le CSS :

.texte {
    font-size: 1.5px;
    opacity: 0;
    color: #687969;
    font-family: "hershey";
}
.animated {
  /* on ajoute la class "animated en js "*/
    animation: scale 30s forwards;
}
@keyframes scale {
    5% { opacity: 0.5;}
    50% { color: black;}
    60% { font-size: 4px;}    
    100% { opacity: 1;color: #687969; font-size: 4px; }
}

JS

<script>
    const a = document.querySelector("a");
    const steps = [...document.querySelectorAll("text")];
    let index = 1;
    a.onclick = (e) => {
        e.preventDefault();
        if(index < steps.length){
            const step = steps[index];
            const textPath = step.querySelector("textPath");
            step.classList.add('animated');
            if(textPath.dataset.endoffset != ""){
                const animate = document.createElementNS("http://www.w3.org/2000/svg", "animate");
                animate.setAttribute("attributeName", "startOffset");
                animate.setAttribute("from", `${textPath.getAttribute("startOffset")}%`);
                animate.setAttribute("to", `${textPath.dataset.endoffset}%`);
                animate.setAttribute("dur", "30s");
                animate.setAttribute("fill","freeze");
                textPath.appendChild(animate);
            }
            index ++;
        } else {
            document.location = a.href
        }
    }
</script>

Pages

Ok avec Vincent pour qu’un indicateur quelconque nous propose de scroller. Ça peut se faire de multiples manières… y compris avec élégance !

Les titres mériteraient une anim alternate

animation: spacing 20s linear infinite alternate;

La couleur de .textes est trop claire à mon avis (problématique du point de vue accessibilité / inclusivité).

La couleur des liens, par contre, même si le bleu fait une référence au « par défaut » est un brin violente…

a {
  color: #23497a;
}

Page une

Ok pour les longueurs de ligne !

Mais que ça ne t’empêche pas de mettre des sauts de ligne manuels quand c’est souhaitable.

C’est en 2025 que ma prise de conscience<br> a commencé à éclore.

Des espaces insécables ?

Anna Tsing : «&nbsp;Une part de ce que la modernité appelle progrès qualifie quatre siècles de dispositifs qui permettent de ne pas avoir à faire attention aux altérités, aux autres formes de vie, aux écosystèmes.&nbsp;

« J’avais l’impression qu’elle appréciait me… » → je comprends l‘idée, mais c’est un peu frustrant de pas donner à l’utilisateurice une solution pour mieux lire :

.micro {
  position: relative;
  opacity: 50%;
  /* ↓ bof… */
  /* margin-left: -100px; */ 
}
p[style="--i:8;"] img,
p[style="--i:8;"] .micro {transition: all 2s }
p[style="--i:8;"]:hover img {opacity: .1;}
p[style="--i:8;"]:hover .micro {opacity: 1;}

Aussi :

/* s’assurer que le dernier élément ne soit pas collé au bord ? */
.textes .zone > :last-child {
  padding-right: 1em;
}

Page deux

Plus de justif’ ; c’est mieux, non ?

Le text-shadow n’est-il pas déjà un peu bourrin ? Voici un petit trick pour pouvoir le régler plus facilement.

.shadow,
/* les deux sélecteurs ci-dessous sont pas top ; vaudrait mieux affecter aux éléments une class "shadow" */
.textes p:not(:has(span)),
.textes p:has(span) > span {
    /* calcule la distance, passé en variable */
    --d: calc(var(--distance, 20) / 20 * 1px);
    /* calcule la force de la couleur, passé en variable : 0 = min, 100 = max*/
    --c: color-mix(in srgb, currentColor calc(var(--force, 30) * 1%), transparent 100%);
    text-shadow: var(--d) 0 var(--d) var(--c),
        calc(var(--d) * -1) 0 var(--c),
        calc(var(--d) /2) var(--d) var(--c),
        calc(var(--d) /2 * -1) calc(var(--d) /2 * -1) calc(var(--d) * 2) var(--c);
}

En HTML, pour avoir un truc global tu peux écrire :

<div class="zone shadow" style="--distance:10; --force: 30">

Ou spécifier par élément:

<p class="shadow" style="--distance:30; --force: 60">

Ou même utiliser du js pour faire varier aléatoirement:

const shadows = document.querySelectorAll("span");
shadows.forEach(el => {
    el.style.setProperty('--distance', Math.floor(Math.random() * 5 + 25))
    el.style.setProperty('--force', Math.floor(Math.random() * 50 + 50))

});

Page trois et quatre

Le text-shadow…

On les voudrait plus habitées, d’images, de dessins, de documents et de traces… Ça va venir, j’imagine !

N’hésite pas à laisser beaucoup (beaucoup !) plus la parole (l’image) à « Moisissure » (→ même si je ne comprends pas vraiment pourquoi ce mot est toujours entre guillemets…)