🙆眺めるだけでコーディングアイデアが増えていく👍️ codefolio（コードフォリオ）は、Webサイトコーディングに役立つ動き集めたコーディングパーツ集・ギャラリーサイトです。 コーディング代行・外注サービス会社株式会社くまweb（https://xitter.cf/t.co/K1vIp0nahv）が運営しています。
Joined May 2024
- Tweets1.1K
- Following94
- Followers432
- Likes38
日建設計総合研究所
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している間だけ画像が切り替わる仕様。
写真が目立つよう装飾は最低限に抑えられているため、操作性がよく快適に閲覧することが可能。
The Weather Channel - RetroCast Now
codef.jp/6422/
天気APIから取得した情報をレトロ番組風に表現する発想が魅力的。大半をDOMで構築しながら高い完成度を実現し、API活用の可能性を感じさせる。
数時代前に戻ったかのようなレトロな見た目のお天気情報サイト。
Will Lenzen — Writer and Design Engineer
codef.jp/6410/
本棚を模したUIをクリックすると、取り出した本が開いたかのように情報が表示される仕組み。
コンセプトとアニメーションが上手く融合したモーダルになっている。