常に画像の大きさを横幅100%でパララックス表示をしたい

添付画像の様に、セクションAとセクションBの間に背景画像をおいて、
スクロールすると、背景画像が遅れて動くいわゆる視差効果（パララックス）エフェクトを
やりたいのですが、普通にJqueryのプラグインやチュートリアルにあるものだと、
ブラウザウインドウの大きさによっては横幅がトリミングされたようになってしまいます。

私がやりたいのは、横幅は常に100%表示で、
縦幅をその時のウインドウの大きさによって変わる画像の大きさあわせて
縦の隙間が可変するようにしたいのです。

どなたか方法をご存知の方、お教えくださいませんでしょうか。
そういう表現ができるプラグインがあるならその所在のアドレスでも構いません。

よろしくお願いいたします。

No.1 ベストアンサー 回答者： fufufunofufufu 回答日時： 2016/01/19 15:30

こんにちは。

プラグイン使わなくても簡単なjQueryだけでできますよ。
以下参考まで。ソースはご自身のものに適宜合わせてください。jQuery本体は別途読み込んでくださいね。


【HTML】.prlxのところに視差背景を入れます。

<section class="a">
<h2>あいうえお</h2>
<p>あいうえおあいうえお</p>
</section>

<div class="prlx"></div>

<section class="b">
<h2>あいうえお</h2>
<p>あいうえおあいうえお</p>
</section>

【CSS】

.a, .b, .prlx{
width: 100%;
height: 400px;/*適宜*/
}
.prlx{
background: url("背景画像のURL") no-repeat;
background-size: cover;/*これで背景画像を100％にします*/
}

【jQuery】
<script>
$(function() {
$(window).scroll(function(){
var y = $(this).scrollTop();
$('.prlx').css('background-position', '50% ' + parseInt( -y / 3 + 0 ) + 'px');
});
});
</script>

これで.prlxの背景に視差効果が出ます。
説明として、
背景画像を100％にするのはCSSのbackground-size:coverで。
それで、背景画像を動かすのはjQueryで、ということになります。

jQueryはスクロールに合わせて.prlxのbackground-positionを動かすということをします。
まずX軸。50%というのはcenterということです。今回はCSSでbackground-sizeをcoverにしているので、ここの数字は0%でも100%でも同じことになります。
そして、Y軸です。ここが動的なものとなっていきます。
今回は-y / 3 + 0としています。お好みで変更してください。
/3は標準のスクロールの速度に対して÷3のスピードで動くということです。このスピードを変えたいときは個々の数字を変えてください。
また-ｙの-（マイナス）は背景画像が動く方向です。マイナスをつけると上に動きます。マイナスがないと下向きに動きます。
（といってもスクロールして画面自体が上にあがっていっているのでどちらも上に上がっているように見えますが。）
最後に+ 0は.prlxの領域上部からのオフセット値です。今回は背景ということで0にしていますが、たとえば背景でなく上部に少し空間も持たせたい時や、.prlx自体の位置が縦長ページ下部だった場合などにオフセットさせておく必要が出てきます。

簡単に書きましたが、結構ネットにもプラグインなしのこの方法についていろいろな方がブログで説明してくれているのでそういうのも見てみてください。

頑張ってください。

この回答へのお礼

お返事ありがとうございます。
無事、表示させる事ができました。
最近は動きのあるサイトがあたりまえになってきていますし、
このあたりのプログラムももっともっと勉強しなければいけませんね。
懇切丁寧なお返事をいただき本当にありがとうございました。

お礼日時：2016/01/22 15:59