codefolio：コードフォリオ｜コーディングギャラリーサイト
@codef_official
Followers
422
Following
34
Media
563
Statuses
688
codefolio（コードフォリオ）は、Webサイトコーディングに役立つ動き集めたコーディングパーツ集・ギャラリーサイトです。 コーディング代行・外注サービス会社株式会社くまweb（https://t.co/K1vIp0nahv）が運営しています。
Joined May 2024
3rd株式会社のコーポレートサイトを 企画・制作しました。 同社のブランド創造に対する価値観や、 未来像をビジュアルとインタラクションで 表現しています。#mountinc
https://t.co/0jh9gWtSMk Design：渡辺 俊 @ws0606 Development：須多 望 @soundmuta .
0
0
0
驚くのはこの動きがスマートフォンでも再現されていること。 重さを感じることもなくかなりスムーズで組み込みにかなりの時間を要したことは想像に難くない。
0
0
0
3rd inc. https://t.co/59t8AndZBT 画面遷移時に奥行きが出現し、表示されるコンテンツも左右や奥から立体的に表示されるようになっている。 演出面と技術面、どちらもかなり高度な組み込みがされており迫力のある体験を実現している。
2
0
1
スマートフォンでも同様に、オブジェクトを動かすことが可能。 しかもこれ、てっきりFVやMV内でしか動かせないと思っていたが、頑張ればページ最下部までオブジェクトを移動させることも可能。 ただし、重なり順的に上のほうのコンテンツと被るとそこから動かせなくなってしまう
0
0
0
Lydia Amaruch https://t.co/SfG0PDc7Xa FVに散りばめられた複数のビジュアルは、ドラッグ＆ドロップで移動することが可能。 このような仕組みがあるとわかるとつい遊んでしまいたくなる。自然と滞在時間を伸ばすいい仕組みとなっている。
1
0
0
スマートフォン版ではこのボタンは表示されず、代わりにサムネイルが最初から再生されるよう変更されている。
0
0
0
Mikki Sindhunata https://t.co/owoKHxbXHs サムネイルにカーソルを合わせると表示されるボタンの動きがおしゃれ。 カーソルの動きに合わせて上下左右に動く枠（DOMで操作）が、まるで奥行を感じるような動きになっている。
1
0
0
ヘッダーメニューの開き方や表示方法もかなりおしゃれ。 このメニューと画面遷移のアニメーションを合わせて使うと、より色を使ったボーダーのアニメーションが際立つ。
0
0
0
Ax.c https://t.co/1fyLbze2rZ ロゴにも使用されている四色をうまく活かした画面遷移。 シンプルな動きだが、複数色使用することで物足りなさを感じることなく自然な仕上がりとなっている。
1
0
0
SP版でもPC版と同じ数の画像が表示されているが、あまり重さを感じることはない。 個人的には、ヘッダーでクルクルと回っているロゴがgifアニメのグラデーションや光り方に感動している。
0
0
0
FLUORO® https://t.co/hJ8q9NLqqg 各名称をタップすると、該当する作品が画像一覧で表示される。 中身を見るとわかる通り、多くの画像を使用しているため、imgタグには『srcset』や『sizes』で事前に画像を読み込むことで、目には見えないユーザーへの細かい配慮が見られる。
1
0
0
SP版でも同様の仕様。スマートフォンの実機で見てもかなりスムーズに開閉できる。 また、スマートフォンでは上下だけでなく左右にもスクロールが可能となっている。
0
0
0
Extraordinary Things https://t.co/qmVXtVNH9Z よくある仕組みのように、モーダルで表示するページを個別で作成するのではなく、クリックされた画像ごとにモーダルボックス内のDOMを操作し、画像を差し替えて表示している。 かなりシームレスなアニメーションで技術の高さが感じられる。
1
0
0
ウェブサイトリニューアル、おめでとうございます。 本プロジェクトでは、コーポレート／採用サイトのリニューアルを、情報設計・デザイン・WordPress再構築・サーバー移行まで一気通貫で支援させていただきました。 北都システムさんのウェブサイト、ぜひご覧ください。 https://t.co/8AYuVCPpmN
0
0
0
SP版も表示方法は同様。 DOMで生成されてはいるが、CSSでの制御が可能なのでスマートフォン対応もスムーズに行うことが可能。
0
0
0
北都システム株式会社 https://t.co/s0xZbQwlgy 画面内に画像が入った際、モザイク風の演出後に画像が表示されるようになっている。 モザイクは80個のdivをDOMで生成し、ランダムで色や透明度を操作して表現されている。 シンプルなレイアウトのサイトでも、表示方法一つで印象がかなり変わるいい例。
2
0
1
SP版でもタップアニメーションはそのまま引き継がれている。 ゲームも専用キーボードが用意されているが、狭い画面ではかなり難易度高め…！
0
0
0
Elio https://t.co/3XUe9LfXeu "PLAYFUL"の文字をhoverすると、黒文字が斜めに動くと同時にカラフルなシャドウが出現する。 ”tactile”の文字はクリックするとキーボードのような動きを見せ、何度も押すことで色が変化する。 どれもDOMでcssを操作しており、ボタンなどに応用して実装することが可能。
1
0
1
SP版では普通のリンクボタンとなっている。 また、その上のらせん状の年表のはthree.jsで作られているのだが、丸いオブジェクトやテキストは別で上に載せられており、canvas内の動きに合わせて動いている。 個人的にはこちらの作りも非常に興味深い。
0
0
1
18 Years of Büro https://t.co/blI2DkpuOq 特定の範囲に入ると、既存のマウスカーソルが消え、指が動き出す。 そこまではよくある動きだが、カーソルの動かす速度を早くするとクルクル回転仕出し、同時にテキストも出現する。 このちょっとした遊び心が閲覧者の興味を引く要素になりえる。
1
0
1