LikePay Academyが「スーパーサイトAcademy」に変わりました。詳しくはこちらです。

インタラクション入門

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

この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。引用元はこちらです。

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

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

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

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

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

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

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

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

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

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

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

目次

あなたもNoCodeのプロに

充実したサポートであなたも、最短3ヶ月間でノーコードWeb制作のプロになれます。

  • 300以上のノーコード動画教材

  • チャットサポート

  • 個別ビデオ通話相談