第9回 インタラ会 資料

第9回インタラ会。テーマは「conic-gradient」新しいグラデーション手法conic-gradient()関数を使って色々作る

【仕事】TVアニメ『盾の勇者の成り上がり』

TVアニメ『盾の勇者の成り上がり』ティザーサイトが公開されました。 僕はフロント実装全般を担当しております。

【仕事】BLEACH ENDLESS MEMORIES

www.j-bleach.com記憶に残ったBLEACHのシーンを使って映像をジェネレートしていくスマホ限定webコンテンツ「BLEACH ENDLESS MEMORIES」が公開されました。僕はジェネレートされた映像の実装を担当しております。 映像チームが作成した映像をWebGLを使って再…

第8回 インタラ会 資料

第8回 インタラ会 資料 ランダム関数を使った動き

第7回 インタラ会 資料

第7回インタラ会。テーマは「ひっぱる」

【仕事】Sunny.

sunnny.jp株式会社Sunny.のWebサイトが公開されました。 僕はフロント実装を担当しております。シンプルながらも、細かい演出の効いたWebサイトになっております。 ぜひPC、スマートフォンの両端末でご覧ください。⁢

【仕事】ポカリガチダンスFES

pocari-gachidancefes.comポカリガチダンスFES特設サイトが公開されました。 僕はTOPページのフロント実装を担当しております。デザインやイラストから連想される、ポップさ、元気、ガチっぽさ。 このあたりの雰囲気がユーザーに伝わるようにサイトのモーシ…

第6回 インタラ会 資料

第6回のテーマは「ロールオーバー ※PC限定」です。主に複数のボタン要素が隣接してるときの気持ちのいいアニメーションについてです。

可変レイアウトはvwが便利

css

最近、比率をキープしつつずっと可変していく実装をいくつかやって、 例えば、ブラウザ幅1900pxのときに文字サイズ32px、要素間のマージン100pxになるように、ブラウザ幅を基準に比率がずっとキープされるやつ。 文字サイズはvwが便利で使ってて、マージンと…

第5回 インタラ会 資料

インタラ会とは? ・こちらを参照 ikeryou.hatenablog.com 第5回のテーマ「スクロール連動」 ・サンプルファイルはこちら github.com ・0~1のスクロール進捗率を計算して、それを使ってオブジェクトを動かしていく ・スクロールしたときの気持ち良さがキモ …

【仕事】BLUES DESIGN

www.blues-d.co.jp愛知県のプロダクトデザイン事務所BLUES DESIGNのWebサイトがリニューアルされました。 僕はPC版のフロント実装を担当しております。サイトのデザインに合うような高級感、重厚感を意識したモーションを実装しました。 背景のパーティクル…

【仕事】StarChorus

www.starflyer.jpSTARFLYERの機内のための新体験音楽プログラム「Star Chorus」の特設サイトが公開されました。 僕は背景の宇宙とメインタイトルのWebGL実装を担当しております。「Star Chorus」の雰囲気に合うような壮大な星々をWebGLで表現しました。 ぜひ…

第4回 インタラ会 資料

インタラ会とは? ・こちらを参照 ikeryou.hatenablog.com 第4回のテーマ「寄り道する動き」 ・サンプルファイルはこちら github.com ・途中までは地点Aを目指して地点Bへ進む動き // 目標地点A tgA = {x:100, y:100}; // 目標地点B tgB = {x:200, y:200}; …

【仕事】ESTYLE,Inc.

株式会社エスタイル様のコーポレートサイトが公開されました。僕はTOPページのキービジュアルのWebGL実装を担当しております。

第3回 インタラ会 資料

インタラ会のおさらい ・インタラクティブコンテンツを作るための小技を共有する ・その小技を使った作品をつくる ・小技の数学的理論の説明はしない。作品を作ることを重視する 第3回のテーマ「ぐるぐるパーティクル」 ・パーティクルをいい感じにぐるぐる…

第2回 インタラ会 資料

インタラ会のおさらい ・インタラクティブコンテンツを作るための小技を共有する ・その小技を使った作品をつくる ・小技の数学的説明はしない。作品を作ることを重視する 第2回のテーマ「反復」 ・動作をいい感じに繰り返す いい感じに繰り返す ・Math.sin…

