インタラクション入門

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

この数年で、ウェブやデジタルデバイスはレスポンシブでパワフルなものになりました。デザイナーや開発者として、私たちは複雑なインタラクションや印象的なアニメーションを構築できるリソースを利用できるようになりました。

ページの読み込み時にHeroタイトルのskewが変化するアニメーションの例です。

従来、このようなリソースは非常に特殊な JavaScript ライブラリで構築されることが多く、コンフリクトや癖のあるツールやプラグインを必要とし、コードベースの学習曲線も困難でした。

Webflow Designer では、インタラクションを視覚的に構築することで、非常にきめ細かいコントロールでコンテンツを操作するために必要なすべてのツールにアクセスできます。

クールな例をいくつかご覧ください。警告 このコンテンツには点滅やアニメーションがあり、視覚過敏の方に影響を与える可能性があります。

何がインタラクションを構成する？

インタラクションによって、2つの強力な要素でデザインできます: トリガー と アニメーション（例: もし これ が起こったら、それに対して あれ が起こります）。

トリガー（trigger）（例: クリック、スクロール、ホバー、マウスの動き、ページの読み込みなど）は、アニメーション（animation）（そのトリガーで何が起こるか）を実行します。

この精密な制御を持って、タイミングを設定したアニメーション、スクロールアニメーション、位置に基づくマウスアニメーションなどを、私たちの望む通りに適用できます。これにより、私たちは何でも構築できる力を手に入れることができます。

トリガーとアニメーションについて詳しく学び始めましょう。