2025-06-05

カバーされながら出てくるテキスト

スクロールCSSのみテキスト

Text Text

覆いかぶさるようなカバーと一緒にテキストが出現する表現です。

実装のポイント

覆いかぶさるカバーは:after疑似要素で作成しています。テキストが出てくる表現はホバーで色がスライドするの応用で透明と黒を組み合わせて色が出てくるようにしています。この上に擬似要素で作ったカバーを載せて覆いかぶさりながら出てくる動きを作っています。

カバーの方は少しトリッキーです。基本の大きさはテキスト領域と同じ大きさですが、scaleプロパティのによって横幅0、実行後は0.008倍と小さく縮小しています。さらにtransitionのイージング関数はcubic-bezier(0, 200, 1, 120)という大きくオーバーして戻る極端な軌道を描く関数です。つまり、前後の変化自体はわずかですが、イージングによって大きくして戻るという経過をたどるようにしています。ここの塩梅によってカバーの動きはかわってきます。

なお、この実装例は1行の想定なので複数行にする場合はカバー画像を変更したり、1行ごとに分けて適用したりするなどの工夫が必要です。

コード例

<p class="sampleText">Text Text</p>

.sampleText {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --duration: 0.6s;

  position: relative;
  display: inline-block;
  overflow: hidden;
  color: transparent;
  background-image: linear-gradient(
    to right,
    var(--color-text) 0,
    var(--color-text) 50%,
    transparent 50%,
    transparent 100%
  );
  background-position: 100% 0;
  background-clip: text;
  background-size: 200% 100%;

  &::after {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    content: "";
    background-color: var(--color-text);
    transform-origin: center;
    scale: 0 1;
    translate: -50% 0;
  }

  &.isActive {
    background-position: 0 0;
    transition: background-position var(--duration) linear;

    &::after {
      transition:
        scale var(--duration) cubic-bezier(0, 200, 1, 120),
        translate var(--duration) linear;
      scale: 0.008 1;
      translate: 51% 0;
    }
  }
}

カバーされながら出てくるテキスト

実装のポイント

コード例

HTML

CSS

関連作例