jQueryでスクロールする背景画像の設定方法
- jQueryのscrollFollowを利用して、コンテンツ内の背景画像がスクロールするとついてくる設定方法を解説します。
- 指定した要素にscrollFollowを適用し、スクロール速度やオフセット、コンテナを指定することで、背景画像をスクロールするように設定することができます。
- この設定を利用することで、コンテンツ内の背景画像をスクロールさせることができます。
- ベストアンサー
●jQuery；スクロールでついてくる背景画像
よろしくお願いいたします。 下記のサイト様を参考に、 http://grow.weblike.jp/immature_design/javascript/159.html scrollFollowを利用し、 スクロールするとついてくるという設定をして、うまく実現できたのですが、 これを、コンテンツ全部でなく、コンテンツ内の背景画像だけ スクロールするとついてくるように指定することはできないでしょうか？ <script type="text/javascript"> $( document ).ready( function () { $( '#スクロールさせたい要素のid' ).scrollFollow( { speed: 1000, offset: 0, container: 'main' } ); } ); </script> どうぞよろしくお願いいたします。
- 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の指定をできないかなぁと考えております。。 よろしくお願いいたします。
関連するQ&A
- 【jquery】スクロールで背景画像もついてくる
よろしくお願いいたします。 jqueryを使って背景画像をスクロールと一緒についてくるようにしたいのですが、 思い通りにいかず、質問させていただきたいと思います。 やりたいと思っていることは、 まず背景画像1（1.jpg）をbodyにbackgroundに設定して、 その上に<div></div>タグで背景画像2（2.png：透過画像）をbackgroundに設定し、 背景画像2だけスクロールと一緒についてくるようにしたいと思っています。 現状のソースは以下になっています。 【html head内】 <script src="jquery.js" type="text/javascript"></script> <script type="text/javascript"> $(function() { $(window).scroll(function(){ var y = $(this).scrollTop(); $('#haikei').css('background-position', '50%'+ parseInt( y / 3 ) + 'px'); }); }); </script> 【html body内】 <div id="haikei"> <div id="wrapper"> <div id="header"> ～略～ </div> <div id="contents"> ～略～ </div> </div> </div> 【CSS内】 #bg01 { background: url(2.png) top center repeat-y; } 今の状態だと、動き自体は思い通りに動いてくれるのですが、 背景画像を表示させたい位置がありまして、 <div id="header"></div>内には2.pngを表示させず、 <div id="contents"></div>の部分から2.pngを表示させて スクロールについてくるようにしたいと思っています。 下記のように、 <div id="wrapper"> <div id="header"> ～略～ </div> <div id="haikei"> <div id="contents"> ～略～ </div> </div> </div> と、<div id="haikei"></div>の位置を変えてみましたが、 これだとスクロールしたときに、<div id="header"></div>の下から 画像が途中からはみ出てくる？ような感じで、きれいにスクロールされません。 さらにCSSのrepeat-yをno-repeatに変えて試してみましたが、 その場合画像がページの一番下まで動いてくれません。 （途中までしか画像がついてきてくれない感じです） 方法としては、2.pngの表示開始位置を<div id="header"></div>より下に位置指定すれば うまくいくのかなと思ったのですが、書き方がわからず。。。 なにかうまくいく書き方はないでしょうか・・？ もしくは上記の方法以外でも、実現できそうなやり方や、 参考になりそうなサイトがあればお教えいただきたいと思っています。 ちなみに、私が参考にさせていただいたサイト様はこちらです。 http://www.webopixel.net/javascript/350.html わかりにくい点がありましたら、補足いたします。 どうぞよろしくお願いいたします。
- ベストアンサー
- JavaScript
- jQueryのタブにスクロールバーをつけたい
jQueryのタブにスクロールバーをつけたい jQueryの「ui.tabs.js」を使ってタブを制作し、「jquery.cookie.js」でタブの内容を記憶し。 さらに、そのタブの中身が設定した枠を超えると「jScrollPane.js」を使って横にスクロールバーがでるようにしたいのですがうまくいきません。 <script src="./js/jquery-1.2.6.js" type="text/javascript"></script> <script src="./js/jquery.cookie.js" type="text/javascript"></script> <script src="./js/ui.core.js" type="text/javascript"></script> <script src="./js/ui.tabs.js" type="text/javascript"></script> <script src="./js/jScrollPane.js" type="text/javascript"></script> <script src="./js/jquery.mousewheel.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function() { $('#container1 > ul').tabs({ event: 'click' ,cookie: { expires: 30 } , cache: true}); $('#fra_sl').jScrollPane({scrollbarWidth:13, scrollbarMargin:9}); }); </script> <body> <div id="container1"> <ul> <li id="tab1"><a href="#tab_categry">タブ1</a></li> <li id="tab2"><a href="#tab_all">タブ2</a></li> </ul> <div id="pane1"> <div id="tab_categry"> <p>中身１(省略)</p> </div> <div id="tab_all"> <p>中身2(省略)</p> </div> </div> </div> </body> 以前同じような質問をされていた方がいたのでそちらも参考にして試してみたのですが→http://okwave.jp/qa/q4819862.html javascriptは初心者なものでよくわかりませんでしたorz どなたかわかる方がいましたら教えてもらえないでしょうか？？
- ベストアンサー
- JavaScript
- JQUERYについて教えてください。
JQUERYについて教えてください。 readyがDOMを読み終わってから実行しろという意味は分かったのですが、 あったりなかったりするfunction()はどんな意味なのでしょうか？ function(){ $(this).stop().animate({'marginBottom':'60px'},150); },function(){ $(this).stop().animate({'marginBottom':'0px'},120); こちらにあるのですがメソッドに一個必須なのでしょうか？ 例 <script type="text/javascript"> $(document).ready(function(){ $('div#goto_top').hover( function(){ $(this).stop().animate({'marginBottom':'60px'},150); },function(){ $(this).stop().animate({'marginBottom':'0px'},120); </script>
- ベストアンサー
- JavaScript
- jqueryにて
こちらではお初にお世話になります。 よろしくおねがいします！ さて、jqueryを用いてScrollFollowを実装中なのですが、 正常に動作させることが出来ません。 ソースは <script type="text/javascript" src="./jslib/ui.core.js"></script> <script type="text/javascript" src="./jslib/jquery-1.2.6.js"></script> <script type="text/javascript" src="./jslib/jquery.scrollfollow.js"></script> <script type="text/javascript" src="./jslib/jquery.easing.1.3.js"></script> <script type="text/javascript" src="./jslib/jquery.cookie.js"></script> <script type="text/javascript"> $( document ).ready( function (){ $('test').scrollFollow({ }); }); </script> をヘッド部分に、 <div id="test"> コンテンツ </div> をBODYに記述しています。 動作せずにFirefoxのエラーコンソールで確認したところ エラー: jQuery is not defined ソースファイル: （省略）update/jslib/ui.core.js 行: 238 エラー: $("test").scrollFollow is not a function ソースファイル: http://contest2009.thinkquest.jp/tqj2009/110392/update/ 行: 13 と表示されました。jsファイルの生存は確認できており、 その系統のミスではないと思うのですが。。。 どなたかアドバイスをお願いします！
- ベストアンサー
- JavaScript
- JQUERYをはじめて導入したのですが、
JQUERYをはじめて導入したのですが、 読込み部分の記述が間違っているのか 「$(document).ready(function(){」のところで一箇所エラーとなります。 「オブジェクトでサポートされてないプロパティまたはメソッドです」となります。 設定内容の、現状は下記です。 「validate」設定を実現したいためにjqueryを導入。 ・JQUERYは現在の最新版のものを入手。 ・読み込んだファイルは全く編集などはしてないもの。 ・パスなどの記述は間違っていないようです。確実にファイルは存在しております。 ・一応パーミッションも確認済みです。 ・id"form-host"もformタグに設定しております。 <script type="text/javascript" src="/common/js/jquery.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.pack.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.js"></script> <script type="text/javascript" src="/common/js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="/common/js/jquery.validate.min.js"></script> <script type="text/javascript" src="/common/js/additional-methods.js"></script> <script type="text/javascript" src="/common/js/messages_ja.js"></script> <script type="text/javascript"> //入力チェック関数に対象フォームIDを指定 $(document).ready(function(){ $("#form-host").validate(); }); </script> jsファイルの読込みの順序が違うのでしょうか、 不必要なjsファイルを読み込んでしまっている？為なのか； validate関連を導入した事があるからいらっしゃれば、 ご教授願います。
- ベストアンサー
- JavaScript
- jQueryについて質問です。
jQueryについて質問です。 複数のプラグインを一つのページに組み込み同時に使いたいのですが、 それぞれが干渉しているのかどれか一つしか使えません。 http://solidstate.jp/Navigation/treeMenu/script_54.html http://solidstate.jp/ContentsDisplay/accordion/script_130.html http://solidstate.jp/Navigation/houseOfCake/script_172.html こちらに紹介されている記事を参考に <script type="text/javascript" src="jquery-1.3.2.min.js"></script> <script type="text/javascript" src="jquery.navigmenu.js"></script> <script type="text/javascript"> $(function(){ $('#menu').navigmenu(); }); </script> <script type="text/javascript" src="accordian.pack.js"></script> <script type="text/javascript"> window.onload = function() { new Accordian('basic-accordian',5,'header_highlight'); } </script> <script src="lib/jquery.js" type="text/javascript"></script> <script src="lib/jquery.cookie.js" type="text/javascript"></script> <script src="jquery.treeview.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $("#filetree").treeview({//ターゲットとなる要素に付加するID animated: "fast", //アニメーション設定（削除するとアニメ無し） collapsed: true, //開閉設定（削除するとロード時にメニューを全開） unique: true, //動作設定（削除すると自動的に閉じなくなる） persist: "cookie", //Cookie }); }); </script> このような記述を行いました。 ですが、動くのはひとつだけです。 これらを同時に動かすにはどうすればよいでしょうか？ 優先順位は上からです。
- ベストアンサー
- JavaScript
- 環境：WinXP＋IE7＋jquery1.4.2
環境：WinXP＋IE7＋jquery1.4.2 次のようなコードで、メニューをクリックすると、メニューを非表示にしているのですが、画面が一瞬ちらつきます。ちらつきを無くすには、どうすればよいでしょうか？ よろしくお願いします。 【コード】 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="../ajax/jquery.js"></script> <script language="JavaScript"> <!-- $(document).ready( function(){ $("#menu").click(function(){ $(this).hide(300); }) } ); //--> </script> </head> <body> <div id="menu">メニュー</div> <div id="doc">コンテンツ<br/>○○○○○○○○○○○○○○○<br/></div> </body> </html>
- ベストアンサー
- JavaScript
- Jqueryの干渉について
Jqueryの干渉について Jqueryのライブラリを使ったjsを2つ同時に組み込もうとしておりますが、 干渉してしまっているようで、どちらか一つずつしか使えない状況です。 使おうとしているものは、spacegalleryというものと、nivosliderという jsを使おうとしています。 それぞれ同じサイトの解説文を参照しながら、組み込んでみました。 参考にしたサイトは、 http://www.skuare.net/test/spacegallery.html http://www.skuare.net/test/jnivoslider.html で、headの記述は、 <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/eye.js"></script> <script type="text/javascript" src="js/utils.js"></script> <script type="text/javascript" src="js/spacegallery.js"></script> <script> $(document).ready(function(){ $('#myGallery').spacegallery({loadingClass: 'loading'}); }); </script> <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script> <script type="text/javascript" src="js/jquery.nivo.slider.js"></script> <script type="text/javascript"> $(document).ready(function() { $('#hoge').nivoSlider({ effect:'random', // sliceDown、sliceDownLeft、sliceUp、sliceUpLeft、sliceUpDown、sliceUpDownLeft、fold、fade、random slices:15, //分割枚数 animSpeed:500, //アニメーションスピード pauseTime:3000, //停止時間 directionNav:true, //方向ナビ directionNavHide:true //隠す }); }); </script> 多分後からの記述の部分が前の記述をリセットさせてしまうと思うのですが、 上手くこの２つのスクリプトを同じページ内で稼働させる記述方法があれば 教えてください。 よろしくお願いします。
- 締切済み
- JavaScript
- div要素の幅をWindow幅に合わせて変更したい
下記のような形でdiv要素の#main_frameの幅を$(window).width()の値に合わせて指定しているのですが、ブラウザのwindowサイズを操作した場合に表示が崩れてしまいます。 windowサイズの操作がなされた場合、#main_frameの幅も自動的に変わるようにしたのですが方法はありますでしょうか。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ $('#main_frame').css('width', ($(window).width() - 110) + 'px'); }); </script>
- ベストアンサー
- JavaScript
- jQueryにて複数ライブラリを動かす
wordpressにてWEB制作を行っています。 jQueryにてfullpage.jsというフルページスクロールするライブラリを使用しております。 そのセクションの一つをfullpage.jsの機能の一つ横スライドを行っているのですが、 fullpage.jsのオプションには自動再生はありません。 スライド部分のみ自動再生を行いたいので bxslider.jsというライブラリを使用し、 横スライドしたいセクションをbxsliderで動かしたいのですが、 bxsliderが全く作動しません。 また <script type="text/javascript"> jQuery(document).ready(function(){ jQuery('.bxslider').bxSlider(); }); </script> の記述を <script type="text/javascript"> jQuery(document).ready(function() { jQuery('#fullpage').fullpage(); }); の上に書くと今度はfullpageが動きません。 jQueryライブラリは同ページで二つ同時には動かないんでしょうか？ また、書き方が間違っていますでしょうか？ 宜しくお願い致します。
- 締切済み
- JavaScript
お礼
お礼が遅くなってしまい、すみません！ ご回答いただきありがとうございました！ サンプルまで作っていただき、本当にありがとうございます。 まさにこの通りの動きをさせたかったので、 サンプルの通りにしてみたらうまく動いてくれました。 感謝です！ speed: 1000, などでスクロールのスピードを調節すると 画面の長さによって動きが逆むきに変わったり、 そのあたりはもうすこし勉強して解決する必要があるのですが、 ひとまず思っていた通りの動きができてうれしいです！ 本当にありがとうございました！
補足
せっかくすばらしい回答をいただいたのに、ベストアンサーを選び損ねておりました。 遅くなりまして失礼いたしました。 ご回答いただき、本当にありがとうございます！