分割テキスト アニメーションの作成

文字と単語の分割アニメーションを作成する方法の基本概要。

Adam Argyle

この投稿では、分割テキスト アニメーションを解決する方法について 最小限のアクセスでブラウザをまたいで機能する、ウェブ向けのインタラクションです。 デモをお試しください。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> デモ

動画で視聴したい場合は、この投稿の YouTube バージョンをご利用ください。

概要

テキストの分割によるアニメーションは素晴らしいものです。このコースでは、 今回の投稿ではアニメーションの可能性を秘めていますが、 できます。目標は、段階的にアニメーション化することです。テキストは、 その上にアニメーションが組み込まれています。テキストのモーション効果を分割することで 煩雑で混乱を招く可能性があるので、HTML、または ユーザーがモーションに問題がなければ、モーション スタイルを適用します。

ワークフローと結果の概要は次のとおりです。

1. [準備] でモーションを軽減する（条件付き） CSS と JavaScript の変数を定義します。
2. 分割テキスト ユーティリティを準備する 使用できます。
3. ページの条件とユーティリティをオーケストレートする 負荷を軽減できます。
4. CSS の遷移とアニメーションを作成する （rad の部分です）。

以下に、対象となる条件付きの結果のプレビューを示します。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> ユーザーが動きの抑制を好む（テキストが判読可能で分割されていない）

をご覧ください。

ユーザーが動きの軽減を望んでいる場合は、HTML ドキュメントをそのままにして、 作成します。動きに問題がなければ、それを細かく切ります。こちらが JavaScript がテキストを文字で分割した後の HTML のプレビュー。

<ph type="x-smartling-placeholder">

</ph> <ph type="x-smartling-placeholder">

</ph> ユーザーは動きに抵抗がないテキストを複数の <span> に分割要素

をご覧ください。

モーション条件の準備

利用可能な @media (prefers-reduced-motion: reduce) メディアクエリが CSS から使用され、 JavaScript を使用する。このメディアクエリは テキストの分割の可否を判断できますCSS メディアクエリは、 できます。一方、JavaScript メディアクエリは、 HTML 操作は行いません。

注: 質問: 分割テキスト アニメーションを抑制するには、他に何を使用する必要がありますか？

CSS 条件付きの準備

PostCSS を使用してメディアクエリ レベル 5 の構文を有効にしました。 メディアクエリのブール値を変数に変換します。

@custom-media --motionOK (prefers-reduced-motion: no-preference);

JS 条件付き

JavaScript では、ブラウザからメディアクエリをチェックできます。 分解 を使用して、メディアクエリのチェックからブール値の結果を抽出し、名前を変更します。

const {matches:motionOK} = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

次に、motionOK をテストして、ユーザーが変更していない場合のみドキュメントを変更します。 モーションを減らすようリクエストされています

if (motionOK) {
  // document split manipulations
}

PostCSS を使用して @nest 構文を有効にすることで、同じ値を確認できます。 ネストドラフト 1。これにより アニメーションに関するすべてのロジックと、 親と子を 1 か所で管理:

letter-animation {
  @media (--motionOK) {
    /* animation styles */
  }
}

PostCSS カスタム プロパティと JavaScript のブール値 条件付きで効果をアップグレードできます。次のセクションに進みましょう。 JavaScript を分解して、文字列を要素に変換します。

テキストの分割

テキスト文字、単語、行などを CSS または JS で個別にアニメーション化することはできません。 効果を実現するには、ボックスが必要です。各文字をアニメーション化するには、 各文字が要素である必要があります各単語をアニメーション化する場合、 要素である必要があります。

1. 文字列を要素に分割する JavaScript ユーティリティ関数を作成する
2. これらのユーティリティの使用をオーケストレートする

で確認できます。

注: このデモでは、ページの DOM で JavaScript のテキストを分割します。フレームワークまたはサーバー上にある場合は、そこからテキストを要素に分割することもできますが、分割は慎重に行ってください。

文字の分割ユーティリティ関数

まずは、文字列を受け取り、それぞれの値を 配列内の文字の数です。

export const byLetter = text =>
  [...text].map(span)

「 拡散 ES6 の構文が、迅速なタスクに大いに役立ちました。

単語の分割ユーティリティ関数

