添付画像の様に、セクションAとセクションBの間に背景画像をおいて、
スクロールすると、背景画像が遅れて動くいわゆる視差効果(パララックス)エフェクトを
やりたいのですが、普通にJqueryのプラグインやチュートリアルにあるものだと、
ブラウザウインドウの大きさによっては横幅がトリミングされたようになってしまいます。
私がやりたいのは、横幅は常に100%表示で、
縦幅をその時のウインドウの大きさによって変わる画像の大きさあわせて
縦の隙間が可変するようにしたいのです。
どなたか方法をご存知の方、お教えくださいませんでしょうか。
そういう表現ができるプラグインがあるならその所在のアドレスでも構いません。
よろしくお願いいたします。
No.1ベストアンサー
- 回答日時:
こんにちは。
プラグイン使わなくても簡単な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のスピードで動くということです。このスピードを変えたいときは個々の数字を変えてください。
また-yの-(マイナス)は背景画像が動く方向です。マイナスをつけると上に動きます。マイナスがないと下向きに動きます。
(といってもスクロールして画面自体が上にあがっていっているのでどちらも上に上がっているように見えますが。)
最後に+ 0は.prlxの領域上部からのオフセット値です。今回は背景ということで0にしていますが、たとえば背景でなく上部に少し空間も持たせたい時や、.prlx自体の位置が縦長ページ下部だった場合などにオフセットさせておく必要が出てきます。
簡単に書きましたが、結構ネットにもプラグインなしのこの方法についていろいろな方がブログで説明してくれているのでそういうのも見てみてください。
頑張ってください。
お返事ありがとうございます。
無事、表示させる事ができました。
最近は動きのあるサイトがあたりまえになってきていますし、
このあたりのプログラムももっともっと勉強しなければいけませんね。
懇切丁寧なお返事をいただき本当にありがとうございました。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- JavaScript ブラウザの横幅に応じてとある画像(e.jpg)を画面いっぱいに表示できるようにしたいです。(写真の横 1 2022/10/06 21:17
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
- HTML・CSS トリミングで表示した画像をクリックで元どおりにしたい 3 2022/12/16 18:49
- 引越し・部屋探し 【冷蔵庫搬入の幅について】 引っ越しをします。 冷蔵庫をかおうと思っています。 急ぎです。 価格は安 2 2023/06/15 19:12
- WordPress(ワードプレス) ワードプレスで、左寄せ画像と文字を横並びにせず、画像の下に文字を表示される方法を教えてください 1 2022/04/24 11:06
- その他(動画サービス) VLCメディアプレーヤーについて 1 2022/11/29 14:19
- Excel(エクセル) Excelでこういうカードの作り方 枠線の引き方や、挿入画像の拡大縮小など わかる方教えてください、 2 2022/05/03 21:22
- Windows 10 zoomで自分の顔の背景 3 2023/06/07 22:34
- その他(Microsoft Office) 複数の写真を1枚に印刷 5 2023/05/05 22:41
- Visual Basic(VBA) 【VBA】写真の貼り付けコードがうまく機能しません。 5 2022/09/01 18:43
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
リストビューをスクロールさせ...
-
PDFを(htmlのように)無限に縦...
-
Excelでワードアートや図を常に...
-
エクセルVBAでフォームのListbo...
-
Visual Basicから Spreadのスク...
-
vb,netでtextboxの文字を右から...
-
スクロール位置を中央にしたい
-
エクセルで行を固定しその下か...
-
Excelで一部分だけを常に表示さ...
-
ワードでHP作成中ですが流れ...
-
TikTokに自動でスクロールして...
-
Excelで横のスクロールするショ...
-
一体の時間が経過してからCSSの...
-
ページ訪問時にiframe内を自動...
-
MSFlexGridのスクロールバー位置
-
IE6の文字コードとjavascript
-
セレクトボックス スクロール
-
MFCでのスクロールバーの扱い
-
大きい表へのスクロールバーの...
-
スクロールしてもついてくるバナー
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
Excelでワードアートや図を常に...
-
エクセルVBAでフォームのListbo...
-
PDFを(htmlのように)無限に縦...
-
リストビューをスクロールさせ...
-
Excelで一部分だけを常に表示さ...
-
Excelで1.2行目だけ固定して...
-
Visual Basicから Spreadのスク...
-
大きい表へのスクロールバーの...
-
VBE画面の縦のスクロールバ...
-
vb,netでtextboxの文字を右から...
-
リストビューのスクロールバー...
-
リストビューの表示開始行変更
-
ページ訪問時にiframe内を自動...
-
IFRAMEでscrolling="yes|no"の...
-
文章の自動スクロール
-
ポストバック時のスクロール位...
-
C#:ListViewでのスクロールイベ...
-
常に画像の大きさを横幅100%で...
-
マウスオーバー→ホイール回転で...
-
webページで横方向にアンカーを...
おすすめ情報