アコーディオン仕様！開け閉めできる動きのあるホームページ

こんにちは！今日はmativeのホームページをご紹介したいと思います。

一見、他の事業部のホームページに比べると白を基調としたシンプルなつくりに

見えるのですが、パーツパーツで動きがあり、細かなところまで手の込んでいるつくりになっています。

まずは、WEBへ行った際に目に入る「Please give me work!」の文字！

こちらは少しずつ、かつ閲覧していただくユーザー様がきちんと目で追えるように1文ずつ表示させ、

表示のスピードも何度も微調整し、つくりあげています。

fade（フェード効果）での表示方法により、じわじわ、ほわーんとでてくる文章に目が引き付けられ、思わず

見入ってしまう、内容が頭に入ってきやすい表示方法になっているんです！

ここでメインに注目しがちですが、少し下へスクロールしていくと注目ポイントがもうひとつ！

右下にある「for example」の文字！

こちらの吹き出しにマウスかーあおるをあてるとmativeカラーに変化！

その吹き出しをポチっとクリックすると・・・びよーんと画面が下に伸びるではありませんか！！

こちらはjQueryでアコーディオン動作、（伸びたり縮んだりする）動きを指定しています。

「for example」＝「例えば・・・」という疑問ででてきそうな項目がいろんな吹き出しででてきます。

もともとが事業内容をわかりやすくするために、事業部やプロジェクトを流れで追えるよう

縦長のつくりになっていたので、長さがけっこうあったのですが、この部分を収納することによって

見やすい作りとなり、長さも少しカットされました。

画像にちょっとした動きをプラスさせたい、スライドショーを設置したい等、お考えの方は是非、ご参考に！