第1回 インタラ会 資料

第1回インタラクティブ勉強会の資料

【仕事】「ゴジラvsバズラ」

11月17日公開の映画アニメゴジラのPRのための特設サイト「ゴジラvsバズラ」のメインビジュアル部分の実装を担当しました。

【仕事】住信SBIネット銀行 10th Anniversary Brand Site

contents.netbk.co.jp住信SBIネット銀行さまの10周年を記念したスペシャルコンテンツのフロントエンドの実装を担当いたしました。 ぜひPCとスマホ両端末でご覧ください。⁢

【仕事】ALLTERRAIN 2017AW

www.descente.comデサント公式ブランド『ALLTERRAIN(オルテライン)』の2017AWプロダクトサイトのフロントエンドの実装を担当いたしました。 全体的にあえて余計な演出を省くシンプルな実装になっておりますが、一番の見せ場であるTOPに関しては、WebGLを使…

テクスチャ使ったディスプレイスメントマップフィルタ

three.jsでディスプレイスメントマップフィルタ実装したデモ作ったら思った以上に使えそうなのでメモ&共有。 (自信ないけどディスプレイスメントマップフィルタってこうことやってると思う。たぶん、、)ikeryou.github.ioまず、planeなmeshを敷き詰めたscene…

【仕事】 DESCENTE スペシャルコンテンツ

xxxxxxxx.descente.comDESCENTE(デサント) スペシャルコンテンツの背景演出部分のWebGLプログラミングを担当いたしました。 再形成を繰り返し、日が経ち成長していいくにつれ、ユーザーの期待感を高められるような力強いビジュアルを目指しました。 スマホは…

【仕事】school webサイト

schl.co.jpクリエイティブチームschoolのwebサイトのフロントエンドを担当いたしました。 TOPのWebGLを使った動画加工エフェクトやメニューの展開時アニメーション、トランジションエフェクトなど細かい部分にこだわりました。ぜひご覧ください。

WebGL使ったスマホでの動画インライン再生

いわゆるvideo要素のcurrentTime進めてキャプチャしてcanvasへ表示するやつ。 もっと手間かかるかと思ってたけど、THREE.VideoTextureのおかげでだいぶスマートに実装できた。 使用頻度高そうなので忘れないようにメモる。・デモはこちら https://ikeryou.gi…

Unityメモ

参考サイトを忘れないようにメモシェーダー 定義済値 http://qiita.com/edo_m18/items/591925d7fc960d843afaカスタムイメージエフェクト http://www.f-sp.com/entry/2015/08/11/185815スクリプトリファレンス https://docs.unity3d.com/jp/540/ScriptReferen…

three.jsのlinewidth効かへんメモ

ある程度太めのライン(2D)をうにょうにょさせたいっていう要望があって、 それならthree.jsのLineBasicMaterialのlinewidth設定すれば一発だろうと思ってて、 即「できます!」って答えたんだけど、 このプロパティまったく効かへん。。。 なに設定してもず…

【仕事】 DESCENTE 2017SS特設サイト

DESCENTE(デサント)2017SS特設サイトTOPページのフロントエンドを担当いたしました。

Webサイトリニューアル

ikeryou.jp僕のやってることや仕事の実績などは完全にこのブログに集約することにして自分のサイトもリニューアル。このブログへの扉ページ的な位置付けにしました。背景とか結構自分好みにぐにょぐにょさせてます(テキストは日々思ってることがランダムで表…

Atomで.pugファイルを.jadeファイルとして認識させる

そろそろ.jadeじゃなくて.pngに切り替えようと思ったけど.pngだとSyntaxThemeがjadeじゃなくてplanetextになってしまうので、pngファイルをjadeファイルとして認識させる。 file-types packageをインストール Preferences/Open Config Folder → .atom/config…

iPhoneでマナーモードにしてても音がなってしまう

iPhoneでマナーモードにしてても音がなってしまう現象。 調べたのでわすれないようにメモ。qiita.comwebaudioAPI単体なら問題ないが、HTMLAudioを一回でも使うとマナーモード無視で音が鳴ってしまう。今回はhowler.js使っててこのライブラリの場合どうやらラ…