CSSのみでテキストを「飾る・動かす」おしゃれなエフェクト10
ここ最近画像や動画を使ったエフェクトも増えてきましたが、シンプルにテキストだけ動かしたりデコレーションすると結構洗練された見え方になります。もちろん画像や動画の上に動きのある文字を配置しても面白いです。ということで今回はCSSのみで実現するテキストを動かしたり飾り付けたりするコードをまとめました。
エンジニア速報は Twitter の@commteで配信しています。
透過処理で文字のくり抜き
background-clip
プロパティは背景の範囲(ボックスモデル・ボーダーボックス・パディングボックス)に表示するか指定します。このプロパティは文字で背景を切り抜くことが可能ですが、-webkit-background-clip: text;
と-webkit-text-fill-color: transparent;
指定することによって文字が透明になり、文字下の画像が見え、背景をくり抜いたような形を表現できます。
.foo { -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
-webkit-background-clip:text CSS effect
スクイグル
スクイグル(squiggle - ドナルド・ウィニコットが提唱した芸術療法の一つ。なぐり描き法 | 医療法人板倉医院)を表現。なぐり描いたような、クネクネ曲がったアニメーション。filterプロパティでSVGのfilterで定義した設定を使いフィルタをかけています。
.foo { filter: url(#squiggly-1); }
アップダウン
keyframesに transform: translateY();
を設定し上下にテキストを動かしています。translateY()関数でY方向の移動を指定するだけ。
@keyframes change { 0%, 12%, 100% {transform:translateY(0);} 17%,29% {transform:translateY(-25%);} 34%,46% {transform:translateY(-50%);} 51%,63% {transform:translateY(-75%);} 68%,80% {transform:translateY(-50%);} 85%,97% {transform:translateY(-25%);} }
スモーキー
テキストを煙のようなエフェクトを使いフェードさせる珍しい動き。各文字をspanで囲う必要がありますが、文字に移動・変形・回転・傾き・縮尺を指定して違和感なく文字を消してます。
transform: translate3d(15rem, -8rem, 0) rotate(-40deg) skewX(70deg) scale(1.5);
バウンド・クラッシュ
文字どうしをクラッシュ・バウンドさせるエフェクトです。transform: scaleY
で縦方向へ縮尺、transform-origin
で原点を指定し、滑らかにバウンドしているように見えます。
フェード
transform: scale
で拡大・縮小、後はtext-shadowとopacityで滑らかにフェードさせています。
カウントダウンタイマー
一見するとどうやってんだろうと思うのですが、数値に一つ一つspanを振り、各桁にアニメーションの長さを指定するanimation-duration
を設定し数値の動きに変化をつけています。
マスク
こちらはmask-image
を使ってマスクをかけています。ちなみにmask-size
は表示サイズ、mask-clip
は表示エリア。
-webkit-mask-image: url(img/mask.png); -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
ブレンド
mix-blend-mode
プロパティを使い、グラデーションとテキストをブレンドしています。
mix-blend-modeの値の違いはこちらで確認できます。
シャドウ
text-shadow
を使ったパターン4種。text-rendering: optimizeLegibility;
で文字のレンダリングを行ってます。
スポンサード リンク
関連記事
- 今どきのプログラマー向け社内共有ツール
- Mac初心者おすすめ!フロントエンドやコーダー向け初期設定
- CSSだけでOK!レスポンシブ対応のズームイン・ズームアウトを繰り返すCSSフェードスライダー
- デベロッパーにおすすめのATOM開発系ダークテーマ
- モダンなフォームを作るために覚えておきたいCSSの擬似クラス
- object-fit・currentColor・will-change・image-renderingなどマイ...
- CSSのみで実現、背景を動かす「おしゃれエフェクト」まとめ
- 聞き慣れないけど確実に知っておきたいCSSやhtmlの新機能
- スクロールした時に面白いエフェクトを出すためのアイデアまとめ
- それとなく今風にできる、グローバルナビゲーションのコード集
Leave a Comment