非常にクールでクリエイティブなセグメント化された SVG テキスト アニメーションの特殊効果

簡単なチュートリアル

これは、segment.js に基づいた、非常にクリエイティブなセグメント化された SVG テキスト アニメーションの特殊効果です。このテキスト アニメーション特殊効果は、アニメーション SVG のストローク パスを使用してさまざまなテキスト アニメーション効果を作成し、その効果は非常に印象的です。

SVG テキスト アニメーション特殊効果のこの最初のデモの最後のいくつかの例では、Web グラフィック アニメーションを作成するために Oleg Solomka によって書かれた JavaScript ライブラリ プラグインである mo.js プラグインを使用します。 mo.js を使用すると、より衝撃的なテキスト アニメーション効果を作成できます。

特殊効果で使用されているフォントは絶妙な小文字フォントで、非常にクリエイティブなWEBフォントのセットです。

使い方

このSVGテキストアニメーション効果を使用するには、SVGパスをアニメーション化するために使用されるsegment.js、イージングアニメーショントランジション効果を作成するために使用されるd3-ease、および文字をページに導入する必要があります。 .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 を除く) は次の値に設定できます:

• 単一値: すべての文字で受け入れられます。

• 配列: 配列の最初の要素は最初の文字で受信され、2 番目の要素は 2 番目の文字で受信され、以下同様となります。

以下は設定パラメータの使用例です:

// Selecting the container element
var el = document.querySelector('.my-text');
 
// 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: '#5F6062',  // 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-(a, b, c, ...) や Letter-(1, 2, 3, ...) などの文字クラスが割り当てられます。これらのクラスを通じて、マージン値や配置方法の設定など、文字のスタイルをカスタマイズできます。

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

上記は、クールでクリエイティブなセグメント化された SVG テキスト アニメーション特殊効果のコンテンツです。その他の関連コンテンツについては、PHP 中国語 Web サイト (www.php.cn) に注目してください。