menu

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

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

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

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

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

▽サンプル
live-preview

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

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

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

youtube-video-gallery-01YouTubeビデオギャラリー(Adobe Muse)

関連記事

  1. water-ripple-effect02

    画面いっぱいに水の波紋(Adobe Muse)

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

  2. muse-samplesite03-03

    Animate CC+Muse CCでスクロール効果を使ったアニ…

    iMac Proの紹介ページにあるブラウザのスクロールに合わせて横向きのiMacが正面を向くアニ…

  3. svgdraw2018

    SVGドローアニメーション(Adobe Muse CC)

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

  4. hero-connect03

    時刻や曜日に合わせて画像・動画・テキストを自動で切り替え(Ado…

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

  5. fullscreen-video-slideshow-cover

    フルスクリーンビデオスライドショー(Adobe Muse)

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

  6. image-shapes-a-01-2

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

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

  7. modal-pop-up

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

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

  8. audio-visualizer

    音に合わせてヴィジュアルが変化(Adobe Muse)

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

PAGE TOP