🙆眺めるだけでコーディングアイデアが増えていく👍️ codefolio（コードフォリオ）は、Webサイトコーディングに役立つ動き集めたコーディングパーツ集・ギャラリーサイトです。 コーディング代行・外注サービス会社株式会社くまweb（https://xitter.gq/t.co/K1vIp0nahv）が運営しています。
Joined May 2024
- Tweets1.1K
- Following94
- Followers434
- Likes38
東京KAWAII夏遊2026
codef.jp/6506/
ファーストビューに散りばめられた浮遊するイベントカードが印象的。
こちらはドラッグして自由に動かすことができ、終わると元の場所に戻るユニークなアニメーション付き。
ロゴに負けないくらい華やかさを演出してくれる。
Inter Inter™ Creative Studio
codef.jp/6284/
メニューのhoverで左に表示された画像がスライダーのように変化する。
シンプルだが『選択したメニューが変わったんだ』というわかりやすい示しになっている。
また、CSSだけで実現可能のため挙動も軽い。
日建設計総合研究所
codef.jp/6466/
一見よくあるスライダーに見えるが、よく見るとスライダーの枚数表示・インジケーター・サムネイル表示・表示切替時のそれぞれのアニメーションなどスライダーに使用するであろうほぼすべての機能がこの一つに備えられている。
特に、メインスライダーになった際のサムネイルの切り替えとスライド時にテキスト部分もスライドして表示するというアニメーションは珍しい。
プラグインを使用した際にもアニメーション一つで再現できるものもあるのでぜひ残して参考にしたい。
Studio X
codef.jp/6460/
画面遷移時に登場するローディング画面の真ん中には作品の写真。
カチカチと切り替わる演出が心地よく、待ち時間も退屈することなく見ていられると同時に、ブランドのイメージの訴求にも繋がっている。
Kunsthalle Basel
codef.jp/6453/
開いたメニューのリンクをクリック後、メニューが閉じる動作を画面遷移のアニメーションに転用。
ありそうでなかった遷移アニメーションかつ無駄もなく、かつサイト全体の一体感も同時に生み出している。
Espacio La Nube
codef.jp/6447/
スライダーのインジケーターをサムネイルの周りに線を引くことで表現。
また、CSS「mask-composite」を使用することでマスクの合成方法が指定できるようになったため、より表現の幅が広がっている。
Agencia de Comunicación y Eventos - RPA Comunicación
codef.jp/6441/
メインビジュアルが大胆に形を変えていき、それに伴いテキストの表示位置も変化。
SVG・DOM・clip-path組み合わせて形を巧みに変化させている。
星野源 オフィシャルサイト
codef.jp/6435/
左メニューにhoverすると、メニューに応じて右のメインビジュアルが変化。
ただ画像が差し換えられるのではなく、写真を上から重ねていくようなアニメーションになっておりアーティストの世界観とも重なる。
Jump Seat
codef.jp/6428/
まるで男性のスマートフォンから空中に通知が出ているかのような近未来的ビジュアル。
通知部分は画像自体が斜めになっており、スクロールに合わせてフェードアウトするというシンプルな作り。
だが、配置や動きで魅力的な演出を表現することが可能となっている。
Evagria
codef.jp/6416/
スライダーのサムネイルにhoverしている間だけ画像が切り替わる仕様。
写真が目立つよう装飾は最低限に抑えられているため、操作性がよく快適に閲覧することが可能。