tooltips02

Adobe Muse CCを使ったホームページ制作

ツールチップをアニメーションで演出(Adobe Muse CC)

【Adobe Muse】の機能を利用したコンテンツを紹介しています。
サードパーティウィジェット「Tooltips」Widgetを利用すると、
イメージに対して、マウスオーバーもしくはクリックによって、
ツールチップを表示させることが可能になります。
単に表示させるだけでなく、アニメーションによる演出ができます。

<設定パネル>
・Tooltip Message:ツールチップに表示させるメッセージ。
・Font Family:フォントの指定。
・Tooltip Position:ツールチップを表示させる位置。上、下、右、左から選択。
・Intraction:ツールチップの起動アクション。マウスオーバーかクリックを選択。
・Animation Style:アニメーションをShift、Perspective、Fade、Scaleから選択。
・Animation Duration:アニメーションが完了するまでの時間。
・Animation Delay:ツールチップの起動開始までの時間。
・Theme:ツールチップの色をダークとライトから選択。
・Size:ツールチップの大きさを大、中、小から選択。

▽サンプル
live-preview

「Tooltips」Widgetについての詳細はコチラ(外部サイト)

multiscroll01左右の画面を逆スクロールで1枚に合成(Adobe Muse CC)前のページ

130種類以上の中からアニメーションを選択(Adobe Muse CC)次のページanimator01

関連記事

  1. absolute-muse-menu2-11

    Adobe Muse CCを使ったホームページ制作

    カスタマイズ豊富なハンバーガーメニュー(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。…

  2. muse-samplesite03-03
  3. scroll-bar

    Adobe Muse CCを使ったホームページ制作

    スクロールバー(Adobe Muse)

    サードパーティウィジェット「Custom Scroll Bar」Wid…

  4. animate-sample12
  5. google-calender
  6. dynamic-slide

    Adobe Muse CCを使ったホームページ制作

    映画的表現のスライドショー(Adobe Muse)

    サードパーティウィジェット「Dynamic Slide」Widgetを…

  1. tooltips02

    Adobe Muse CCを使ったホームページ制作

    ツールチップをアニメーションで演出(Adobe Muse CC)
  2. animate-sample12-2

    Adobe Animate CCを使ったコンテンツ制作

    カメラツールでパン、ズームイン・アウト、回転(Adobe Animate CC)…
  3. image-shapes-b-01

    Adobe Muse CCを使ったホームページ制作

    ポリゴンの数値による画像のモーフィングPart2(Adobe Muse)
  4. animate-sample04

    Adobe Animate CCを使ったコンテンツ制作

    オブジェクトの表示・非表示・移動(Adobe Animate CC)
  5. filmora-pho017-02

    Filmora

    ファッションコレクション/フィルター10種(Filmora)
PAGE TOP