超酷創意分段式SVG文字動畫特效

這是一款基於segment.js製作的非常有創意的分段式SVG文字動畫特效。這個文字動畫特效通過動畫SVG的描邊路徑來製作各種文字的動畫效果，效果非常的贊。

這個SVG文字動畫特效的第一個DEMO中的最後幾個例子使用了mo.js插件，一款由Oleg Solomka編寫的用於製作網頁圖形動畫的JavaScript庫插件。通過mo.js，可以製作出效果更為震撼的文字動畫效果。

線上預覽    源碼下載

特效中使用的字體是exquisite lowercase font，一套極富創意的WEB字體。

 使用方法

要使用該SVG文字動畫特效，要在頁面中引入segment.js，它用於動畫SVG路徑，d3-ease，用於製作easing動畫過渡效果，以及letters.js。

<script src="js/segment.js"></script>
<script src="js/d3-ease.v0.6.js"></script>                  
<script src="js/letters.js"></script>                 

 HTML結構

可以使用一個<div>容器來包裹需要製作動畫效果的文字。

<div class="my-text">my text</div>       

每一個SVG字母都被分配一個letter class類，例如：letter-(a, b, c, ...)，以及letter-(1, 2, 3, ...)。通過這些class我們可以自定義字母的樣式，例如設置margin值或定位方式等。

/* Setting margin among all letters */
.letter {
  margin: 0 10px;
}
 
/* Setting background to letter m */
.letter-m {
  background-color: lightsalmon;
}