テキストの動き②

2023.06.29

じわっと出現

JavaScriptで動きのきっかけ（画面が読み込まれたら、スクロールしたら）を判別し、blurTriggerにblurというクラス名がついたら、CSSのアニメーションを使い、じわっと出現させる。

See the Pen テキストをじわっと出現させる by Toru Katsumata (@Toru-Katsumata) on CodePen.

タイピング風に出現

JavaScriptで、画面が読み込まれたらTextTypingというクラス名の子要素1文字づつにタグを付与する。
タグにはあらかじめCSSで非表示の指定をしておく。
画面が読み込まれた時と、スクロールをした時にタグを非表示から表示に切り替える。
文字列後ろの線はCSSのアニメーションを使いTextTypingクラスの疑似要素（after）に透過0から1を繰り返すように指定する。
※タイピングのスピードの調整などもっと複雑な動きを実現したい場合は、Typed.js（https://github.com/mattboldt/typed.js）というJavaScriptライブラリがおすすめ。

See the Pen テキストをタイピング風に出現 by Toru Katsumata (@Toru-Katsumata) on CodePen.

1文字ずつ出現

JavaScriptを使い、画面が読み込まれたら1文字ずつ<span>タグを付与する。
<span>タグにはCSSのanimation-delay（アニメーション開始の遅延時間）を直接指定して遅延時間を自動的に増やす。
画面が読み込まれた時と、スクロールをした時にHTML内のeachTextAnimeにappeartextというクラス名を付け、
CSSのアニメーションを使い、<span>タグの透過を0から1に変化させて出現させる。

See the Pen テキストを1文字ずつ出現させる by Toru Katsumata (@Toru-Katsumata) on CodePen.

背景色が伸びて出現（左から右）

CSSを使い、親要素bgextendにoverflow:hiddenを指定してはみ出す要素を隠す。
JavaScript側で動きのきっかけ（画面が読み込まれたら、スクロールしたら）を判別し、親要素のbgextendにつけた動きのきっかけになるクラス名（例　bgLRextendTrigger）に背景が伸縮するアニメーションをつける。
文字列を囲う子要素のbgappearTriggerには、親要素のアニメーション発動と同時に bgappearというクラス名をつけ、時間を遅らせて文字列の透過を0から1にして出現させる。

See the Pen テキストの背景色が伸びて出現（左から右） by Toru Katsumata (@Toru-Katsumata) on CodePen.

背景色が伸びて出現（右から左）

「背景色が伸びて出現（左から右）」の背景色の出現方向を変える。

/* 以下のプロパティ値のみ変更する */
@keyframes bgRLextendAnime{
  0% {
    transform-origin: right;
    transform: scaleX(0);
  }
  50% {
    transform-origin: right;
    transform: scaleX(1);
  }
  50.001% {
    transform-origin: left;
  }
  100% {
    transform-origin: left;
    transform: scaleX(0);
  }
}

背景色が伸びて出現（上から下）

「背景色が伸びて出現（左から右）」の背景色の出現方向を変える。

/* 以下のプロパティ値のみ変更する */
@keyframes bgUDextendAnime{
  0% {
    transform-origin: top;
    transform: scaleY(0);
  }
  50% {
    transform-origin: top;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: bottom;
  }
  100% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
}

背景色が伸びて出現（下から上）

「背景色が伸びて出現（左から右）」の背景色の出現方向を変える。

/* 以下のプロパティ値のみ変更する */
@keyframes bgDUextendAnime{
  0% {
    transform-origin: bottom;
    transform: scaleY(0);
  }
  50% {
    transform-origin: bottom;
    transform: scaleY(1);
  }
  50.001% {
    transform-origin: top;
  }
  100% {
    transform-origin: top;
    transform: scaleY(0);
  }
}

滑らかに出現

JavaScriptで動きのきっかけ（画面が読み込まれたら、スクロールしたら）を判別し、HTML内のsmoothTextTriggerにsmoothTextAppearというクラス名を付与する。
クラス名が付与されたらCSSのアニメーションを使って、傾斜がついている文字列を水平に戻す。
外側の親要素smoothTextにoverflow:hidden;をかけ、はみ出している部分を隠し滑らかに出現させる。

See the Pen テキストが滑らかに出現 by Toru Katsumata (@Toru-Katsumata) on CodePen.

ほのかに光りながら出現

JavaScriptを使い、画面が読み込まれたら1文字づつ<span>タグを付与する。
<span>タグにはCSSのanimation-delay（アニメーション開始の遅延時間）を直接指定して遅延時間を自動的に増やす。
画面が読み込まれた時と、スクロールをした時にHTML内のglowAnimeにglowというクラス名を付け、CSSのアニメーションを使い、spanタグの透過を0から1に変化させ、text-shadowをつける。

See the Pen テキストがほのかに光りながら出現する by Toru Katsumata (@Toru-Katsumata) on CodePen.

inserted by FC2 system