この関数は文字を分割するのと同じように文字列を受け取り、各単語を 配列内に格納されます

export const byWord = text =>
  text.split(' ').map(span)

「 split() メソッドを使用すると、スライスする文字を指定できます。 単語が区切られたことを示す空白スペースを渡しました。

ボックスのユーティリティ関数を作成する

この関数では文字ごとにボックスが必要です map() span() 関数で呼び出されている。span() 関数を以下に示します。

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)

  return node
}

--index というカスタム プロパティを 配列の位置を指定します。文字アニメーション用のボックスがあると便利ですが CSS で使用するインデックスを用意することは、一見小さな追加作業に見えますが、その影響は大きくなります。 この大きな影響で特に顕著なのが、 驚異的です。 スタッガード モードのアニメーションをオフセットする方法として、--index を使用できます。 見てください

公益事業の結論

splitting.js モジュールの実行完了:

const span = (text, index) => {
  const node = document.createElement('span')

  node.textContent = text
  node.style.setProperty('--index', index)

  return node
}

export const byLetter = text =>
  [...text].map(span)

export const byWord = text =>
  text.split(' ').map(span)

次は、これらの byLetter() 関数と byWord() 関数をインポートして使用します。

スプリット オーケストレーション

分割ユーティリティを使用する準備ができたので、それらをすべてまとめると、次のようになります。

1. 分割する要素を見つける
2. これらを分割し、テキストを HTML に置換する

その後、CSS が処理を引き継ぎ、要素やボックスをアニメーション化します。

要素を検索する

属性と値を使用して、目的の属性に関する情報を保存することにしました。 テキストの分割方法についても学習しましたこれらの宣言型のオプションを 挿入します。属性 split-by は、JavaScript から次の目的で使用されます。 要素を作成し、文字または単語のボックスを作成します。属性 要素をターゲットにするために、CSS から letter-animation または word-animation が使用される 変換とアニメーションを適用します。

次に、2 つの属性を示す HTML の例を示します。

<h1 split-by="letter" letter-animation="breath">animated letters</h1>
<h1 split-by="word" word-animation="trampoline">hover the words</h1>

JavaScript から要素を検索する

属性の存在を示す CSS セレクタ構文を使用して、 テキスト分割を行う要素を指定します。

const splitTargets = document.querySelectorAll('[split-by]')

CSS から要素を検索する

また、CSS で属性の存在セレクタを使用して、すべての文字のアニメーションが表示されるようにしました。 ベーススタイルは同じですが後でその属性値を使用して、より具体的な 効果が得られます。

letter-animation {
  @media (--motionOK) {
    /* animation styles */
  }
}

テキストをその場で分割する

JavaScript で見つかった分割ターゲットごとに、テキストが分割されます。 属性の値に基づいて各文字列を <span> にマッピングします。Google では、 要素のテキストを、作成したボックスに置き換えます。

splitTargets.forEach(node => {
  const type = node.getAttribute('split-by')
  let nodes = null

  if (type === 'letter') {
    nodes = byLetter(node.innerText)
  }
  else if (type === 'word') {
    nodes = byWord(node.innerText)
  }

  if (nodes) {
    node.firstChild.replaceWith(...nodes)
  }
})

オーケストレーションのまとめ

完了時の index.js:

import {byLetter, byWord} from './splitting.js'

const {matches:motionOK} = window.matchMedia(
  '(prefers-reduced-motion: no-preference)'
)

if (motionOK) {
  const splitTargets = document.querySelectorAll('[split-by]')

  splitTargets.forEach(node => {
    const type = node.getAttribute('split-by')
    let nodes = null

    if (type === 'letter')
      nodes = byLetter(node.innerText)
    else if (type === 'word')
      nodes = byWord(node.innerText)

    if (nodes)
      node.firstChild.replaceWith(...nodes)
  })
}

この JavaScript は、次のような英語で読めます。

1. ヘルパー ユーティリティ関数をいくつかインポートします。
2. 何も起こらない場合は、そのお客様に動きが許されるかどうかを確認します。
3. 分割する要素ごとに、
   1. どのように分割するかに基づいてそれらを分割します。
   2. テキストを要素に置き換えます。

アニメーションと遷移の分割

