首頁 > web前端 > H5教程 > 超酷創意分段式SVG文字動畫特效

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

黄舟
發布: 2017-01-19 13:56:50
原創
1719 人瀏覽過

簡短教學

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

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

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

特效中使用的字體是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 class="my-text">my text</div>
登入後複製

初始化插件

然後我們就可以在JavaScript中取得這個元素,透過設定參數來製作繪製文字的動畫。所有的參數選項(除了individualDelays)都可以設定為以下的值:

  • 單一值:可以被所有字母接收。

  • 數組:數組中的第一個元素會被第一個字母接收,第二個元素被第二個字母接收,以此類推。

下面是一個使用配置參數的例子:

// Selecting the container element
var el = document.querySelector(&#39;.my-text&#39;);
 
// All the possible options (these are the default values)
// Remember that every option (except individualDelays) can be defined as single value or array
var options = {
    size: 100,         // Font size, defined by the height of the letters (pixels)
    weight: 1,         // Font weight (pixels)
    rounded: false,    // Rounded letter endings
    color: &#39;#5F6062&#39;,  // Font color
    duration: 1,       // Duration of the animation of each letter (seconds)
    delay: [0, 0.05],  // Delay animation among letters (seconds)
    fade: 0.5,         // Fade effect duration (seconds)
    easing: d3_ease.easeCubicInOut.ease,   // Easing function
    individualDelays: false,              
     // If false (default), every letter delay increase gradually, showing letters from left to right always. 
     If you want to show letters in a disorderly way, set it to true, and define different delays for the desired letters.
};
 
// Initializing the text (Letters parameters: container-element, options)
var myText = new Letters(el, options);
登入後複製

透過上面的配置,我們已經定義了文字顯示和動畫的選項,插件會在容器中產生SVG文字。預設情況下,文字是被隱藏的,如何觸發文字動畫,可以參考下面的方法。

// Show letters with the default options defined
myText.show();
 
// Hide letters with the default options defined
myText.hide();
 
// Toggle letters with the default options defined
myText.toggle();
 
// An example with all the possible options for triggers
// Parameters (JSON): duration, delay, fade, easing, individualDelays, callback
var newOptions = {
    duration: 2,
    delay: 0.2,
    fade: 1,
    easing: d3_ease.easeCircleInOut.ease,
    individualDelays: false,
    callback: function(){
        myText.hide();
    }
};
// These new options will override the options defined in the initialization
myText.show(newOptions);
 
// Show letters instantly, without any animation at all
// There is a hideInstantly and toggleInstantly function, too
myText.showInstantly();  // Shortcut for myText.show(0, 0, 0);
登入後複製

每一個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;
}
登入後複製

以上就是超酷創意分段式SVG文字動畫特效的內容,更多相關內容請關注PHP中文網(m.sbmmt.com)!


相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板