CSSでテキストをワイプ表示(スライドアニメーション)する


以下のGIF画像のように、テキストをワイプ表示する方法です。

ソース

HTML

<div class="box">
  <div class="text">
    サンプル文章です。サンプル文章です。
  </div>
</div>

CSS(SCSS)

.box {
  width: 300px;
  overflow: hidden;
  transform: translateX(-100%);
  transition: transform 3s;
  
  .text {
    transform: translateX(100%);
    transition: transform 3s;
  }
  
  &.visible {
    transform: translateX(0);
    .text {
      transform: translateX(0);
    }
  }
}

使用方法

テキストを表示したいタイミングで、<div class="box">visibleクラスを追加します(つまり、<div class="box visible">に変更)。

これにより、自動的にテキストがワイプ表示されます。

CSSの解説

ポイントは、CSSのtransformです。

まず初期状態(テキスト非表示状態)ですが、
.boxは、transform: translateX(-100%);(4行目)により、左に300px移動します。
.textは、transform: translateX(100%);(8行目)により、右に300px移動しますが、この時、親要素である.boxを基準に移動するので、-300px + 300px となり、結果的に移動しないことになります。移動はしないのですが、.text.boxの領域外にハミ出ているため、表示されません(.boxoverflow: hidden;)。

visibleクラスが付加されると、.box.texttransform: translateX(0);により、移動していない状態へと戻ろうとします。この時、transition: transform 3s;が効くため、3秒間かけて移動するのですが、.textに関しては、.box同じ速度で逆向きに移動することになるので、こちらも結果的に移動しないことになります。つまり、.boxだけが移動してくるように見え、それがワイプ表示に見えるというロジックです。ややこしいですね🤔

今回はシンプルにするためにtransitionを使いましたが、animationを使うことで、より細かな設定が可能になります。

デモ(CodePen)

「テキストを表示」ボタンを押すと、テキストがワイプ表示されます。

参考

https://baigie.me/officialblog/2021/02/25/css-tips-1/