読者です 読者をやめる 読者になる 読者になる

not good but great

プログラミング、アート、映画・本の感想について書きます。

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

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

ライブラリもある

もちろんSkrollrという使いやすいライブラリもある。簡単に書きたいなら、ライブラリを使ったほうが良いと思う笑。
Prinzhorn/skrollr · GitHub

ただ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)の上端から変化させたい要素までの距離

スクロール値や要素の高さ、画面の高さを計算すれば、できることがわかった。しかし細かいスタイルの変化を書くのは結構めんどうくさい。JavascriptCSSを設定するのが大変だ。






広告を非表示にする