image-shapes-c-01

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

ポリゴンの数値による画像のモーフィング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ビデオギャラリー(Adobe Muse)次のページyoutube-video-gallery-01

関連記事

  1. musexpress3_07

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

    インストールから公開まで(MusexPress3)

    『Adobe Muse』と『MusexPress3』を組み合わせること…

  2. versaslide_img01

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

    ページスライドアニメーション(Adobe Muse)

    サードパーティウィジェットの「Versa Slide」Widgetを利…

  3. carousel-image-slider01

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

    カルーセル画像スライダ2.0(Adobe Muse CC)

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

  4. muse-table-01

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

    Museの苦手なテーブル機能を克服(Adobe Muse)

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

  5. gallery-connect01

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

    CSVファイルでコントロールするギャラリー(Adobe Muse)

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

  6. muse-samplesite01-01

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

    Adobe Museでレスポンシブ対応サンプルサイト01(Adobe Muse CC)

    Adobe Muse CCを利用して、レスポンシブ対応のサンプルサイト…

  1. studio11-01

    STUDIO

    サンプルサイト10/テーマ:家具製作所
  2. filmora033-01

    Filmora

    旅の素敵な動画を飾る27種類のエレメント(Filmora)
  3. musexpress2_0-06

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

    MuseとWordPressの連携(その6/Adobe Muse)
  4. animated-slide-in_03

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

    アニメーションスライドイン通知(Adobe Muse)
  5. ch-lipthink01

    Character Animater

    シーンオーディオからリップシンクを計算(Adobe Character Anim…
PAGE TOP