Tekst verplaatsen op een Gebogen Pad

0
20

Er was een leuk artikel in De New York Times de andere dag het beschrijven van de fancy manier Elizabeth Warren en haar medewerkers laat mensen nemen een selfie met Warren. Maar… de foto ‘ s zijn eigenlijk niet selfies, omdat ze zijn genomen door iemand anders. Het artikel heeft zijn hilarische regel tekst die wiggles door op een gebogen lijn als je naar beneden scrollt de pagina.

Laten we eens kijken hoe ze het deden.

Film:

De gebogen lijn is getrokken in SVG als een <pad>, en de <tekst> is ingesteld op het door een <textPath>:

<svg width=”100%” height=”160px” viewBox=”0 0 1098.72 89.55″>
<path id=”curve” 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>
<tekst width=”100%” style=”transform:translate3d(0,0,0);”>
<textPath style=”transform:translate3d(0,0,0);” uitlijning-baseline=”top” xlink:href=”#curve”>*De foto ‘ s zijn technisch gezien niet selfies.</textPath>
</text>
</svg>

De beweging truc gebeurt door het aanpassen van de startOffset kenmerk van de textPath element.

Ik ben niet 100% zeker hoe ze het deden, maar we kunnen een aantal snelle hacky wiskunde door te kijken naar de schuifpositie van de pagina en het instellen van dat kenmerk op een manier die maakt het verplaatsen over het zo snel en ver als we willen.

const textPath = document.querySelector(“#tekst-pad”);

const h = document.documentElement,
b = document.lichaam,
st = ‘scrollTop’,
sh = ‘scrollHeight’;

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

Hier is een demo:

Zie de Pen
Selfie Kruipen door Chris Coyier (@chriscoyier)
op CodePen.

Tekst op een gebogen lijn is een cool design voor een aantal redenen! Het is gewoon niet gezien dat er veel op het web, zodat wanneer het wordt gebruikt, is het opvalt.

Zie de Pen
CodePen Uitdaging: Hearthstone Kaart door wheatup (@wheatup)
op CodePen.