Coole Animationseffekte zur HTML5-SVG-Textverformung

黄舟
Freigeben: 2017-01-18 14:42:01
Original
1530 Leute haben es durchsucht

Kurzes Tutorial

Dies ist ein sehr cooler HTML5-SVG-Textverformungsanimationseffekt. Dieser Spezialeffekt verwendet SVG und anime.js, um verschiedene wunderschöne Buchstabenanimations-Spezialeffekte durch SVG-Strichanimation zu vervollständigen.

Verwendung

Coole Animationseffekte zur HTML5-SVG-Textverformung

HTML-Struktur

Die HTML-Struktur der ersten DEMO ist wie folgt:

<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>
Nach dem Login kopieren

CSS-Stile

Fügen Sie einige Stile zu SVG-Text hinzu:

/* 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; }
Nach dem Login kopieren

JavaScript

Die Animation von SVG-Text wird von anime.js gesteuert. Mit dem Animationsbibliotheks-Plugin anime.js können wir verschiedene Eigenschaften von Animationen festlegen und verschiedene Arten von Animationen verarbeiten. Dieser Spezialeffekt besteht hauptsächlich aus zwei Arten von Animationen: Die erste ist die Bewegung jedes Buchstabens und die zweite ist die Strichanimation. Die Strichanimation wird mithilfe von Stroke-Dasharray und Stroke-Dashoffset erreicht.

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

Das Obige ist der Inhalt der coolen HTML5-SVG-Textdeformationsanimations-Spezialeffekte. Weitere verwandte Inhalte finden Sie auf der chinesischen PHP-Website (www.php.cn)!


Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage