第５回 インタラ会 資料

インタラ会とは？

・こちらを参照
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.