スクロール値によって要素の幅を変える

パララックス?というか、スクロール値で変化を起こすページをライブラリを使わずに作れるかやろうと思った。

ライブラリもある

もちろんSkrollrという使いやすいライブラリもある。簡単に書きたいなら、ライブラリを使ったほうが良いと思う笑。
GitHub - Prinzhorn/skrollr: Stand-alone parallax scrolling library for mobile (Android + iOS) and desktop. No jQuery. Just plain JavaScript (and some love).

ただSkrollrが使えないときは困るので、スクラッチで一度書いてみようと思った。

できたのがこれ。スクロールすると、ネコの画像が並べられた要素が左から伸びてきている。

スクロールで要素の幅を変える

html

<section class="cover">
  <div class="cover-content">
	 <h1>Cat</h1>
  </div>
  <div class="cover-image"></div>
</section>

こんな感じのhtmlがある。coverの横幅をスクロールに合わせて変える。

画面の高さを取得

var SH = window.innerHeight;
var cover = document.getElementsByClassName("cover")[0];

最初に設定する。

//ウィンドウのサイズが変更されたら実行
window.onresize = function(e){
  SH = window.innerHeight;
}

リサイズ処理も忘れずに。

スクロール値を取得

window.onscroll = function(){
  var scrollY = document.body.scrollTop;
}

スクロール値はこれで取得できる。

画面内での位置、割合を計算

window.onscroll = function(){
  var scrollY = document.body.scrollTop;

  //要素が画面内に見える
  if(SH + scrollY > cover.offsetTop && SH + scrollY < cover.clientHeight + SH + cover.offsetTop){
	 //画面内に見える:0%,画面内から出て行く:100%
	 // var ratio = ((SH + scrollY - cover.offsetTop) / (SH + cover.clientHeight)) * 100;

	 //要素が画面中央にくると100%
	 var ratioHalf = ((SH + scrollY - cover.offsetTop) / ((SH + cover.clientHeight) / 2)) * 100;

	 //100%を超えると100%を維持
	 if(ratioHalf > 100){
		ratioHalf = 100;
	 }
	 // console.log(ratio);
	 console.log(ratioHalf);

	 //要素の幅を変更
	 cover.style.width = ratioHalf + "%";
  }else if(SH + scrollY >= cover.clientHeight + SH + cover.offsetTop){
	 //要素が画面内から上に抜けていった
	 console.log("finish");
  }
}

変数名など	内容
SH	見えている画面の高さ
cover.clientHeight	変化させたい要素の高さ
cover.offsetTop	親要素?(body)の上端から変化させたい要素までの距離