テーマはライト
サンプルファイルはこちら↓↓
github.com
three.jsでいうとPointLightやDirectionalLight
- 光らせる、影をつけるイメージだけど色の設定や動かし方で面白くなる気がする
- いくつかやってみた所感、PointLightが扱いやすそうdecay(精細さ？細かさ？)いじると見た目ががらっと変わる
【仕事】FlicFit ストア向けiPadアプリ
FlicFit様が各店舗で展開されているプロダクトの、
専用iPadアプリのモーション部分の実装を担当しております。
描画、モーションの実装にはWebGLを使用して開発しました。
お立ち寄りの際はぜひご利用ください。
【仕事】KITAMURA MAKURA official website
まくらのキタムラ様の英語サイトが公開されました。
僕はフロント実装全般を担当しております。
ファーストビューのWebGLを使った表現やwebサイトの世界観に合わせた細かいモーションなど、丁寧に実装していきました。
ぜひPCとスマホ両端末でご覧ください。
【仕事】+Ring
+Ringのwebサイトがリニューアルされました。
僕はフロント実装全般を担当しております。
TOPのダイナミックなスクロール演出はWebGLで実装しています。
ぜひPCとスマホ両端末でご覧ください。
第９回 インタラ会 資料
テーマは「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.