上述の分割ドキュメントの操作により、 CSS や JavaScript を使って、アニメーションや効果を作成できます。こちらのリンクもご覧ください をご覧ください。

では、この機能を使って何ができるかを見てみましょう。CSS を使った 4 つのアニメーションと 使用できます。🤓

文字の分割

分割文字効果の基礎として、次の CSS が 役立ちます。すべての遷移とアニメーションをモーションメディアクエリの背後に置いており、 次に、新しい子文字 span ごとに表示プロパティと対象のスタイルを指定します。 空白スペースに対処するには:

[letter-animation] > span {
  display: inline-block;
  white-space: break-spaces;
}

空白文字のスタイルは重要です。これにより、スパンがスペースのみの 折りたたまれません。次に、ステートフルな変換について説明します。

遷移の分割文字の例

この例では、分割テキスト エフェクトに CSS 遷移を使用しています。トランジションでは、 アニメーションには状態が必要で、3 つの状態を選択しました。 文字にカーソルを合わせます。

この文（コンテナ）にカーソルを合わせると、 遠ざけたかのように表示されます。ユーザーがメッセージにカーソルを合わせて 表示されます。

@media (--motionOK) {
  [letter-animation="hover"] {
    &:hover > span {
      transform: scale(.75);
    }

    & > span {
      transition: transform .3s ease;
      cursor: pointer;

      &:hover {
        transform: scale(1.25);
      }
    }
  }
}

分割文字をアニメーション化する例

この例では、事前定義された @keyframe アニメーションを使用して、各アニメーションを無限にアニメーション化します。 文字で示され、インライン カスタム プロパティ インデックスを利用して、スタッガード インデックスが作成されます。 できます。

@media (--motionOK) {
  [letter-animation="breath"] > span {
    animation:
      breath 1200ms ease
      calc(var(--index) * 100 * 1ms)
      infinite alternate;
  }
}

@keyframes breath {
  from {
    animation-timing-function: ease-out;
  }
  to {
    transform: translateY(-5px) scale(1.25);
    text-shadow: 0 0 25px var(--glow-color);
    animation-timing-function: ease-in-out;
  }
}

目標: CSS calc() は、計算の最後のアイテムの単位タイプを使用します。上記の例では、1 ミリ秒です。これは、単位のない数値をアニメーションの値 <time> に変換するために戦略的に使用されます。

単語の分割

この例では Flexbox がコンテナタイプとして機能し ch 単位を健全なギャップ長として活用しています。

word-animation {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 1ch;
}

<ph type="x-smartling-placeholder">

</ph>

単語間のギャップを表示している Flexbox DevTools

遷移の分割単語の例

この移行例では、もう一度ホバーを使用します。最初はこのエフェクトが非表示になるため、 カーソルを合わせるまでコンテンツが表示され、操作とスタイルが ホバリング機能があるかどうか。

@media (hover) {
  [word-animation="hover"] {
    overflow: hidden;
    overflow: clip;

    & > span {
      transition: transform .3s ease;
      cursor: pointer;

      &:not(:hover) {
        transform: translateY(50%);
      }
    }
  }
}

分割された単語をアニメーション化する例

このアニメーションの例では、再度 CSS @keyframes を使用して、スタッガード レイアウトを作成します。 通常の段落のテキストで無限のアニメーションを作成します。

[word-animation="trampoline"] > span {
  display: inline-block;
  transform: translateY(100%);
  animation:
    trampoline 3s ease
    calc(var(--index) * 150 * 1ms)
    infinite alternate;
}

@keyframes trampoline {
  0% {
    transform: translateY(100%);
    animation-timing-function: ease-out;
  }
  50% {
    transform: translateY(0);
    animation-timing-function: ease-in;
  }
}

まとめ

私のやり方わかったな、どうやって？！🙂

アプローチを多様化して、ウェブで構築するすべての方法を学びましょう。 Codepen を作成するか独自のデモをホストして、ツイートしてください。 以下のコミュニティ リミックスのセクションをご確認ください。

ソース

• GitHub の GUI チャレンジのソース
• テキストの分割 Codepen スターター

その他のデモとアイデア

• テキストの Codepen コレクションの分割
• Splitting.js

コミュニティ リミックス

• CodeSandbox の gnehcwu による <text-hover> ウェブ コンポーネント