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. dropdown-list

    ドロップダウンメニュー(Adobe Muse)

    サードパーティウィジェット「Dropdown List」Widgetを利用することで、ドロップダ…

  2. fullscreen-gallery

    フルスクリーンフォトギャラリー(Adobe Muse)

    サードパーティウィジェット「Fullscreen Thumbnail Gallery」Widgetを…

  3. modal-pop-up

    モーダルポップアップ通知(Adobe Muse)

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

  4. randomizer01

    イメージのランダム表示(Adobe Muse)

    サードパーティウィジェット「Randomizer」Widgetを利用することで、アクセスする度に…

  5. twitter-feed-pro

    ページ上にTwitterのフィードを掲載(Adobe Muse)…

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

  6. muse-Introduction2-5

    Adobe Muse CCならブラウザ上から更新可能。 (Ado…

    Adobe Muse CCならブラウザ上から更新可能。 (Adobe Muse) from ya…

  7. animate-sample06

    水平移動、垂直移動、角度変更、連続回転のアニメーション(Adob…

    ◎HTML5 CanvasではFlashプラグインを使用せずにインタラクティブコンテンツの表現を…

  8. table-maker

    表組の作成(Adobe Muse)

    サードパーティウィジェット「Table Maker」Widgetを利用することで、表組作成機能の…

PAGE TOP