Skip to main content
room14
Participant
November 15, 2018
質問

アニメーションを利用したエントランスのデザイン

  • November 15, 2018
  • 返信数 1.
  • 369 ビュー

webページのエントランスについて、下記のようなデザインを行いたいです。

まず、画像のようなループするアニメーションが画面全体に流れていて(デフォルトの状態)、

次に、中心のロゴをクリックすると、ロゴが点滅し、トップページ(画像のような2カラムのもの)に遷移する。

この時、トップページへの移動をリンク(ジャンプ)ではなくアニメーションによる遷移で行いたいのですが、

どのようにスクリプト(あるいは、css)を処理すれば良いでしょうか。

尚、アニメーションによる遷移としては、丸型のパスが出現して中心から画面全体を覆う(パスに設定された色がページの背景色になる)、

というものを考えています。(もっとかっこいいアニメーションがあったら、参考ページなど教えていただけたらありがたいです。)

よろしくお願いいたします。

このトピックへの返信は締め切られました。

返信数 1

Inspiring
November 17, 2018

あいにくDreamweaverの機能だけでご希望のコンテンツを作成するのは困難です。

今はYouTube等の動画を背景に読み込んで、それをJavaScriptやCSSを使って透明度や重ね順を変える手法が多いのではないでしょうか。アニメーション自体は通常の動画作成と同じ手法で作成するのがよろしいかと思います。

具体的な実装方法については、以下のサイト等が参考になるかと。

http://www.jra.go.jp/special/take4000/

https://ace7.acecombat.jp

https://www.marukyou-mk.co.jp

その他、ネット上では様々な手法やJavaScriptのライブラリ等も提供されていますので、ご自身で研究してみてください。