【仕事】KITAMURA MAKURA official website

www.kitamura1923.com

まくらのキタムラ様の英語サイトが公開されました。
僕はフロント実装全般を担当しております。

ファーストビューのWebGLを使った表現やwebサイトの世界観に合わせた細かいモーションなど、丁寧に実装していきました。

ぜひPCとスマホ両端末でご覧ください。

第9回 インタラ会 資料

テーマは「conic-gradient」


サンプルファイルはこちら↓↓ github.com

新しいグラデーション手法conic-gradient()関数

  • Google Chrome 69からサポートされたCSS
  • 円錐上に色を指定してグラデーションを作る
  • 工夫次第で今までcanvas使って面倒臭いなっていう表現がcssでできる
  • 特に円形グラフと集中線ができるのはすごい便利

ICSさんのサイトで丁寧な解説のってるので参考に ics.media

※ 以下Chrome69~限定で動作

円形グラフ

See the Pen intr9 sample1 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

集中線

See the Pen intr9 sample2 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

repeat-conic-gradient使った変わりダネ

See the Pen intr9 sample3 by ikeryou (@ikeryou) on CodePen.

ソースはこちら

シンプルに

See the Pen intr9 sample4 by ikeryou (@ikeryou) on CodePen.

【仕事】BLEACH ENDLESS MEMORIES

www.j-bleach.com

記憶に残ったBLEACHのシーンを使って映像をジェネレートしていくスマホ限定webコンテンツ「BLEACH ENDLESS MEMORIES」が公開されました。

僕はジェネレートされた映像の実装を担当しております。
映像チームが作成した映像をWebGLを使って再現しました。

選択したシーンによって様々な演出を用意しています。
BLEACHの名シーンを思い出しながらぜひ体験してみてください。