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

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

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

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

▽サンプル

ポリゴンの数値による画像のモーフィングPart3(Adobe Muse) from KISHIOKA.DESIGN on Vimeo.

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