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

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

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

SP版では、サムネイルの表示数が異なる以外はPC版と同様の仕様。

スマートフォンの実機で見てもモーダル表示時がスムーズで気持ちのいい表示アニメーションとなっている。

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

Elliott Mangham
https://t.co/TysYHlF2RD
サムネイルをhoverするとウインドウ風のモーダルが開き、動画が表示される。

hoverを外すとモーダルは消えるが、クリックをしておくと消えることはなく、少しの工夫でユーザビリティは向上する。

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

まさかのスマートフォンの実機でも再現してしまうという恐ろしさ。まさに脱帽である。

味を出すという意味でのカクつきもありつつ、視差効果やオブジェクトの動きはスムーズ。

これを見ながら酒が飲めそうだ。

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

https://t.co/pUDk5bXi7N
https://t.co/0ARHpOam63
世代によってはどこか懐かしさを感じるアスキーアート。それを現代でMVとして採用。

canvasを使用しているかと思いきや、タグを見るとわかる通りすべてテキストをそのまま使用して配置されている。

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

また、視差効果までついており、演算・表現処理などの技術がかなり高いことが容易に想像できる。

個人的に最近見たサイトの中で上位に君臨するほどテンションのアガるサイトの一つだ。

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

SP版は視認性を優先してか、配置が縦並びに変更されている。

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

Timothy Saccenti
https://t.co/cfQ1M8KHiJ
ハンバーガーメニュー内が独特な配置をしており、それがまたメインのスライダーのビジュアルと相まって独特な雰囲気を醸し出す。

配置は各メニューのマージンで調整されている。

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

SP版でも仕様やアニメーションはPC版同様。

サイト構成もPCとSPでほぼ差がないため管理しやすい一面もある。

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

group8 architectes
https://t.co/aGJpw9nISh
奥行のある立体的なスライダーが印象的。

スライダーの画像部分はcanvasを使用し、下のテキストはDOM操作。

二つを連動させることで性能とデザインの両立を実現させている。

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

SP版では、カードが重ねられており、左右にスワイプすることで捲ることができる。

各カードのz-indexを変更しているのではなく、重なり順はそのままに、カードの表示内容が変更されているようだ。

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

Interface Craft
https://t.co/kHRjTfTLA9
横に並んだカードをクリックすると拡大し、詳細テキストが読める仕様。

たまに見かける動きではあるが、カード一つ一つのビジュアルにはcanvasを使用しており、力が入っていることが伺える。

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

SP版でも基本動きはPC版と同様だが、キャッチコピーの配置に合わせてボールの動きも右から左への動きに変化している。

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

ballaholic Hub FUKUOKA
https://t.co/RlZqO27de8
サイトを開いた瞬間、目に飛び込んでくるバスケットボール。

何を商材にしたサイトなのかが一瞬にしてわかる。

また、跳ねたボールの先にサイトのキャッチコピーが配置されているのも、視点の誘導に繋がっている。

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

SP版ではアニメーション数が削られているがそれでもかなりの動きがある。

動きがなくなり寂しくなるということもなく、かつ動きはスムーズで閲覧に支障をきたさない絶妙なバランスを保っている。

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

beatfic experiment
https://t.co/fEh1VvkDgf
スクロールする度に、必ずどこかが動く大胆かつインタラクティブな構成。

動きはほぼDOM主体で制御されており、その実装力に驚かされると同時に技術力の高さに感心する。

一つ一つの動きは実装しやすい箇所もあるため、ぜひ参考にしたいサイトの一つ。

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

SP版でも基本の動作はPC版同様。

スライダーが縦から横に流れる仕様に変更されており、デバイスごとの対応も完璧。

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

Senior Designer & Developer Adam Roberts
https://t.co/ZT9VsFfoXQ
左下にある再生ボタンを押すと、ページ内に全画面のモーダルが展開。この表示アニメーションがとても気持ちがいい。

モーダルが展開されると音声が再生され、画面中央の縦方向スライダーも動き出す。

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

SP版では、アニメーションのトリガーがhoverからタップへと変化しており、デバイスによって変化させていることがわかる。

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

Sileent
https://t.co/VmDHzpo7sE
テキストにhoverすると、グリッチ風のアニメーションは発生する。

テキストに何か重ねているわけではなく、テキスト自体をモザイクが入ったような文字列に差し替えることでアニメーションを発生させている。

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

SP版では、左右のコンテンツをページ下部のタブで表示切替できるよう、仕様が変更されている。

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

Norgram — Design Studio
https://t.co/v7gPE9DTJ6
左右に分かれたコンテンツにカーソルを乗せると、乗ったほうのコンテンツが拡大表示されるようになっており、スクロールも左右別々。

スクロールはtranslate3d、拡大はscaleの数値をそれぞれ変化させている。