Verschieben von Text an einem Gebogenen Pfad

0
13

Es war ein Lustiger Artikel in Der New York Times den anderen Tag Beschreibung die Lust Weg, Elizabeth Warren und Ihr Team lassen Sie die Menschen nehmen, ein selfie mit Warren. Aber… die Bilder sind nicht wirklich selfies, denn Sie stammen von jemand anderem. Der Artikel hat seine urkomische Textzeile, schlängelt sich durch die auf eine gekrümmte Linie, wie Sie nach unten scrollen die Seite.

Schauen wir uns an, wie Sie es Taten.

Film:

Die geschwungene Linie gezeichnet, die in SVG als <Pfad> und der <text> wird auf Sie durch ein <textPath>:

<svg width=”100%” height=”160px” viewBox=”0 0 1098.72 89.55″>
<path id=”Kurve” fill=”transparent” d=”M0.17,0.23c0,0,105.85,77.7,276.46,73.2s243.8-61.37,408.77-54.05c172.09,7.64,213.4,92.34,413.28,64.19″></path>
<text width=”100%” style=”transform:translate3d(0,0,0);”>
<textPath style=”transform:translate3d(0,0,0);” Ausrichtung-baseline=”top” xlink:href=”#Kurve”>*Die Bilder sind technisch nicht selfies.</textPath>
</text>
</svg>

Die Bewegung trick geschieht durch die Anpassung der Attribut startOffset von textPath-element.

Ich bin mir nicht 100% sicher, wie Sie es getan haben, aber wir können tun, ein paar schnelle hacky Mathematik, indem Sie die scroll-position der Seite und die Einstellung, das Attribut in einen Weg, der es macht bewegen sich so schnell und weit, wie wir wollen.

const textPath = document.querySelector(“#text-Pfad”);

const h = document.documentElement,
b = document.Körper,
st = ‘scrollTop’,
sh = ‘scrollHeight’;

Dokument.addEventListener(“scroll”, e => {
lassen Sie Prozent = (h[st]||b[st]) / ((h[sh]||b[sh]) – h.clientHeight) * 100;
textPath.setAttribute(“startOffset”, (Prozent * 40) + 1200)
});

Hier ist eine demo:

Siehe Stift
Selfie Crawl von Chris Coyier (@chriscoyier)
auf CodePen.

Text auf einer Gebogenen Linie ist ein cooles design für eine beliebige Anzahl von Gründen! Es ist einfach nicht gesehen, dass viel auf dem web, so dass, wenn es verwendet wird, steht es.

Siehe Stift
CodePen Herausforderung: Hearthstone-Karte von wheatup (@wheatup)
auf CodePen.