https://cp.pocky.jp/otona/index.html#
ポッキー 大人の琥珀 女神のルビーのサイト
2つある商品を青と赤のイメージカラーで区別し、
ストーリーで手元にある時を想像させるブランディングになっています。
各ショートストーリーの入り口に写真の上に文字が画像で乗っていますが、
句読点があるものないもの、写真に掛かった文字の色が変わるもの変わらないもので
バラバラになっており、統一感が損なわれています。
商品情報ページはモーダルになっています。
気になったWebサイトを集めてみました。
https://cp.pocky.jp/otona/index.html#
ポッキー 大人の琥珀 女神のルビーのサイト
2つある商品を青と赤のイメージカラーで区別し、
ストーリーで手元にある時を想像させるブランディングになっています。
各ショートストーリーの入り口に写真の上に文字が画像で乗っていますが、
句読点があるものないもの、写真に掛かった文字の色が変わるもの変わらないもので
バラバラになっており、統一感が損なわれています。
商品情報ページはモーダルになっています。
https://eiicon.net/about/tokyometro2019/
TOKYO METRO ACCELERATOR 2019のサイト
グローバルナビはスティッキーで追従後はサイズも小さくなります。
スムーススクロールも実装されています。
ベーカリー パンと焼き菓子のPapapapa-n! のサイト
ヘッダーのロゴが追従したり、シェフとクロワッサンが会話したりと
全体にユニークなイメージで作られています。
SNS 特にInstagramとの連携、メディアを意識していると思われます。
グローバルメニューが各見出しへのページ内リンクになっていますが
動きはsmooth-scroll.jsライブラリで作られています。
スライダーはSlider Pro、ページ内の動きはAnimate.cssとwow.jsを使用しています。
最下部のリンクから行けるティザーサイトのページには
文字がタイプされているような動きがあります。
これはinview.jsによる、画面スクロールで特定位置に入ると要素をアニメーション表示させる演出です。