곡선 경로에서 텍스트를 움직입니다

최근 뉴욕 타임즈 (New York Times)는 엘리자베스 워렌과 그녀의 팀이 팬 셀카에 사용하는 독특한 방법을 자세히 설명하는 매력적인 기사를 소개했습니다. 흥미롭게도, 사진 작가가 이미지를 캡처함에 따라 이것들은 전통적인 셀카가 아닙니다. 이 기사에는 독자가 스크롤 할 때 페이지를 따라 우아하게 구부러진 문구 인 움직이는 텍스트 요소가 영리하게 통합됩니다. 이 효과가 어떻게 달성되는지 살펴 보겠습니다.

시각적 데모 :

곡선 텍스트는 SVG를 사용하여 구현됩니다. 에이<path></path> 요소는 곡선을 정의합니다<textpath></textpath> 이 경로를 따라 텍스트를 배치합니다.

<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"> *사진은 기술적으로 셀카가 아닙니다.</textpath></text></svg>

애니메이션 startOffset<textpath></textpath> 요소. 정확한 New York Times 구현은 공개되지 않은 상태로 유지되지만 단순화 된 접근 방식은 JavaScript를 사용하여 페이지 스크롤 위치를 추적하고 startOffset 동적으로 조정하여 스크롤 텍스트 효과를 만듭니다.

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

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

document.addeventListener ( "스크롤", e => {
  let % = (h [st] || b [st]) / ((h [sh] || b [sh]) -h.clientHeight) * 100;
  TextPath.setAttribute ( "STARTOFFSET", (-Percent * 40) 1200)
});

이 구부러진 움직이는 텍스트는 시각적으로 인상적이고 기억에 남는 디자인 요소를 제공하며 웹에서 자주 볼 수없는 기술이므로 특히 관심을 끌 수 있습니다.

위 내용은 곡선 경로에서 텍스트를 움직입니다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!