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

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

文字サイズはvwが便利で使ってて、マージンとか幅サイズとかは計算めんどい%(親要素基準になるし、なんかFireFoxでうまくできんとか)でやってたんだけど、あるときvwってマージンとか幅にも使えるよな？？って気づいて使ってみたら可変レイアウトの実装がだいぶ楽になった、、
(ちなみにvwは親要素関係なくブラウザ幅にあわせて設定できる単位)

vwの使い方は、例えば幅1900pxのpsdもらったならこんな感じ。

.hoge {
  // (100 / psdの幅) * (psd上のフォントの高さpx)
  // psdの幅が1900pxで、対象文字のフォントサイズが32pxなら
  // 100 / 1900 * 32
  font-size:1.684210526vw;
  
  // 要素間のマージンが↑のpsdで46pxだったら
  // 100 / 1900 * 46
  margin-top:2.421052632vw;

  // こういうプロパティでもOK
  // ↑のpsdで36pxだったら
  // 100 / 1900 * 36
  border-radius:1.894736842vw;
}

もっとはやく気づいてれば、、、

第５回 インタラ会 資料

インタラ会とは？

・こちらを参照
ikeryou.hatenablog.com

第５回のテーマ「スクロール連動」

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

・0~1のスクロール進捗率を計算して、それを使ってオブジェクトを動かしていく
・スクロールしたときの気持ち良さがキモ

// ステージサイズ
var sw = window.innerWidth;
var sh = window.innerHeight;

// スクロール位置
var scroll = $(window).scrollTop();

// スクロール進捗率 0 ~ 1
// このスクロール進捗率を使ってオブジェクトを動かしていく
var scrollP = scroll / ($(document).height() - sh);

サンプル１ スクロールでオブジェクトの位置がFIX

See the Pen intr5 sample1 by ikeryou (@ikeryou) on CodePen.

サンプル２ スクロールするとオブジェクトの色が変わる

See the Pen intr5 sample2 by ikeryou (@ikeryou) on CodePen.

サンプル３ スクロールするとテキストがFIX

See the Pen intr5 sample3 by ikeryou (@ikeryou) on CodePen.

サンプル４ スクロールするとバラバラな動きをしながらテキストがFIX

See the Pen intr5 sample4 by ikeryou (@ikeryou) on CodePen.

【仕事】BLUES DESIGN

www.blues-d.co.jp

愛知県のプロダクトデザイン事務所BLUES DESIGNのWebサイトがリニューアルされました。
僕はPC版のフロント実装を担当しております。

サイトのデザインに合うような高級感、重厚感を意識したモーションを実装しました。
背景のパーティクルや長押しでのメニュー、各ページごとのスペシャルコンテンツなどWebGLを使い、より表現力の高い実装を目指しました。ぜひご覧ください。

⁢

【仕事】StarChorus

www.starflyer.jp

STARFLYERの機内のための新体験音楽プログラム「Star Chorus」の特設サイトが公開されました。
僕は背景の宇宙とメインタイトルのWebGL実装を担当しております。

「Star Chorus」の雰囲気に合うような壮大な星々をWebGLで表現しました。
ぜひPCとスマホの両端末でご覧下さい。

⁢

第４回 インタラ会 資料

インタラ会とは？

・こちらを参照
ikeryou.hatenablog.com

第４回のテーマ「寄り道する動き」

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

・途中までは地点Aを目指して地点Bへ進む動き

// 目標地点A
tgA = {x:100, y:100};

// 目標地点B
tgB = {x:200, y:200};

// 現在値
now = {x:0. y:0};

// 最終目標の地点Bまでの進捗率
rate = 0;

// 毎フレーム実行
function update() {

  // rateが1に近くにつれ、tgBに近く
  rate += 0.01;
  now.x = (tgA.x * (1 - rate)) + (tgB.x * rate);
  now.y = (tgA.y * (1 - rate)) + (tgB.y * rate);

  // rateが1より大きくならないような処理が必要
  if(rate >= 1) {
    rate = 1;
  }

}

・目的地に行く動きが物足りない時のアクセントとしてよく使用する

サンプル１ 画面中央に寄り道しながらランダムな目標地点へ移動

See the Pen intr4 sample1 by ikeryou (@ikeryou) on CodePen.

サンプル２ 複数のオブジェクトが寄り道しながら画面外へ行く動き

See the Pen intr4 sample2 by ikeryou (@ikeryou) on CodePen.

サンプル３ マウス位置へ寄り道しながら現れては消えて行く動き

See the Pen intr4 sample3 by ikeryou (@ikeryou) on CodePen.

サンプル４ linear-gradient使う

See the Pen intr4 sample4 by ikeryou (@ikeryou) on CodePen.