- ベストアンサー
jQueryでスクロールする背景画像の設定方法
- jQueryのscrollFollowを利用して、コンテンツ内の背景画像がスクロールするとついてくる設定方法を解説します。
- 指定した要素にscrollFollowを適用し、スクロール速度やオフセット、コンテナを指定することで、背景画像をスクロールするように設定することができます。
- この設定を利用することで、コンテンツ内の背景画像をスクロールさせることができます。
- pencil87
- お礼率88% (16/18)
- JavaScript
- 回答数4
- ありがとう数5
- みんなの回答 （4）
- 専門家の回答
質問者が選んだベストアンサー
こんにちは。 z-indexを使うかは単純に順番だけですので使わなくても実現できるとは思います。 一応サンプルみたいなものを載せてみましたが、これが質問者様の想定している動きかわからないので参考程度に見てみてください ==== 動作サンプル http://hppg.moe.hm/okwave/qa/q7281368/ ==== ソース <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <meta http-equiv="Content-Style-Type" content="text/css" /> <title>【OKWave回答サンプル集】●jQuery；スクロールでついてくる背景画像</title> <script type="text/javascript" src="https://www.google.com/jsapi"></script> <script type="text/javascript">google.load('jquery','1.2.6');</script> <script type="text/javascript" src="../js/ui.core.js"></script> <script type="text/javascript" src="../js/jquery.scroll-follow.js"></script> <script type="text/javascript"> $().ready ( function() { $('#scll').scrollFollow(); }); </script> <style type="text/css"> body { min-height:1200px;background-color:#000; } #cont { position:absolute; top:0px; width:198px; height:198px; color:#fff; border:solid #f00 1px; } #scll { position:absolute; width:200px; height:200px; color:#fff; background:url(./images/back.png); } </style> </head> <body> <div id="scll"> </div> <div id="cont"> <p>コンテンツだよ</p> <p>コンテンツだよ</p> <p>コンテンツだよ</p> <p>コンテンツだよ</p> <p>コンテンツだよ</p> </div> </body> </html>
その他の回答 (3)
- tracer
- ベストアンサー率41% (255/621)
ゆっくりついてくる効果が欲しいのであれば、javascriptが必要ですが、単に背景を固定したいだけなら、HTML/CSSの問題ですよ。javascriptを使うとしても、つまるところ、javascriptでhtml/cssを操作しているだけなので、はじめからhtml/cssの構造を見なおしたほうがはやいです。
お礼
ご回答ありがとうございました。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 プラグインは基本的に簡単に○○の機能が実装できるよ。っていうものなので特殊な動きは想定されていません。 なんとかやるとしたら背景画像用の領域を用意してそこにscrollFollowを設定して コンテンツ用の領域をそこに重なって表示するようにCSSで設定すれば何となく動くような気がします。 ただ、コンテンツ用の領域に背景色等があったら背景画像用の領域は見えなくなってしまうと思います。 プラグインを改造するか1から作るしか無いような気がします。
お礼
ご回答ありがとうございます。 >プラグインは基本的に簡単に○○の機能が実装できるよ。っていうものなので特殊な動きは想定されていません。 とても参考になります。ありがとうございます！ >なんとかやるとしたら背景画像用の領域を用意してそこにscrollFollowを設定して 背景画像用の領域というのは、背景画像を指定した<div></div>タグを作るということではなく、 jqueryで領域を作るということでしょうか…？ すみません、jqueryの知識がまだ乏しいもので、そのあたり、お教えいただけないでしょうか…？ >コンテンツ用の領域をそこに重なって表示するようにCSSで設定すれば何となく動くような気がします。 重なって表示させるCSSは、z-indexなどでしょうか？ すみません。よろしければ、またご回答いただけましたら幸いです。
- LancerVII
- ベストアンサー率51% (1060/2054)
こんにちは。 「背景画像だけスクロールすると」というのはどのような動きを想定していますか？
お礼
ご回答ありがとうございます というのは、 例えば <div id="#スクロールさせたい要素のid"> <div id="#コンテンツ要素のid"> </div> </div> #スクロールさせたい要素のid にbackgroungで背景画像を設定し、 スクロールするとついてくるようにしたいのですが、その際 #コンテンツ要素のid は最初に表示された位置のままで、 スクロールしてもついてこないようにしたいのです。。 現状だと、#コンテンツ要素のid も一緒にスクロールでついてきてしまいます。 そこで、背景画像だけ.scrollFollowの指定をできないかなぁと考えております。。 よろしくお願いいたします。
お礼
お礼が遅くなってしまい、すみません！ ご回答いただきありがとうございました！ サンプルまで作っていただき、本当にありがとうございます。 まさにこの通りの動きをさせたかったので、 サンプルの通りにしてみたらうまく動いてくれました。 感謝です！ speed: 1000, などでスクロールのスピードを調節すると 画面の長さによって動きが逆むきに変わったり、 そのあたりはもうすこし勉強して解決する必要があるのですが、 ひとまず思っていた通りの動きができてうれしいです！ 本当にありがとうございました！
補足
せっかくすばらしい回答をいただいたのに、ベストアンサーを選び損ねておりました。 遅くなりまして失礼いたしました。 ご回答いただき、本当にありがとうございます！