#42| インタラクション入門

トリガーとアニメーションの概要を説明します。

目次


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

A webpage called Megan Garcia Portfolio displaying a trigger from the start to finish. On the left is the page upon arrival, on the right the page load trigger has occurred. The page trigger section is overlaid on the left website screenshot including two triggers, page load and while page is scrolling.
A selected projects card that includes an element trigger called mouse hover is displayed. On the left is the element's none state. On the right is the element's hover state with a colorful gradient drop shadow underneath the element.

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

ウェブフローデザイナーでは、インタラクションを視覚的に構築することで、コンテンツを非常に細かく制御するために必要なすべてのツールにアクセスすることができます。

A website called GEM studio has loading elements on the home page. The Main listing is selected and the interactions panel is open to the loading elements settings section.

インタラクションを構成する要素とは?


インタラクションは、トリガーとアニメーションという2つの強力なものを中心にデザインすることを可能にします。(クリック、スクロール、ホバー、マウスの移動、ページの読み込みなど、トリガーはアニメーション(トリガーで起こること)を実行します。)


Black icons are illustrating the triggers clicking, scrolling, hovering, moving mouse and loading page.


そして、この緻密なコントロールにより、時間軸を持ったアニメーション、スクロールアニメーション、位置情報を持ったマウスアニメーションなど、思い通りのアニメーションを適用することができ、どんなものでも作り上げることができます。