簡単なチュートリアル
これは、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) に注目してください。