Adobe XDの正式版、InVision Studioの発表と今月は熱いニュースが続いておりますが…どうやら年末に向けてみなさん一斉にリリースに走っている様子ですね。

レスポンシブデザインのサイトが簡単に構築できるWebflowが大きなバージョンアップ「インタラクション2.0」をリリースしました。

Webflowでもともとできること

WebflowはWebサービスで、かっこいいレスポンシブデザインのWebサイト構築が簡単にできちゃうものでした。Wixとかよりデザイン性に優れてたイメージです。

インタラクション2.0で出来るようになったこと

今までもレスポンシブ対応は出来ていたわけですが、今回のバージョンアップでFlashみたいな動きをする近年ではJavaScriptでアニメーションをゴリゴリ書くみたいなことが簡単に出来るようになったみたいです。

パララックスエフェクト

最近はちょっと落ち着いてきた感がありますが、スクロールすると背景が視差効果でズレるやつが、ポチポチするだけで実装できるみたいです。

スクロールに合わせたインジケーター表示

スクロール量に合わせてインジケーターが伸びていくインタラクションが簡単に実装できます。これそんなに需要あるのかな…

スクロールに合わせて動くクラフトアニメーション

これ楽しいー！！文章で説明できないので動画見てください！

マウスオーバー時の特殊なインタラクション

マウスオーバーしたときに影が出たりカードが動いたりするインタラクションが付けられます

タイムラインベースのアニメーション作成

タイムラインを使ってスライドショーのようにアニメーション作成が出来ます

この他にも豊富なインタラクションが勢揃い！

ぜひこちらのサイトから機能を見ていただきたいのですが、他にも色々インタラクションとアニメーションが豊富に揃っていて、動きがある派手なサイトを作るのにはピカイチの存在になりそう。

webflow.com

Website Interactions and Animations | Webflow

https://webflow.com/interactions-animations

Build website interactions and animations visually — without writing code. Add parallax scrolling effects, mouse based motion, and multi-step animations without learning CSS and JavaScript.

そしてすげーくだらないティザーサイトもあります。これは一見の価値ありw

webflow.com

Interactions 2.0 — Bring the web back to life

https://webflow.com/ix2

A completely visual way to build amazing interactions and animations for the web.

書き手：小島 芳樹 Webやスマートフォンアプリによるサービスを開発・提供する会社で働いています。 Twitter： @yoshikikoji