- ベストアンサー
jQueryを使い、数枚の画像が延々とスクロールするページを作っていま
jQueryを使い、数枚の画像が延々とスクロールするページを作っています。 ページはできたのですが、一つおかしな動きをします。 8枚の画像が一周するあたりで、なぜかスクロールが一瞬早くなるのです。 どこの書き方が問題なのでしょうか。 よろしくお願いします。 なお、画像は下記のサイト様から拝借しました。 この場を借りてお礼申し上げます。 http://sozai-free.com/sozai-list/scenery.html
- souitirou1
- お礼率50% (52/104)
- JavaScript
- 回答数2
- ありがとう数9
- みんなの回答 （2）
- 専門家の回答
質問者が選んだベストアンサー
中身は見てませんが… 画像をスクロールしていって、最初のの位置に戻すとき（巻き戻す時）の判断がズレているみたいなので、そこで連続性が途切れるのだと想像されます。 そのあたりを調べてみればよろしいかと…
その他の回答 (1)
- yyr446
- ベストアンサー率65% (870/1330)
中身をちらっとだけみましたが、 jQueryを使った、「simplyscroll.js」をそのまま使ってますね。 そのまま使うなら、ちょっとぐらいがまんしましょう。 ※前に縦バージョンを作った事あるけど、一回りしたつなぎ目でけっこう 苦労した覚えがあります。 何番の質問か忘れた。
関連するQ&A
- ページ横スクロールでjQuery lightBox
横に長いwebページを作っています。 ページの途中でjQuery lightBox plugin （http://leandrovieira.com/projects/jquery/lightbox/） を使って拡大画像を表示させたいのですが、 サムネイルをクリックすると、ページのはじめの方に拡大画像が表示されてしまいます。（拡大時の背景のオーバーレイもずれている） これを、サムネイルのあるページ上に表示させるようにしたいのですが、javascriptがよくわからないので、どのように修正したらよいか教えていただけないでしょうか。
- ベストアンサー
- JavaScript
- JavaScriptを使って縦に画像がスクロールするページを作りたいの
JavaScriptを使って縦に画像がスクロールするページを作りたいのですが、 (こんなかんじで動く)http://www.gmarwaha.com/jquery/jcarousellite/index.php 私はまだ勉強中で、テンプレートをダウンロードして少々いじって使う程度しかできません。 テンプレートで縦に動くものをみつけたのですが http://sorgalla.com/jcarousel/ 画像や全体の幅を広げようとまずCSSで調整したら、画像は大きくなったけど、 全部縦に画像がうまく並ばず、何枚も画像が表示されるはずなのに、1枚しか表示されなくなりました。 矢印ボタンを押してスクロールさせようとすると、 表示枠は長くしてあるのに、一番上の画像が別の画像に切り替わるという感じです。 言葉だけではうまく伝わらないとは思いますが。。 一番上に記載したURLのやつを縦バージョンにする方法など、 あったら教えていただけないでしょうか？ 他にも、縦にスクロールするJavascriptをご存知の方いらっしゃいましたら、教えていただけると助かります。 他力本願で大変お恥ずかしいのですが、どなたかうまく作れる方法がありましたらご協力お願いします！！
- 締切済み
- JavaScript
- x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスク
x軸にはスクロールしない、ページ内リンクをスムーズにスクロールするスクリプトを探しています。 こだわりのページ内リンクスムーズスクロール scrollsmoothly.js http://d.hatena.ne.jp/KAZUMiX/20080418/scrollsmoothly などを色々試しまして、同ページ内のリンクはきれいに動くのを確認しました。 サイトはグローバルメニューが左にあり、横幅が広めのデザインです。 問題は、小さい画面閲覧する際、別ページからページ下部のアンカーへ飛んだ場合です。 一旦ページの最上部左に移動してからアンカーへスクロールするため、 斜め下方向へスクロールし、そこからページの先頭へ戻る場合斜め上にスクロールする 動きになります。 クライアントから動きが気持ち悪いというクレームがあったので、 x軸にはスクロールしない方法を探したのですがなかなかうまくいきません。 jQueryのサンプルなど有りましたら教えてください。
- ベストアンサー
- JavaScript
- 【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等で背景をフル表示＋スライドショー
http://www.daichifive.com/ ↑のサイトのような感じに背景を画面サイズに合わせてフル表示にし、 サムネイル出して、クリックすれば、次の画像に切り替えたいと思っています。 画像は３枚で、３枚目の画像だけ、縦長になっているので、 背景が３枚目になったときだけ縦スクロールバーを付けて、 上から下まで見れるようにしたいです。 サムネイルを出して、次の画像に切り替えるくらいですと、 jQueryを探せば何かあると思うのですが、 ３枚目だけ縦スクロールバーをつけることなどできるのでしょうか。 できるとすれば、どのjQueryを使って、どうゆうカスタマイズをすればできるのでしょうか？ jQuery以外の方法でも、上記のような動きを実装できるやり方があれば ご教授いただけないでしょうか。 よろしくおねがい致します。
- ベストアンサー
- CSS
- jQuery
http://blog.daichifive.com/archives/602 このページにあるようなスクロールをさせたいのですが、 jquery.scroller.d5.jsはページ内でダウンロードできますが、 jquery.jsはどこからダウンロードすればよいのですか？ jQueryeasysliderのjqueryjsをつかってみたのですが、 上記サイトではjsファイルの最下部でスクロールさせたいものだけをカスタマイズできるとあるので、 easysliderのjqueryjsは使えないような気がします。 初歩的な質問ですみません。 あまり詳しくないです。 宜しくお願いします。
- ベストアンサー
- CSS
- ウェブページのスクロールついて
こんにちは いつもお世話になっております。 指先が少し不自由なので、マウスオーバーでウェブページをスクロールできる フリーソフトを探しています。下のURLのようにできるといいのですが・・・ ご存知でしたらお教えください。よろしくお願いいたします。 http://mm3ta.net/startstop3u1.html 最上段中央の「up 」「down」にマウスオーバーするとスクロールします。 http://phpjavascriptroom.com/exp3.php?f=include/ajax/jquery_plugin_imagegallery/simplyscroll.inc 要素を水平方向にスクロール（手動、スピード=5）や 要素を垂直方向にスクロール（手動、スピード=5）の 三角の部分にマウスオーバーするとスクロールします。
- ベストアンサー
- フリーウェア・フリーソフト
- jQueryを使った画像の切り替え方法を教えてください
［文字サイズ大］［文字サイズ中］［文字サイズ小］ などのボタン画像を押したら、 フォントサイズを変更すると共に、 ボタンが押された状態の画像に切り替えたいのですが、 それをjQueryを使って実行する方法を教えてください。 http://www.lllcolor.com/web/jquery/29.html ↑フォントサイズ変更のスクリプトはこのページのものを拝借しました。 http://weboook.blog22.fc2.com/blog-entry-6.html ↑画像切り替えはこのようなシンプルなものにしたいです。 jQuery版を探したのですが、高機能なものは見つかるのですが シンプルでなおかつ自分で組み込めそうなものが見当たらなかったので…。 ★HTMLは単純にこんな感じです <a href="#" class="sizeL"><img src="img/fontL.gif"></a> <a href="#" class="sizeM"><img src="img/fontM.gif"></a> <a href="#" class="sizeS"><img src="img/fontS.gif"></a>
- 締切済み
- JavaScript
- jQueryに関してアドバイス頂けますでしょうか
はじめまして、gumkucha_maxと申します。 jQueryに関して、どなたかご教授頂けますでしょうか。 ページ内に複数のスライダーを設けたいのですが、 現状、下記ページのような動きになってしまいます。 ▼現状のページ http://ihatovo-cafe.com/tmp/search-2014/index-test20140312.html やりたい事としては、各スライダーのサムネイル画像をクリックすると、 メインの画像が切り替わるという動きにしたいのですが、 現状はサムネイル画像をクリックすると、ページ内にある全てのスライダーのメインが切り替わってしまいます。 どなたかご教授お願い致します。
- ベストアンサー
- JavaScript
- jQueryのプラグインの読み込み方
http://jquery.com/download/ から、jQueryをダウンロードするまでは分かったのですが、 ファイルはディスクトップのどこの場所でもいいのでしょうか？それとも 指定したフォルダに一緒に入れないと読み込まれないのでしょうか？ http://kitchen.net-perspective.com/open-source/scroll-follow/ ここのページにあるサンプルみたいにスクロールについてくるようにするには、 どれをダウンロードして、どこのフォルダに入れればいいのでしょうか？ 翻訳して読みましたが、うまくいきません＾＾；インストールの2～3番目を 詳しく教えてください。お願いします
- ベストアンサー
- JavaScript
お礼
回答ありがとうございます。 jquery.simplyscroll.js（スクロール用のjsファイル）を色々いじくってみたところ、の114行目を書き換えると解決しました。 （前） this.posMax = this.$items.length * this.itemMax; （後） this.posMax = this.$items.length * this.itemMax + 100; なぜ+100だと解決するのかまではわかりませんが、ひとまず解決とします。