「ただのテキストでは物足りない。もっと鋭く、エッジの効いた表現が欲しい」 そんな時は、文字そのものを切り裂く「スライスアニメーション」が効果的です。
この記事では、CSSだけでテキストを上下左右、あるいは斜めに分割して出現させるコードを5つ紹介します。 SF映画のタイトルのようなデジタル感と、洗練された切れ味を演出できます。SWELLなどのWordPressテーマですぐに使えるよう、待機中やホバー時の動きも調整済みです。
Horizon Cut（ホライズン・カット）
テキストが上下真っ二つに分割された状態から、スライドして合体します。待機中は上下がわずかに呼吸するようにズレ続け、不穏な空気を演出。ホバーでカチッと一つに融合します。
See the Pen Horizon Cut by BaseKENT (@basekent) on CodePen.
調整方法
- スライド幅 (
translateX): 出現時の移動距離を大きくすると、より遠くから飛んでくるようになります。 - ズレ幅 (
translateY): 待機中の3pxを1pxにすると、震えが小さく繊細になります。
Slash Reveal（スラッシュ・リヴィール）
刀で斬られたように、斜めのラインで文字がズレて出現します。待機中は切断面が微かに光り、ホバーすると傷口が広がるように斜めにスライドします。
See the Pen Slash Reveal by BaseKENT (@basekent) on CodePen.
調整方法
- 切断角度:
clip-path: polygon(...)の%数値を調整すると、斬る角度が変わります。 - ホバー時の開き具合:
translate(-5px, -3px)の数値を大きくすると、大胆に文字が離れます。
Glitch Slice（グリッチ・スライス）
デジタルノイズのように、ランダムな高さで細かくスライスされながら出現します。待機中も時折「ビビビッ」とノイズが走り、ホバーで完全に静止してクリアになります。
See the Pen Glitch Slice by BaseKENT (@basekent) on CodePen.
調整方法
- ノイズの色:
text-shadowの色（#ff00c1,#00fff9）を変更すると、グリッチのカラーが変わります。 - 激しさ:
left: 2pxなどのズレ幅を大きくすると、より壊れたような激しい表現になります。
Vertical Gate（バーティカル・ゲート）
中央から左右に観音開きのように分割されます。出現時は左右から衝突して合体し、待機中はゆっくりと離合を繰り返します。ホバーで中央にピッタリとくっつきます。
See the Pen Vertical Gate by BaseKENT (@basekent) on CodePen.
調整方法
- 隙間の幅: 待機アニメーション（
gateFloat）内のtranslateXの値を変更することで、中央の隙間の開き具合を調整できます。
Double Exposure Slice（ダブル・エクスポージャー）
2つのレイヤーが重なり合い、片方だけがスライドして残像のような効果を生み出します。待機中はレイヤーが周期的にズレては戻り、ホバーすると大きくズレてスタイリッシュな影を作ります。
See the Pen Double Exposure Slice by BaseKENT (@basekent) on CodePen.
調整方法
- スライスの形:
clip-path: polygon(...)の数値を調整すると、ズレる部分の形状（斜め、水平など）を変更できます。 - 背面の色 (
#ccc): 背景色に合わせて目立ちすぎない色に設定するのがコツです。
Unlock Your Creativity…
今回紹介したCSSカスタマイズは、ほんの一例に過ぎません。 Webデザインの可能性は、コードひとつで無限に広がります。
Ex-TORANOMAKIには、あなたのサイトを「他とは違う」存在にするためのCSSテクニックを多数紹介しています。 ありきたりなデザインでは満足できないなら、ぜひ他のカスタマイズもチェックしてみてください。
