🙆眺めるだけでコーディングアイデアが増えていく👍️ codefolio（コードフォリオ）は、Webサイトコーディングに役立つ動き集めたコーディングパーツ集・ギャラリーサイトです。 コーディング代行・外注サービス会社株式会社くまweb（https://xitter.cf/t.co/K1vIp0nahv）が運営しています。
Joined May 2024
- Tweets1.1K
- Following94
- Followers431
- Likes38
Jump Seat
codef.jp/6428/
まるで男性のスマートフォンから空中に通知が出ているかのような近未来的ビジュアル。
通知部分は画像自体が斜めになっており、スクロールに合わせてフェードアウトするというシンプルな作り。
だが、配置や動きで魅力的な演出を表現することが可能となっている。
Evagria
codef.jp/6416/
スライダーのサムネイルにhoverしている間だけ画像が切り替わる仕様。
写真が目立つよう装飾は最低限に抑えられているため、操作性がよく快適に閲覧することが可能。
The Weather Channel - RetroCast Now
codef.jp/6422/
天気APIから取得した情報をレトロ番組風に表現する発想が魅力的。大半をDOMで構築しながら高い完成度を実現し、API活用の可能性を感じさせる。
数時代前に戻ったかのようなレトロな見た目のお天気情報サイト。
Will Lenzen — Writer and Design Engineer
codef.jp/6410/
本棚を模したUIをクリックすると、取り出した本が開いたかのように情報が表示される仕組み。
コンセプトとアニメーションが上手く融合したモーダルになっている。
株式会社ポケモン
codef.jp/6404/
スクロールする際に登場するキャラクター一つ一つがアニメーションWebPで作られている。
リッチ度の高さと工数削減を同時に実現した実践的な例となっている。
Ownitt
codef.jp/6398/
マウスの動きに合わせてメインビジュアルに奥行きが加えられる演出が秀逸。
DOMでcssを操作しマウスが動く度にtransformの数値を調整している。
Glossar
codef.jp/6392/
ドイツ語の学習アプリの紹介サイト。
マウスに付随する学習レベルのアイコンがカラフルかつ商材の紹介にもつながる演出となっている。
X GROUP｜新ブランド特設サイト
codef.jp/6386/
テキストに重なったボックスが一文字ずつドットのように消えていく演出が個性的。
レトロさとデジタルを感じさせる表現がカラーも相まって強い印象を与える。
Auremin
codef.jp/6380/
SVGで描かれた地図の上にモーダル表示用のアイコンを設置。クリックすることで該当のモーダルが右から出現する。
実装方法はとてもシンプルだが、アニメーションのタイミングなどにこだわりと美しさを感じる。
Meech213
codef.jp/6373/
3D空間を活用したリッチなスライダーが目を引く。
CanvasとWebGLを使用し、滑らかなアニメーションを表現。
画像と動画、どちらにも対応しているところも魅力の一つ。