[clip-path][mix-blend-mode]2019/10/04ツイートタイトルが上手くまとめられなかったのですが...そのままの内容です!写真の上に被っているテキストだけ色が変わっているデザインのコーディングを依頼されたことがあって(最終的には別のデザインになりましたが)、もしアニメーション付けるならどうコーディングするかな?と考えた結果のサンプルです。併用することで、アニメーションによるテキストの色の変化がより印象的に。同じ位置に重ねて配置しておきます。順番に指定していきます。利用して以下のように指定します。おなじみのブレンドモードを指定できます。このとき、今回のサンプルの英文のように単語の間に空白が入っていると消えてしまうので、文字コード&nbsp;を入れましょう。's');});3)上記の処理完了後にアニメーション開始させたいので、以下のように記述。今回ご紹介しているような表現を取り入れたくても、対応ブラウザが気になって躊躇している方も多いと思います。全体のクオリティをIEとかに合わせて下げなきゃいけないなんてもったいない...。いうことで「対応ブラウザではよりリッチな演出が楽しめる」という見方でデザインの幅を広げちゃいましょう。非対応ブラウザでもデザインに致命的な欠陥が出ないということが前提ですが。どちらもIE・Edge非対応です。そのままでもデザイン的に見苦しくはないので許容としてもよさそうですが、少しイメージを近づけられるよう透過で調整しておきます。ユーザーエージェントを判定userAgentでブラウザ&デバイス判別こちらのコードを利用させて頂きました。クラスを追加してくれます。形のとき、どうコーディングしようか迷うことがありますね。サイトを表示したときに、少し動きがあると目が自然とそこに注目し、その下はどうなってるのかな、と読み続けてみたくなりますよね。最近SVGを使用してコーディングすることが多くなりました。これひとつで印象がガラリと変わる、デザインの要(と言っても過言ではないかも?)。それが文字ではないでしょうか。