Flytte Tekst på en Buet Bane

0
15

Det var en morsom artikkel i New York Times den andre dagen som beskriver den fancy måte Elizabeth Warren og hennes stab la folk ta en selfie med Warren. Men… bildene er ikke egentlig selfies fordi de er tatt av noen andre. Artikkelen har hans hysteriske linje med tekst som wiggles av på en buet linje som du bla nedover på siden.

La oss se på hvordan de gjorde det.

Film:

Den buede linjen er trukket i SVG som en <bane>, og <tekst> er satt på det ved en <textPath>:

<svg width=”100%” høyde=”160px” viewBox=”0 0 1098.72 89.55″>
<bane id=”kurve” fylle=”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>
<tekst width=”100%” style=”forvandle:translate3d(0,0,0);”>
<textPath style=”forvandle:translate3d(0,0,0);” alignment-baseline=”top” xlink:href=”#kurve”>*bildene er ikke teknisk selfies.</textPath>
</text>
</svg>

Bevegelsen trikset som skjer ved å justere startOffset egenskap av textPath element.

Jeg er ikke 100% sikker på hvordan de gjorde det, men vi kan gjøre noen raske hacky matematikk ved å se på bla posisjon på siden og innstillingen for denne egenskapen på en måte som gjør at den kan bevege seg rundt så fort og langt som vi ønsker.

const textPath = – dokument.querySelector(“#tekst-banen”);

const h = dokument.documentElement,
b = – dokument.kropp,
st = ‘scrollTop’,
sh = ‘scrollHeight’;

dokumentet.addEventListener(“bla”, e => {
la prosent = (t[st]||b[st]) / ((h[sh]||b[sh]) – h.clientHeight) * 100;
textPath.setAttribute(“startOffset”, (-prosent * 40) + 1200)
});

Her er en demo:

Se Penn
Selfie Gjennomgå av Chris Coyier (@chriscoyier)
på CodePen.

Tekst på en buet linje er en kul design titt for en rekke grunner! Det er bare ikke sett så mye på nettet, så når det er nødvendig, at den skiller seg ut.

Se Penn
CodePen Utfordring: Hearthstone Kortet ved wheatup (@wheatup)
på CodePen.