第11回 インタラ会 資料

テーマはライト


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

three.jsでいうとPointLightやDirectionalLight

  • 光らせる、影をつけるイメージだけど色の設定や動かし方で面白くなる気がする
  • いくつかやってみた所感、PointLightが扱いやすそうdecay(精細さ?細かさ?)いじると見た目ががらっと変わる

デモいくつか

http://ikeryou.jp/intr/12/

https://ikeryou.github.io/intr11/1/

【仕事】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.