BLOG
25年新卒 WEBエンジニア インターンシップ 受付中

【css】テキストにマスクをかけて途中から色を変える + 1文字ずつ動かすアニメーション [clip-path][mix-blend-mode]

更新日:2022/05/18


タイトルが上手くまとめられなかったのですが…そのままの内容です!
写真の上に被っているテキストだけ色が変わっているデザインのコーディングを
依頼されたことがあって(最終的には別のデザインになりましたが)、
もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。
mix-blend-mode を併用することで、アニメーションによるテキストの色の変化がより印象的に。

作業内容

  1. ベースの構成
  2. [css/clip-path] 写真に被っているテキストの色を変える
  3. [css/mix-blend-mode] 写真に被っているテキストの色を「焼きこみカラー」に
  4. [css/animation] [jQuery] テキストを1文字ずつスライドインで表示
  5. 非対応ブラウザ用の調整

完成形デモ

デモページ

ベースの構成

作りはこんな感じ。

[HTML]

[CSS]

[css/clip-path] 写真に被っているテキストの色を変える

まず、全く同じテキスト要素を2つ作って position: absolute で同じ位置に重ねて配置しておきます。
次に、背景写真の大きさに合わせて css で clip-path を設定します。
表示させたいエリアを囲むように座標を取得して、clip-path に順番に指定していきます。
それぞれ color も指定しましょう。

[CSS]

[css/mix-blend-mode] 写真に被っているテキストの色を「焼きこみカラー」に

今回は .mask.burn を焼きこみカラーにしたいので、css の mix-blend-mode を利用して以下のように指定します。

[CSS]

他にも乗算(multiply)、覆い焼きカラー(color-dodge)、スクリーン(screen)、オーバーレイ(overlay)など、Photoshop でおなじみのブレンドモードを指定できます。
全種類はこちら:mix-blend-mode-CSSリファレンス

[css/animation] [jQuery] テキストを1文字ずつスライドインで表示

1)別々に動かすために、まずテキストを1文字ずつ span で分割

直接HTMLをいじって分けることもできますがスマートではないので、js で処理。
このとき、今回のサンプルの英文のように単語の間に空白が入っていると消えてしまうので、文字コード を入れましょう。

[JS]

参考サイト:1文字ずつ文字色を変える、文字単位でのCSS適用方法

2)文字が順番に表示されるように animation の開始時間をずらす

こちらもひたすら css に nth-child で指定していくこともできますがスマートではないので、js で処理。

[JS]

3)上記の処理完了後にアニメーション開始させたいので、以下のように記述。

[JS]

4)最後に文字が出てくるアニメーションを css で設定

[CSS]

非対応ブラウザ用の調整

今回ご紹介しているような表現を取り入れたくても、対応ブラウザが気になって躊躇している方も多いと思います。
でも全体のクオリティをIEとかに合わせて下げなきゃいけないなんてもったいない…。
ということで「対応ブラウザではよりリッチな演出が楽しめる」という見方でデザインの幅を広げちゃいましょう。
もちろん非対応ブラウザでもデザインに致命的な欠陥が出ないということが前提ですが。

さて、今回使用している clip-path と mix-blend-mode はどちらもIE・Edge非対応です。
そのままでもデザイン的に見苦しくはないので許容としてもよさそうですが、少しイメージを近づけられるよう透過で調整しておきます。

1)js でユーザーエージェントを判定

userAgentでブラウザ&デバイス判別
こちらのコードを利用させて頂きました。
スクリプトファイルを読み込めばユーザーエージェントを判定して html にクラスを追加してくれます。

2)css で微調整

[CSS]

完成形デモ

これにて完成!
デモページ

サンプルソース一式はこちら
サンプルソース一式

FOLLOW US