Joined May 2024
- Tweets 897
- Following 93
- Followers 431
- Likes 35
Photos and videos
Whitney Museum of American Art
codef.jp/5709/
ページ最上部から下にスクロールしていくと、徐々にロゴが小さくなる仕様。
また、それに合わせて周りのボーダーも形状が変化し、最後はheightとopacityによって消えていく。
1
1
81
実装はSVGとjsで構成されており、サイトの邪魔にならない且つFVではどんなサイトなのかがわかるよう工夫がされている。
1
71
ヘッダーのアニメーション仕様はPC版と同様。
ページ表示の際、ライト・ダークがスマートフォン本体に委ねられているのもユーザーを考えた仕様になっている。
58
Claude Type — French Type Foundry & Creative Atelier
codef.jp/5702/
メインビジュアルの上部は円になるようトリミング。上部・下部ともにborder-radiusを使用してトリミングを行っている。
画像のトリミング一つでファッションという商材に上品さがさらにプラスされている。
1
112
SP版では画像が1枚、角丸が四隅に変更されている。
PC・SP共に適用させやすいstyleのため、ぜひ活用したい。
56
Magnet Lover | Premium Custom Magnets for Bands, Tours & Music Brands
codef.jp/5696/
ローディング時、背景に敷かれたグリッドの上に散らばるように集まるアイコンはドラッグ＆ドロップが可能。
動かすたびにDOMでCSSの情報が更新される。
1
1
90
SP版でもアイコンを掴んで操作することが可能。
アイコンはページ全体に散りばめられており、画像自体は少ないが賑やかさが感じられるサイトとなっている。
62
Design & Development Agency in Bangalore
codef.jp/5574/
奥行のあるスライダーのようなオブジェクト。
translateZで画像を奥に傾け、全体をDOMで奥行を付けながら回転させることで立体的な動きを見せてくれる。
また、スクロールに追従する形で回転数は加速する。
1
1
93
テイクアンドギヴ・ニーズ 企業サイト
codef.jp/5568/
ページ全体がスライダーになっており、左ナビをhoverすると選択したメニューへのリンクが現れる。
メニューをクリックしてもページに飛ぶことはできるが、このスライダーの動きがあることでサイトの雰囲気が一気に変わる。
1
1
72
PC版では左にあったテキストメニューが、SP版ではそのままスライダーの中に組み込まれている。
スワイプでスライダーの切り替えが可能になるなど、操作性もデバイスごとに変化している。
48
FitDrop 1980-2025
codef.jp/5562/
オブジェクトの生成にはGeminiを、落ちてくる際の物理演算にはMatter.jsを使用。
流行りや最新のものを組み合わせるというお手本のようなサイト。
1
2
92
SP版もPC版と同様のものを使用。
時折処理落ちのような動作が見られるものの、処理速度はかなり早くスムーズに動くことが確認できる。
1
68
Elliott Mangham
codef.jp/5556/
サムネイルをhoverするとウインドウ風のモーダルが開き、動画が表示される。
hoverを外すとモーダルは消えるが、クリックをしておくと消えることはなく、少しの工夫でユーザビリティは向上する。
1
2
87
SP版では、サムネイルの表示数が異なる以外はPC版と同様の仕様。
スマートフォンの実機で見てもモーダル表示時がスムーズで気持ちのいい表示アニメーションとなっている。
43
of.domains
codef.jp/5550/
世代によってはどこか懐かしさを感じるアスキーアート。それを現代でMVとして採用。
canvasを使用しているかと思いきや、タグを見るとわかる通りすべてテキストをそのまま使用して配置されている。
2
1
5
146
まさかのスマートフォンの実機でも再現してしまうという恐ろしさ。まさに脱帽である。
味を出すという意味でのカクつきもありつつ、視差効果やオブジェクトの動きはスムーズ。
これを見ながら酒が飲めそうだ。
1
36
また、視差効果までついており、演算・表現処理などの技術がかなり高いことが容易に想像できる。
個人的に最近見たサイトの中で上位に君臨するほどテンションのアガるサイトの一つだ。
24
Timothy Saccenti
codef.jp/5544/
ハンバーガーメニュー内が独特な配置をしており、それがまたメインのスライダーのビジュアルと相まって独特な雰囲気を醸し出す。
配置は各メニューのマージンで調整されている。
1
1
81