スタイル 2024年6月11日 2024年8月20日4 分で読めます

動く吹き出しを活用した会話スタイル

吹き出しアニメーション

RODDY

これは吹き出しがアニメーションするサンプルだよ。

RODDY

スクロールしていくと吹き出しが右から現れるアニメーションになっているんだ。
class="animate-on-scroll from-right"を設定するだけだよ。

CLARE

すごいね！私の方は左から現れるようになっているのね？
class="animate-on-scroll from-left"を設定するだけね。

BARTS

僕のは下から現れたね。
class="animate-on-scroll from-bottom"だね。

MAKI

私はこれがいい感じ！奥から手前に大きくなって現れた！
class="animate-on-scroll scale-up"

RODDY

画面から一度消えて、また戻ってくるとまた同じアニメーションをするね。

CLARE

アニメーションを繰り返さないようにするのもすごく簡単だよ！
class="animate-on-scroll from-left once"
"once"を足してあげるだけね。

MAKI

伝えたいことを視覚的に目立たせられるのは便利だね。

BARTS

よし！僕も使ってみよう！

See the Pen Untitled by 5oji (@udagawa) on CodePen.