このページは Cloud Translation API によって翻訳されました。

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

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

Adam Argyle

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

</ph>

</ph> デモ

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

概要

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

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

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

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

[Elements] パネルが開かれ、動きの軽減が [Reduce] に設定されている Chrome DevTools のスクリーンショットh1 は分割されずに表示されています — </ph> ユーザーが動きの抑制を好む（テキストが判読可能で分割されていない）

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

モーション条件の準備

利用可能な @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 で個別にアニメーション化することはできません。効果を実現するには、ボックスが必要です。各文字をアニメーション化するには、各文字が要素である必要があります各単語をアニメーション化する場合、要素である必要があります。

文字列を要素に分割する 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() 関数をインポートして使用します。

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

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

分割する要素を見つける
これらを分割し、テキストを 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. テキストを要素に置き換えます。

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

上述の分割ドキュメントの操作により、 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>

単語間のギャップを表示している 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 を作成するか独自のデモをホストして、ツイートしてください。以下のコミュニティリミックスのセクションをご確認ください。

ソース

その他のデモとアイデア

コミュニティリミックス

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