ShowMotion

Image & Media

Before-After Slider (ビフォーアフタースライダー)

別名 Image comparison slider, Compare slider

ドラッグできる仕切りの左右で、それぞれ別の画像が見えます。

使いどころ

写真のレタッチ、製品比較

バリエーション

  • horizontal
  • vertical
  • hover-controlled

デモのソースを見る

プロンプト

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。

[適用する場所]にビフォーアフタースライダー(Before-After Slider)を追加してください。画像比較スライダー(image comparison slider)、コンペアスライダー(compare slider)とも呼ばれます。
2枚の画像を重ね、縦の仕切りをドラッグすると一方が多く、もう一方が少なく見えるようにしてください。仕切りは遅れなくポインターにそのままついてきます。
仕切りは中央から始め、タッチと矢印キーでも動かせるようにしてください。

似ているモーション

Image Reveal Wipe (画像リビールワイプ)

別名 Mask reveal, Clip-path reveal, SVG mask effect, Scroll Image Reveal, Clip-path Reveal on Scroll

覆いが縮む、またはマスクの縁が広がることで画像が現れます。

使いどころ

スクロールで現れる記事の画像

Text Reveal Card (テキストリビールカード)

別名 Spotlight Text Reveal

カード上でポインターを動かすと、マスクの境界やスポットライトの下に隠れたテキストが現れます。

使いどころ

機能紹介カード

SVG Mask Reveal (SVGマスクリビール)

別名 SVG Mask Effect, Clip-path Reveal, Spotlight Mask

マスクの形がワイプしたりポインターを追ったりして、下にあるコンテンツを見せます。

使いどころ

画像やコンテンツの表示演出

Drag (ドラッグ)

別名 Draggable, Drag constraints

ドラッグすると要素がポインターに追従し、範囲や軸を制限することもできます。

使いどころ

スライダー、並べ替え可能なカード

Hover Zoom (ホバーズーム)

別名 Image zoom on hover, Zoom-pan, Ken Burns hover zoom, Zoom effect

ホバーすると画像が枠の中で拡大し、ポインターに合わせて動くこともあります。

使いどころ

製品カード、サムネイル

Ken Burns Effect (ケンバーンズエフェクト)

別名 Slow pan and zoom, Ken Burns, Kenburns

静止画が枠の中でゆっくりズームしながら移動します。

使いどころ

ヒーローのスライドショー、背景

[適用する場所] を使いたい場所に置き換えて、AIエージェントに貼り付けてください。プロンプトにはモーションの名前が入っているので、次からは名前だけで依頼できます。