menu

ポリゴンの数値による画像のモーフィング(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)

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

関連記事

  1. 26-menu-styles

    メニューのデザインに動きのあるちょっとしたアクセントを(Adob…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  2. musexpress11

    MuseとWordPressの連携(その4/Adobe Muse…

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

  3. musexpress2_0-10

    MuseとWordPressの連携(その7/Adobe Muse…

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

  4. animated-slide-in_03

    アニメーションスライドイン通知(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェット「…

  5. rapidreveal01

    アコーディオン方式で展開させるイメージギャラリー(Adobe M…

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  6. musexpress2-01

    MusexPress 2.0/近日公開

    Chromeで翻訳されたものを書き出しています。なんとな〜く意味しているものは読み取れると思いま…

  7. pdfviewer

    PDFファイルをダイレクトに掲載(Adobe Muse)

    【Adobe Muse】の機能を利用したコンテンツを紹介しています。サードパーティウィジェッ…

  8. google-calender

    グーグルカレンダーへのアクセス(Adobe Muse CC)

    2018年5月13日(更新)☆Google Calendar(v1.4)Googleのサーバ…

PAGE TOP