ボタンクリックやマウスホバーなど何かしらのイベント発生時にスクリーンがアニメーションで出現するスクリーンアニメーションの作成方法や、webflowにおける各デバイス毎のフルスクリーン設定方法を一緒にご紹介します。
これまでレスポンシブデザイン対応のナビゲーションバーを作成し、アニメーション対応のハンバーガーメニューを作成の仕方をご紹介してきました。この回では、ハンバーガーメニューを押した後に登場するスクリーンアニメーションについても説明します。
フルスクリーンとはディスプレイ表示領域いっぱいにスクリーンを表示させることです。【webflowでハンバーガーメニュー】ゼロから作成！よりナビゲーションメニューを作成した状態でフルスクリーンを設置します。
ボタンクリックやマウスホバーなど何かしらのイベント発生時にスクリーンが登場するスクリーンアニメーションを設定します。【webflowでハンバーガーメニュー】アニメーションで作ろう！で設定したinteractionの中に、スクリーンアニメーション設定を行います。
作成したアニメーションを実際に動かしてみます。プレビュー画面にして、ハンバーガーメニューをクリックするとフルスクリーンがアニメーションで現れます。2回目クリックするとフルスクリーンが閉じます。現在はスクリーンの中身が何もありませんので、次のステップでコンテンツを入れてみましょう。
フルスクリーンアニメーションを作成することが出来ました。まだ、スクリーン内にコンテンツが無い為、好きなコンテンツを入れてみましょう。
フルスクリーンアニメーションは無事作成出来ましたでしょうか？ハンバーガーメニュー関連から派生してご紹介してきましたが、WEBサイト制作ではよく使う場面も多いかと思いますので是非ご活用ください。アニメーション設定も思った以上に簡単に出来ると感じていただいた方、webflowはまだまだ奥深く設定が可能ですので今後ともwebflowでより良いサイト構築を目指してください。
05.png)
06.png)
10.png)
007.png)
.png)
2.png)
1.png)