Rörlig Text på en Krökt Bana

0
33

Det var en rolig artikel i New York Times häromdagen beskriver finare sätt att Elizabeth Warren och hennes personal för att låta folk ta sig en selfie med Warren. Men… bilderna är faktiskt inte selfies eftersom de tas av någon annan. Artikeln har sin lustiga textrad som svajar med på en böjd linje som du bläddra nedåt på sidan.

Låt oss titta på hur de gjorde det.

Film:

Den böjda linjen som dras i SVG-filen som <sökväg>, och <text> är inställd på det med ett <textPath>:

<svg width=”100%” height=”160px” viewBox=”0 0 1098.72 89.55″>
<sökväg id=”kurva” fylla=”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);” alignment-baseline=”top” xlink:href=”#kurvan”>*bilderna är inte tekniskt selfies.</textPath>
</text>
</svg>

Rörelsen trick som händer genom att justera startOffset attribut av den textPath element.

Jag är inte 100% säker på hur de gjorde det, men vi kan göra några snabba hacky matematik genom att titta på bläddra position på sidan och inställning som attribut på ett sätt som gör det röra sig om så snabbt och långt som vi vill.

const textPath = dokument.querySelector(“#text-väg”);

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

dokumentet.addEventListener(“bläddra”, e => {
låt procent = (h[st]||b[st]) / (h[sh]||b[sh]) – h.clientHeight) * 100;
textPath.setAttribute(“startOffset”, (-procent * 40) + 1200)
});

Här är en demo:

Se Pennan
Selfie Krypa genom Chris Coyier (@chriscoyier)
på CodePen.

Sms: a på en böjd linje är en cool design ser ut för någon av flera skäl! Det är bara inte sett så mycket på nätet, så när det används, det sticker ut.

Se Pennan
CodePen Utmaning: Stenhäll Kort av wheatup (@wheatup)
på CodePen.