第５回 インタラ会 資料 - devdev Inc. / works
インタラ会とは？ ・こちらを参照 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
第２回 インタラ会 資料 - devdev Inc. / works
インタラ会のおさらい ・インタラクティブコンテンツを作るための小技を共有する ・その小技を使った作品をつくる ・小技の数学的説明はしない。作品を作ることを重視する 第２回のテーマ「反復」 ・動作をいい感じに繰り返す いい感じに繰り返す ・Math.sin()とMath.cos()を使う ・引数に角度(ラジアン)を渡すと、-1から1をいい感じに返してくれる ・コツは数学(三角関数)として考えない ・繰り返すやつ = Math.sin()を使う。くらいの感覚 ・引数はラジアンだけど、基本「度」で考える ・引数で渡す際に機械的にラジアンに変換する関数をかますなど、ラジアンを意識しない工夫をする Math.sin(radian) ・0度と180度と360度のとき0を返す ・90度のとき1を返す ・270度のとき-1を返す Math.cos(radian) ・上のsinのカーブを左側に90度だけずら
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
