멋진 HTML5 SVG 텍스트 변형 애니메이션 효과

간단한 튜토리얼

이것은 매우 멋진 HTML5 SVG 텍스트 변형 애니메이션 효과입니다. 이 특수 효과는 SVG와 anime.js를 사용하여 SVG 스트로크 애니메이션을 통해 다양하고 아름다운 문자 애니메이션 특수 효과를 완성합니다.

사용 방법

HTML 구조

첫 번째 DEMO의 HTML 구조는 다음과 같습니다.

<svg width="100%" height="100%" viewBox="0 0 320 180" class="letters letters--effect-1">
  <!--W-->
  <g class="letter letter--1">
    <g class="letter__part">
      <path class="letter__layer color-6" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
      <path class="letter__layer color-1" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
      <path class="letter__layer color-2" d="M25,39.7l22.4,51l7.9-32.2L76.2,84l1.3-61.2" />
    </g>
  </g>
  <!--I-->
  <g class="letter letter--2">
    <g class="letter__part">
      <path class="letter__layer color-6" d="M100,20.3l8.4,58.4" />
      <path class="letter__layer color-2" d="M100,20.3l8.4,58.4" />
      <path class="letter__layer color-3" d="M100,20.3l8.4,58.4" />
    </g>
  </g>
  <!--L-->
  <g class="letter letter--3">
    <g class="letter__part">
      <path class="letter__layer color-6" d="M126.4,70.8l27.6,0.5" />
      <path class="letter__layer color-3" d="M126.4,70.8l27.6,0.5" />
      <path class="letter__layer color-4" d="M126.4,70.8l27.6,0.5" />
    </g>
    <g class="letter__part">
      <path class="letter__layer color-6" d="M128.9,15.6l-2.3,60.2" />
      <path class="letter__layer color-3" d="M128.9,15.6l-2.3,60.2" />
      <path class="letter__layer color-4" d="M128.9,15.6l-2.3,60.2" />
    </g>
  </g>
  <!-- ...and so on -->
</svg>

CSS 스타일

SVG 텍스트에 일부 스타일 추가:

/* Main SVG */
 
.letters {
  position: relative;
  display: block;
  min-height: 400px;
  max-height: 70vh;
  margin: 0 auto;
}
 
 
/* Letter path */
 
.letter__layer {
  fill: none;
  stroke-miterlimit: 3;
  stroke-linecap: butt;
  stroke-linejoin: bevel;
}
 
/* Styles for effect 1 */
 
.letters--effect-1 .letter__layer:first-child {
  stroke-width: 9px;
}
 
.letters--effect-1 .letter__layer:nth-child(2) {
  stroke-width: 9.5px;
}
 
.letters--effect-1 .letter__layer:nth-child(3) {
  stroke-width: 10px;
}
 
 
/* Effect 1 colors */
 
.color-1 { stroke: #dea521; }
.color-2 { stroke: #f84242; }
.color-3 { stroke: #3758a7; }
.color-4 { stroke: #f79c8c; }
.color-5 { stroke: #84b5bd; }
.color-6 { stroke: #feefde; }

JavaScript

SVG 텍스트의 애니메이션은 anime.js에 의해 구동됩니다. anime.js 애니메이션 라이브러리 플러그인을 사용하면 다양한 애니메이션 속성을 설정하고 다양한 유형의 애니메이션을 처리할 수 있습니다. 이 특수 효과에는 주로 두 가지 유형의 애니메이션이 있습니다. 첫 번째는 각 문자의 움직임이고 두 번째는 획 애니메이션입니다. 획 애니메이션은 획-대시 배열 및 획-대시 오프셋을 사용하여 수행됩니다.

Phrase.prototype.options = {
  outAnimation: {
    translateY: [0, 15],
    opacity: [1, 0],
    duration: 250,
    easing: 'easeInOutQuad'
  },
  // The animation settings for the ´in´ animation (when the letters appear again).
  inAnimation: {
    properties: {
      translateY: {
        value: [-30, 0],
        duration: 900,
        elasticity: 600,
        easing: 'easeOutElastic'
      },
      opacity: {
        value: [0, 1],
        duration: 500,
        easing: 'linear'
      },
    },
    delay: 40 // delay increment per letter.
  },
  // Stroke animation settings
  pathAnimation: {
    duration: 800,
    easing: 'easeOutQuint',
    delay: 200 // delay increment per path.
  }
};

위 내용은 멋진 HTML5 SVG 텍스트 변형 애니메이션 특수 효과의 내용입니다. 더 많은 관련 내용을 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!