【仕事】 MOZZ TOKYO

mozztokyo.jp MOZZ TOKYOコーポレートサイトのフロントエンドを担当いたしました。 レスポンシブでありながらスマートフォンとPCで別々のUIを実装したTOPページ(もちろんワンソース)や、使いやすさと見た目のバランスを考慮した最低限の演出など、シンプルで…

【仕事】 カタリナでかしこく、スマートに暮らそう

cwallet.catalinacoupons.jp クーポンアプリ「カタリナ」のWebサイトのフロントエンドを担当いたしました。 カタリナの雰囲気に合うような心地よいアニメーションをPCとスマートフォン両方で体験できるように実装しました。 ぜひ両端末でご覧ください。

【仕事】 ジオ・コスモス The Searching Planet 検索する地球

日本科学未来館で展示されています、地球ディスプレイ「ジオ・コスモス」の新コンテンツである「The Searching Planet 検索する地球」のWebGLプログラミングを担当いたしました。 www.miraikan.jst.go.jp www.miraikan.jst.go.jp 日本科学未来館の地球ディス…

よく使うやつ 1

三角関数 2点間の距離 2点間の角度 イージングアウト バネ 3Dでのピクセル等倍

【仕事】illion "Water lily" Connected Jam Video

野田洋次郎(RADWIMPS)ソロ・プロジェクト illion の新曲「Water lily」特設サイトにて、ビジュアライザ部分のプログラミングを担当致しました。 実装にはWebGLを使用しており、PC、スマートフォン向けにそれぞれ最適化してあります。 ぜひスマホでご覧くださ…

バウンススクロールで背景色を変える

こちらのiPhoneのsafari(iOS8~)でバウンススクロールした際に見える背景色ですが、 通常であれば、cssでbodyに対してbackground-color:#FF0000とかで自由に変える事ができます。(グラデーションや画像は不可)この部分を動的に変えて欲しい、っていう機会は滅…

絶対に歩きスマホできないサイトになるjavascriptライブラリ

みなさん歩きスマホしてますか?危険と分かっていてもwebサイトが気になっちゃって、ついついしちゃいますよね!これはとてもよくないです そこで今回、絶対に歩きスマホできないサイトになるjavascriptライブラリを作りました github.com このjsを読み込ん…

STRIPE ANIMATION GENERATOR

GIFアニメではないけどアニメーションネタGIFアニメもそうだけど、どうやら自分は原始的手法を用いたアニメーションが好きみたい。アニメーションになったときの驚きや、いい意味でのチープさが個人的にツボ今回はストライプをスライドさせるとアニメーショ…

webの素材と技術でGIFアニメを作ってみる 2

webの技術でGIFアニメを作ってみる!今回はnode.js+socket.ioを使って、複数のウィンドウ、複数のPC(スマフォ)で表示されるアニメーションをコントロールした。 コントロールしたアニメーションはコチラ http://ikeryou.jp/test/gif2/1/ 何かに追っかけられ…

webの素材と技術でGIFアニメを作ってみる

最近GIFアニメを作ってみたいと思っていて、けど僕はAFとかで素敵な映像は作れないので、普段からなじみのある素材(web)と技術(HTML&Javascript)で作ってみる事にした。 なんか派手なのを作りたい! とりあえずこいつをベースにする。なんかウネウネさせてみ…