2018-01-01から1年間の記事一覧
ringer.tokyo +Ringのwebサイトがリニューアルされました。 僕はフロント実装全般を担当しております。 TOPのダイナミックなスクロール演出はWebGLで実装しています。 ぜひPCとスマホ両端末でご覧ください。
第9回インタラ会。テーマは「conic-gradient」新しいグラデーション手法conic-gradient()関数を使って色々作る
TVアニメ『盾の勇者の成り上がり』ティザーサイトが公開されました。 僕はフロント実装全般を担当しております。
www.j-bleach.com記憶に残ったBLEACHのシーンを使って映像をジェネレートしていくスマホ限定webコンテンツ「BLEACH ENDLESS MEMORIES」が公開されました。僕はジェネレートされた映像の実装を担当しております。 映像チームが作成した映像をWebGLを使って再…
第8回 インタラ会 資料 ランダム関数を使った動き
第7回インタラ会。テーマは「ひっぱる」
sunnny.jp株式会社Sunny.のWebサイトが公開されました。 僕はフロント実装を担当しております。シンプルながらも、細かい演出の効いたWebサイトになっております。 ぜひPC、スマートフォンの両端末でご覧ください。
pocari-gachidancefes.comポカリガチダンスFES特設サイトが公開されました。 僕はTOPページのフロント実装を担当しております。デザインやイラストから連想される、ポップさ、元気、ガチっぽさ。 このあたりの雰囲気がユーザーに伝わるようにサイトのモーシ…
第6回のテーマは「ロールオーバー ※PC限定」です。主に複数のボタン要素が隣接してるときの気持ちのいいアニメーションについてです。
最近、比率をキープしつつずっと可変していく実装をいくつかやって、 例えば、ブラウザ幅1900pxのときに文字サイズ32px、要素間のマージン100pxになるように、ブラウザ幅を基準に比率がずっとキープされるやつ。 文字サイズはvwが便利で使ってて、マージンと…
インタラ会とは? ・こちらを参照 ikeryou.hatenablog.com 第5回のテーマ「スクロール連動」 ・サンプルファイルはこちら github.com ・0~1のスクロール進捗率を計算して、それを使ってオブジェクトを動かしていく ・スクロールしたときの気持ち良さがキモ …
www.blues-d.co.jp愛知県のプロダクトデザイン事務所BLUES DESIGNのWebサイトがリニューアルされました。 僕はPC版のフロント実装を担当しております。サイトのデザインに合うような高級感、重厚感を意識したモーションを実装しました。 背景のパーティクル…
www.starflyer.jpSTARFLYERの機内のための新体験音楽プログラム「Star Chorus」の特設サイトが公開されました。 僕は背景の宇宙とメインタイトルのWebGL実装を担当しております。「Star Chorus」の雰囲気に合うような壮大な星々をWebGLで表現しました。 ぜひ…
インタラ会とは? ・こちらを参照 ikeryou.hatenablog.com 第4回のテーマ「寄り道する動き」 ・サンプルファイルはこちら github.com ・途中までは地点Aを目指して地点Bへ進む動き // 目標地点A tgA = {x:100, y:100}; // 目標地点B tgB = {x:200, y:200}; …
株式会社エスタイル様のコーポレートサイトが公開されました。僕はTOPページのキービジュアルのWebGL実装を担当しております。
インタラ会のおさらい ・インタラクティブコンテンツを作るための小技を共有する ・その小技を使った作品をつくる ・小技の数学的理論の説明はしない。作品を作ることを重視する 第3回のテーマ「ぐるぐるパーティクル」 ・パーティクルをいい感じにぐるぐる…