펜으로 텍스트 강조 표시 모방

이 코드펜은 Sten Hougaard의 작품에서 영감을 받았습니다

준비

다양한 애니메이션 구현을 위해 두 개의 컨테이너를 만들어 보겠습니다.

<div class="container">
 <h1>Animated text
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="animated-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

<div class="container">
 <h1 id="clickable-header">Click on me!
  <svg viewbox="0 0 235 40" xmlns="http://www.w3.org/2000/svg" id="clickable-svg">
   <path d="..."/>
  </svg>
 </h1>
</div>

Adobe Illustrator를 사용하여 svg를 만들었는데 주요 특징은 작은 높이와 큰 너비일 것입니다.
svg를 기준으로 svg를 배치하므로 svg가 헤더 요소의 하위 요소라는 점을 언급하는 것이 중요합니다.

CSS

컨테이너를 Flexbox로 변환하여 모든 것을 중앙에 우아하게 배치합니다.

.container {
 display: flex;
 place-content: center;
}

h1 {
 display: inline;
 position: relative;
}   

inline은 svg가 이에 의존하므로 단순히 요소의 너비를 내용으로 줄이는 데 사용됩니다.

다음으로 헤더를 기준으로 svg의 위치를 ​​지정해야 합니다.

svg {
 min-width: 110%;
 min-height: 100%;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%,-50%);
}

우리는 표준 방법을 사용하여 상대 요소를 상위 요소의 중앙에 배치합니다. svg를 텍스트에 맞게 조정하려면 최소 너비와 최소 높이를 적용해야 합니다.

자바스크립트를 사용한 애니메이션 로직

자바스크립트에서 요소에 애니메이션을 적용하려면 멋진 애니메이션(키프레임, 옵션) 방법을 사용할 수 있습니다.

키프레임

반복할 속성을 제공하는 get DrawingParameters 함수를 분석해 보겠습니다.

const getDrawingParameters = (path) => {
 const length = path.getTotalLength();
 path.style.strokeDasharray = length;
 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];
 return drawingProperties;
};

먼저 svg 메서드 getTotalLength:
를 사용하여 경로가 실제로 얼마나 긴지 알아야 합니다.

const length = path.getTotalLength();

이제 계산된 길이를 사용하여 그림을 시뮬레이션해야 합니다. 시작점을 정의해 보겠습니다. StrokeDasharray:
속성이 필요합니다.

path.style.strokeDasharray = length;

여기서는 이 속성에 대시 1개(크기=길이)와 간격 1개(크기=길이)를 교대로 사용하여 경로를 그리도록 지시합니다.

길이가 필요한 다음 속성은 Stroke-dashoffset:
입니다.

path.style.strokeDashoffset = length;

이 값은 대시 배열 계산이 길이 값으로 당겨진다는 것을 나타냅니다. 그리고 대시 배열을 '대시-길이 갭-길이 대시-길이 갭-길이 ...'로 설정했기 때문에 시작 경로는 비어 있게 됩니다(갭).

따라서 반복 가능한 속성을 배열로 정의합니다.

 const drawingProperties = [
  { strokeDashoffset: length, easing: "ease-in" },
  { strokeDashoffset: 0, offset: 0.15 }
 ];

오프셋을 사용하여 이 속성에 도달해야 하는 상대 시간을 정의합니다. 매 반복마다 딜레이를 흉내내도록 제작되었습니다.

옵션

animate 메서드의 두 번째 인수는 옵션입니다.

animatedPath.animate(
 getDrawingParameters(animatedPath), 
 {duration: 10000, iterations: Infinity}
);

애니메이션을 무한 반복 및 10초 지속 시간으로 설정했습니다. 오프셋을 기억하시나요? "활성" 애니메이션은 1.5초 밖에 걸리지 않습니다.

위 내용은 펜으로 텍스트 강조 표시 모방의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!