Rocket
動く吹き出しを活用した会話スタイル
吹き出しスタイルのページは、情報を魅力的かつ分かりやすく伝えるWEBデザイン手法です。テキストや図形を吹き出しに収め、コンテンツを引き立て、視聴者に重要なポイントを強調します。見やすい配置とデザインで、ウェブページ上の情報をスッキリと整理し、ユーザーにスムーズな閲覧体験を提供します。
目次:
吹き出しアニメーション
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よし！僕も使ってみよう！
この記事へのコメント
コメントはまだありません。
コメントを送る