インタラクション❶
某案件でインタラクションについてサンプリングしたので
雑感とともに記録。
ごりごりでなくシンプルなもの、というオーダーで探したのだが、そもそもインタラクションとはなにを指すのかというところからだった。今回の場合はボタンのhoverやコンテンツ表示のアニメーション、パララックス、スライダー、背景の動画...などのことだった。
＜ファーストビューの部分＞
●グロナビはマウスオーバーすると太めの下線が左から右に入る。シンプルで上品。文字が小さいので太めでバランス良い印象。
●区分けされた地色がそれぞれ入ってくるアニメーションが、デザインとトンマナにマッチしていていいなと感じた。
●スライダーのボタンの矢印の動きも気が利いている
＜コンテンツ部分＞
●「→」にマウスオーバーすると矢印が右にずれて「more→」になる。
●テキストリンク、太めアンダーラインが右から左に表示されつつ、全体が若干右にずれる
など、シンプルながら小技がきいている。
https://departures-international.com/
＜全体の動き＞
●固定ヘッダーがスクロールしはじめると幅いっぱいになり、表示されるコンテンツのキーカラーに変化していく。
●スクロールダウンすると見出しが横から入ってきたり、画像が下から入ってきたりする。
●スクロールアップ（？）すると画像のトリミングが斜めになりスピード感を感じるようになっている。
●また、一度アニメーション表示されたものも、スクロールアップ用にべつのアニメーションがついている。上から表示される。
●→にオーバーしたときの動きもとてもこっている。でもパーツのデザインがシンプルなので、過剰には感じない。
＜ハンバーガーメニュー＞
●画面幅いっぱい。左右からスライドインしてくる。
●3つに区切って要素が置かれており、スクロールで文字が横にスクロールしたり、それぞれに違ったうごきがある。しかもここも色が変わる...
●セクションごとのスクロール
●hoverの動きがちょっとちらつく
●下層、スクロール似合わせて要素の表示にアニメーション
●その際、画像が表示されるときに若干ズームインするのが、表示のアニメーションとあいまって、とても優雅で上質そうに感じる。画像のテイスト、テンションにあった演出だと思った。
●関係ないが、シンボルマーク、縁が太いせいもあって家紋みたいに見える....
●ファーストビューごちゃついて見える
●スクロールすると、要素（レイアウト）に合わせて横から入ってきたり、下から入るアニメーション
●表組みっぽい文字も行ごとにふわっとしたから入ってくる
●画像リンクのhoverの動きが気持ちがよくて何度も試してしまう。
●ページ下の方の雲と山と大きな文字のパララックスすごい。
●画像にオーバーしたとき、マウスの動きに合わせて画像が傾くのすごい。（作文）
●見出し、文字はその場で表示されるだけだが、上下のラインがばらばらと動いて一本の線になるのがとても美しい
●自然に動画が差し込まれていて、シンプルでいいなと思った。
文字がくるっと回転するやつを探したが見つからず。
今回のサンプリングはキュレーションサイトでサムネ見ながらトンマナの合っていそうなサイトを開いて確認して、という感じだった。
インタラクションのキュレーションサイトってないのかな。
CSSでの動きだけならいろいろあるけど、、、。
あと面白い動きのものがあったので、また次回に。
この記事が気に入ったらサポートをしてみませんか？