【勝手にWEBサイトレビュー#25】縦横スクロールの動きが面白いページ

こんにちは!

Webデザインアワードで入賞しているWebサイトのご紹介第25回です。

今回も引き続き「CSS Design Awards」または「Awwwards」の中から特に目に留まったWebサイトをご紹介していきます!

ご紹介Webサイト「Color of the year 2019 — PANTONE 」

今回ご紹介するのは、PantoneのColor of the Year2019の発表ページです。
CSS Design Awards、Awwwardsのどちらも入賞しています。

▼CSS Design Awards掲載ページ
https://www.cssdesignawards.com/sites/pantone-color-of-the-year-2019/35224/

▼Awwwards掲載ページ
https://www.awwwards.com/sites/pantone-color-of-the-year-2019

真似したいポイント

縦横スクロールの絶妙なバランスと組み合わせ

ページ全体は縦にスクロールするページとなっていますが、スクロールの動きに合わせて横からコンテンツが出てくる部分があります。
そこを通り過ぎ、スクロールを進めると下から縦方向にコンテンツが表示されるため、様々な方向からコンテンツが出てきているように感じます。
色々な動きがあるだけではなく、表示のタイミングや位置が絶妙なバランスになっているためとても面白いです!

すごい!と思ったポイント

パズルのようなメニューの動き

左下のメニューをクリックすると、パズルが組み立てられるようにメニューが表示されます。
そして、メニューのリンククリック時や閉じた時にも同じようにバラバラと閉じていく動きが入っています。
メニューの表示方法にもひと工夫を入れているのがすごいと思いました!

メニューの中のリンクのバランス

メニューの中身は同じ大きさでテキストを並べるサイトをよく見かけますが、こちらのページではコンテンツごとに大きさ、背景色が違っています。
バラバラなサイズになっているのではなく、半分ずつの大きさとなっているためバランスも良くなっているためすごい!と思いました。

まとめ

動きや見せ方に工夫があり、隅々までみたくなるページでした!
ぜひ見てみてください!

前回のレビューはこちら

0

関連記事

  • 2021.04.16

    【勝手にWEBサイトレビュー#28】画像の枠にこだわりのあるポートフォリオサイト

    サイトレビュー

  • 2021.04.15

    【勝手にWEBサイトレビュー#27】画面スクロールで楽しめるWPテーマコレクションサイト

    サイトレビュー

  • 2021.04.11

    【勝手にWEBサイトレビュー#26】細かな工夫・こだわりがすごい!フランスのインタラクティブデザイナーのポートフォ……

    サイトレビュー

おすすめ記事

  • 2019.02.08

    【css】IEにobject-fitを簡単に効かせる方法

    CSS

  • 2021.02.06

    【CSS】疑似要素(before, after)に画像を表示させる方法【サイズ変更も可能】

    CSS

    HTML5

  • コーディングで画像を好きな形に切り抜く方法

    2021.02.10

    【CSS】コーディングで画像を好きな形に切り抜く方法【IEにも対応】

    CSS

株式会社スピカデザイン

渋谷のWEB制作会社「スピカデザイン」の現役コーダー達が、WEB制作のヒントになるような情報をお届けします。

https://spiqa.design/

spiqa_design

質問・感想などはこちら!

REQUEST

ご意見、感想や記事のリクエストなど
メッセージお待ちしております!