戦いは長かったです。CSSのテキストエフェクトを81個まとめたCSS Text Effectsというサイトを見かけて、「今のCSSってここまでできるんだ」と素直に驚きました。しかも全部JavaScriptなし、コピペで使えるMITライセンス。せっかくなので自分のサイトに実際に入れてみたんですが、思っていた作業とは全然違うところで時間を使うことになりました。コードを貼る作業は5分で終わって、そこから先の「気付いてもらえない」との戦いが長かった話です。
配布されているものを、そのまま使わなかった理由
最初に選んだのは、文字の上をグラデーションが流れる「aurora」という名前のエフェクトでした。ただ、コードをよく見るとfilter: hue-rotate(360deg)が入っていて、アニメーションが一周する間に色相がぐるっと一周する仕組みになっていました。つまり水色にしたつもりでも、途中で緑になり黄色になり赤になる。
ここは譲れません。このブログは白と黒に水色のアクセント、という配色でずっとやってきているので、ここで虹色が回り出すと明らかに浮きます。なのでhue-rotateは削除して、グラデーションの色も水色系だけで組み直しました。
コピペで使える素材集はありがたいんですが、そのまま貼るとサイト全体のトーンから浮くことがあります。「動くこと」自体が目的になってしまうと、ブランドとしてはむしろマイナスだなと思っていて、こういう調整は結局自分でやるしかない部分なんだと思います。
動いているのに、気付いてもらえない
ここからが本番でした。水色と明るい水色を交互に置いたグラデーションをゆっくり流す形にして、いざ見てみたら「言われないと分からない」レベルだったんです。
最初は実装ミスを疑いました。でも開発者ツールでbackground-positionの値を実際に測ってみると、0%、75%、150%、225%とちゃんと動いている。数値としては完全に動作しているのに、目には何も伝わっていない状態でした。
謎はすぐ解けました。原因は、グラデーションを「水色→明色→水色→明色」と対称に並べていたことでした。これだと全体がぼんやり明るくなったり暗くなったりするだけで、「何かが動いた」という感じが出ません。
そこで、細い光の帯を1本だけ用意して、それが文字の上を横切る形に変えました。あわせてテンポも変更しています。それまでは5秒かけてゆっくり流していたのを、約1秒で一気に走らせて、残りの3.5秒は何もしないという配分にしました。
手応えがありました。これが思った以上に効きました。ゆっくり動いているものより、速く動くものの方が視界の端に引っかかるんですね。ずっとチカチカしていると鬱陶しいけれど、たまにキラッと光る程度なら邪魔にならない。動きの量ではなく、速さと間の取り方の問題だったわけです。光の帯が通過するタイミングに合わせて、うっすらグローもかけるようにしました。
4文字では、どうやっても限界があった
もうひとつ分かったのが、文字数の問題です。
発端はここです。最初にエフェクトを入れたのは、トップページの見出しにある「あなたのweb制作に。」の、水色になっている4文字の部分でした。ここをどれだけ強くしても、どうにも「気付くか怪しい」感じが抜けなかったんです。
試しに、ページ下部にある「気になることがあれば、お気軽に」という15文字の見出しにも同じ設定で入れてみたら、こちらははっきり分かりました。設定は完全に同じです。違うのは文字数だけ。
答えはシンプルでした。考えてみれば当たり前で、光の帯が横切る演出は「文字の左から入って右に抜ける」までの距離があって初めて動きとして認識されます。4文字だと、その距離がそもそも足りていなかったんですね。エフェクトの強さをいくら調整しても解決しない、面積の問題でした。
結果的に、ヒーロー側は水色ベースに白い光、下部のCTA側は白ベースに水色の光、という対になる形で両方に入れることにしました。
入れる前に決めておいたこと
準備も大事です。見た目の調整とは別に、実装面で最初から気をつけたことが3つあります。
ひとつは、非対応環境での事故を防ぐこと。この手のエフェクトはbackground-clip: textとcolor: transparentを組み合わせて実現するんですが、これは裏を返すと「背景が表示されなければ文字が透明のまま消える」ということです。見出しが丸ごと見えなくなるのは怖いので、@supportsで囲って、対応していない環境では従来通りの水色ベタ塗りで表示されるようにしました。
もうひとつは配慮です。ふたつめは、アニメーションを減らす設定への対応です。prefers-reduced-motionが指定されている場合はアニメーションを止めるようにしました。ついでに調べたら、以前に実装した肉球アイコンの回転アニメーションがこれに未対応だったことに気づいたので、そちらも合わせて対応しています。派手なものを足すときに、既存の見落としが見つかるのはよくある話だなと思いました。
みっつめは、同じCSSを2箇所にコピペしないこと。ヒーローとCTAで色の組み合わせだけが違うので、ベース色・中間色・ハイライト色の3つを渡せばいいmixinに切り出して使い回す形にしました。今後もし別の場所で使いたくなっても、色を変えて呼ぶだけで済みます。
おまけ、また同じ罠を踏んだ
おまけがありました。検証中、アニメーションが動いていないように見えて焦った瞬間がありました。background-positionを1秒空けて2回測っても、まったく同じ値が返ってくるんです。
これ、以前バッジを円軌道で回したときの記事でも書いた罠と同じでした。検証に使っていたブラウザのタブが非表示状態だと、描画が止まってスタイルの値が更新されないんです。document.visibilityStateを確認したら案の定hiddenでした。
確認方法はこれです。この場合、getAnimations()で取れるplayStateとcurrentTimeを見ると、ちゃんとrunningで時間も進んでいることが確認できます。一度踏んだはずの罠にまた足を取られたので、次こそは真っ先にここを疑おうと思います。
まとめ
振り返るとこうです。CSSでできることが増えたおかげで、こういう演出のハードルはかなり下がりました。ただ実際にやってみると、大変なのはコードを書く部分ではなくて、「自分のサイトのトーンに合わせる」「ちゃんと気付いてもらえる強さに調整する」という、動かした後の判断の方でした。
要点は3つ。速さと間の取り方、それから効果をかける面積。どちらも実際に画面で見てみるまで分からなかったことなので、迷ったら数値を眺めるより一度貼って眺めてみるのが早いなと改めて思っています。
この記事が参考になったら、応援クリックをお願いします
