Moving Text on a Curved Path

Recently, The New York Times featured an engaging article detailing the unique method Elizabeth Warren and her team employ for fan selfies. Interestingly, these aren't traditional selfies, as a photographer captures the images. The article cleverly incorporates a moving text element—a phrase gracefully curving along the page as the reader scrolls. Let's explore how this effect is achieved.

Visual Demonstration:

The curved text is implemented using SVG. A <path></path> element defines the curve, and <textpath></textpath> positions the text along this path:

<svg height="160px" viewbox="0 0 1098.72 89.55" width="100%"><path 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" fill="transparent"></path><text style="transform:translate3d(0,0,0);" width="100%"><textpath alignment-baseline="top" style="transform:translate3d(0,0,0);" xlink:href="#curve">*The pictures are not technically selfies.</textpath></text></svg>

The animation is controlled by manipulating the startOffset attribute of the <textpath></textpath> element. While the exact New York Times implementation remains undisclosed, a simplified approach uses JavaScript to track page scroll position and dynamically adjust startOffset, creating the scrolling text effect.

const textPath = document.querySelector("#text-path");

const h = document.documentElement, 
      b = document.body,
      st = 'scrollTop',
      sh = 'scrollHeight';

document.addEventListener("scroll", e => {
  let percent = (h[st]||b[st]) / ((h[sh]||b[sh]) - h.clientHeight) * 100;
  textPath.setAttribute("startOffset", (-percent * 40)   1200)
});

This curved, moving text offers a visually striking and memorable design element, a technique not frequently seen on the web, making it particularly attention-grabbing.

The above is the detailed content of Moving Text on a Curved Path. For more information, please follow other related articles on the PHP Chinese website!