パララックス?というか、スクロール値で変化を起こすページをライブラリを使わずに作れるかやろうと思った。
ライブラリもある
もちろん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)の上端から変化させたい要素までの距離 |
スクロール値や要素の高さ、画面の高さを計算すれば、できることがわかった。しかし細かいスタイルの変化を書くのは結構めんどうくさい。JavascriptでCSSを設定するのが大変だ。