codefolio：コードフォリオ｜コーディングギャラリーサイト

🙆眺めるだけでコーディングアイデアが増えていく👍️
codefolio（コードフォリオ）は、Webサイトコーディングに役立つ動き集めたコーディングパーツ集・ギャラリーサイトです。
コーディング代行・外注サービス会社株式会社くまweb（

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SP版も動きは同様だが、配置や画像のアスペクト比が変更されている。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

Jera Capital: Secondary private equity
https://t.co/alddrTSdLK
ドットグリッドを基準にイメージがスクロールと連動して移動する構成がユニーク。レイアウトと動きが一体化し、静的なデザイン以上の面白さを生み出している。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

スクロールするとグリッドを基準にイメージ画像が拡大・縮小するアニメーションがユニーク。

ただ画像が配置してあるだけでは出せない面白さを生み出している。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SP版でも同様の動き。

ハンバーガーメニューは閉じず、その上から遷移先が被さるイメージ。

実機で見ても動きは滑らかでタイムラグを感じることもない。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

House of Honey
https://t.co/HpRCQBdr18

画面遷移時、遷移先のページが上から重なるアニメーションがサイトのイメージと合っておりリッチな印象を与える。

また、画像量の多いサイトながらアニメーションが滑らかな部分は技術の高さが伺える。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SP版でも同様のモーションやオブジェクトを使用。

Lottieにすることによりスマートフォンで1カラムになっても画像やアニメーションが鮮明かつ軽量に描写することが可能。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

Open-Source Industrial Data Platform for Factories | UMH
https://t.co/XWMbseAyOM
各サービスを抽象化しモーショングラフィック化することで、より視覚的に訴求することが可能。

また、Lottieアニメーションを使用することでより軽量化・汎用化されている。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SP版ではこの部分がまるっと削除されている。

デバイスへの負荷を考慮しその他のアニメーションもPC版に比べて簡略化されている。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

核點 Nudot Studio
https://t.co/7B0hiL8HH4
縦に並ぶテキストがスクロールすることにより波打つように滑らかに動きを見せる。

動きはスクロールごとにDOMで操作。最近はスクロールでDOMを動かすという手法をよく見かけるようになった。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

スマートフォンではスワイプでの切り替わりはなし。

切り替え時の回転もPC版より省略されている。

奥行きはや回転など動き自体は維持したまま、デバイスごとに適切な引き算が施されている。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

Squarespace Foundations
https://t.co/2fs7TZP4p8
スクロールすると各スライドがZ方向に回転しながら全面に表示されるかなり手の凝った作りになっている。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SP版もPC同様のアニメーション。

待ち時間も退屈させないような工夫がされており、かつスマートフォンで見ても重たくないようなアニメーションが採用されている。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

Experience.Lab
https://t.co/SoJwgcnL37
ローディング時、ページ下部にはメインからのバー。

そして「東京」の文字の隣には日本を象徴するようなオブジェクトがコマ送りのように次々と登場する。

個人的にはローディング後、カーソルが魚型の醤油入れになっているのもポイントが高い。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SP版もPCと同じアニメーションを再現。

これだけほぼ全てのセクションにバラバラのアニメーションを施しているにも関わらず、重たさを感じないのは見事。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SAKAZUKI - Unlocking Japan's Hidden Gems
https://t.co/KHSYTFejzD
ヘッダーに配置されたロゴをそのセクションに合った形・大きさ・色に変化させることでヘッダーも一つのオブジェクトとして設計されている。

動きはDOＭでstyleやclassを変化させている。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

オブジェクトの動きはDOMで操作。

動きは右から左、左から右とほぼ同じだが、それぞれの開始タイミングが異なるため、ずっと見ていても飽きない。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

CRAV | Artisan Smashed Burgers
https://t.co/lJhWvq2RSN
フッターに配置されたハンバーガーの具材のオブジェクトが次から次へと跳ねるアニメーションはそれだけで賑やか！

サイトやブランド全体のイメージをより強め、サイトの最後まで飽きさせない意思が見て取れる。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SP時も同様のアニメーションを採用。

動きはテキストの配置・アニメーションなど全てDOＭで操作している。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

Sui | The Full Stack for a New Global Economy
https://t.co/jE64QWFQrE
よく見るタイプライター風に徐々にテキストが出てくるエフェクト。

それに加えキャレット（テキストカーソル）の色が徐々に変わるよう設定されており、よりワープロのような印象を持つ。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

SP版はカードに触れることはできないが、常にふわふわと動き続けているので寂しさや物足りなさを感じることはなく、むしろ小さな画面の中にぎゅっと要素が詰まっているためとても賑やかに感じる。

[codefolio：コードフォリオ｜コーディングギャラリーサイト @codef_official]

東京KAWAII夏遊2026
https://t.co/MhDIM7SNqr
ファーストビューに散りばめられた浮遊するイベントカードが印象的。

こちらはドラッグして自由に動かすことができ、終わると元の場所に戻るユニークなアニメーション付き。

ロゴに負けないくらい華やかさを演出してくれる。