エンゲージメントの紹介

インタラクションを活用して、サイトをよりダイナミックで魅力的なものにしましょう。

さまざまな時代を通じて、インターネットとデジタル機器は、受容性と機能性を増すように進化してきました。クリエイターやプログラマーとして、私たちは複雑なインタラクションや素晴らしいアニメーションを構築できるリソースを活用する機会を得ています。

ページの読み込み中にヒーロー タイトルの傾斜の変更を表示するアニメーションのイラスト。

通常、これらのリソースは、矛盾、特殊性、および難しいコード指向の学習曲線を伴う、高度に指定された JavaScript ライブラリ、要求の厳しいツール、およびプラグインを使用して作成されることがよくあります。

Webflowデザイナーでは、このコンテンツを非常に詳細な管理で処理するために必要なすべてのツールにアクセスできます。 相互作用を生み出す グラフィック的に.

印象的な事例をいくつか見てみましょう. 知らせ: このコンテンツには、視覚に敏感な人に影響を与える可能性のある点滅する光やアニメーションが含まれています。

インタラクション パネルで要素トリガー メニューが展開されます。
ページ トリガー メニューがインタラクション パネルで展開されます。

エンゲージメントを定義するものは何ですか?

インタラクションにより、2 つの堅牢なエンティティを中心に設計できるようになります。 刺激 そして アニメーション (例えば、 これ その時起こる それ 展開します。

刺激 (例:タップ、スクロール、ホバー、カーソル移動、ページの読み込みなど)がトリガーされ、 アニメーション (その刺激によって何が起こるか)。

「クリック」、「スクロール」、「ホバー」、「カーソル移動」、「ページ読み込み」のトリガーを示すアイコン。

このような正確な権限があれば、時間指定アニメーション、スクロールアニメーション、位置ベースのカーソルアニメーションを適用できます。 どちらにしても 私たちが好む方法で、私たちに製造する能力を与えています すべて 私たちは望んでいます。

刺激とアニメーションについてさらに詳しく知ることから始めましょう。

ユアン・マック