image-shapes-a-01-2

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

ポリゴンの数値による画像のモーフィング(Adobe Muse)

【Adobe Muse】の機能を利用したコンテンツを紹介しています。
サードパーティウィジェット「Image Shapes」Widgetを利用することで、
1枚の画像を使って面白いアニメーションを掲載することが可能になります。

・画像の前と後をポリゴンの数値で図形を設定。
・オンロード、ホバーオン、クリック時、またはスクロール時に2つの図形間をモーフィング。モーフィングの速度、遅延、リピート、インージングを設定。

・ポリゴンの形状は下記のアドレスから抽出します。
https://bennettfeely.com/clippy/

☆イラストレーターで作成した図案をSVCで別名保存する際にSVGコードを確認することができます。ポリゴンのパスが取得できればコピーペーストで「Image Shapes」Widgetで利用することができます。※幾つか試しましたが形状の簡単なものでないと難しいようです。

▽サンプル
live-preview

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

slanted-panels-01斜めのラインとスクロール効果を使う流行のデザインも簡単に表現可能(Adobe Muse)前のページ

ポリゴンの数値による画像のモーフィングPart2(Adobe Muse)次のページimage-shapes-b-01

関連記事

  1. yamase_03
  2. animated-text01

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

    74種類のテキストアニメーションをAdobe Museで表現(Adobe Muse)

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

  3. musexpress06

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

    MuseとWordPressの連携(その2/Adobe Muse)

    Adobe MuseとWordPressを連携させたサイトの制作に挑戦…

  4. headliner

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

    9種類のテキストアニメーション(Adobe Muse)

    サードパーティウィジェット「HeadLiner」Widgetを利用する…

  5. fullscreen-split-slider01

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

    フルスクリーン分割スライダー(Adobe Muse)

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

  6. sideber-nabigation

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

    サイドナビゲーションメニュー(Adobe Muse)

    サードパーティウィジェット「Sideber Nabigation Me…

  1. filmora-pho009-02

    Filmora

    トランジション「ベーシック編1」(Filmora)
  2. cartoonanimator-img001

    Cartoon Animator

    Cartoon Animatorを始める。
  3. convenient01

    これは、便利かも!!

    交換用にスウォッチを保存(Adobe Muse 他)
  4. mapbox-custom-maps2-01

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

    視覚的に美しいMapの掲載(Adobe Muse)
  5. xd005

    Adobe XD

    自動アニメーションで目を左右に動かしてみる(Adobe XD)
PAGE TOP