10:58返答ありがとうございます。.slidePanel」ごとに背景色を変えてみたのですが、やはり背景色を変えた部分から違う部分に移動すると背景色が適応されず真っ白状態になります。http://template3.heartwood.co.jp/こちらが実際作ってみたサイトなのですが一度見て頂けると有り難く存じます。3ページ目の一番右のページから左のページに移動した際に背景が真っ白になります。一つ説明不足だったのですが、IEでは問題なく背景が表示されるのですがSafariとChromeでは背景が真っ白になる症状がでます。何かかしらの解決策がありましたらご教授願います。18:58素晴らしいスクリプトをありがとうございます。javascript初心者ながら、カスタマイズを進めているのですが、ヘッダーの設置でどうしても意図したようにならずそこから抜けられないずにおります。厚かましいとは思いながらも、お力をお借りできないかと思いコメントさせていただきました。<やりたいこと>最初のアクセス時(#!page1)はウィンドウの最下部にヘッダーを固定表示する。#!page2へスクロールすると、ヘッダーがするるーーとウィンドウの最上部へ動いて、固定される。#!page2以降のページを表示している場合は最上部へ固定したまま。#!page2から#!page1へ戻ったら、また「するるーー」とウィンドウの最下部に固定表示すされる。#containerがスクロールしておらず位置の取得が出来ないとわかったので、ハッシュタグで判別するか、#containerの「top」プロパティの値を取得し判別する方法を思いつきました。何度か試したのですがうまくいかなかったので(きっと私の記述がおかしいのでしょう。)、bodyのdata-page属性を取得して判別するのはどうだろう?と思いついた次第です。何度か試しましたが、うまくいかず、もう一度ページをくまなく読んでみたところ、過去のコメントから、>やり方の一つとしては、>bodyに「data-page」属性でアクティブなページ番号を付与するようになっておりますので>スクロールアップとスクロールダウンの処理時に「data-page」ナンバーを見て>該当番号の時にアニメーションを実行させる、といったイメージになるかと思います。あったので、やはりこちらの方法でやってみようと思い、そこからも何度かトライしましたがうまくいかずの状態でおります。←このような書き方ではないのですよね。motionDown(){}ご教示くださいますと嬉しいです。10:04度々すいません。方法変えたら問題解決できました。ありがとうございます。20:42>mmさんコメントありがとうございます。当記事のスクロールスクリプトをご検討いただいている様で嬉しく思っております。最初の画面とそれ以外で別の指定をするには「data-page」属性を扱うことで処理することが可能です。-※コピペする際には括弧等は半角にしてください。スクロールアップ、スクロールダウンのイベント時についてはスクリプトの164行目がスクロールダウン時、スクリプトの166行目がスクロールアップ時の処理になります。(記載いただいたのは実行されるイベント関数になります)以上になりますが、お試しください。20:52初めまして。tana44と申します。1画面毎にスクロールさせるスクリプトを探していて、こちらのサイトにたどり着きました。わかりやすい解説で参考にさせていただいております。画面を増やしていき10ページより画面が多くなると、10ページ目以降の挙動がおかしくなるようですが、JSの修正が必要なのでしょうか?横スライド機能についてお聞きしたいのですが、こちらの機能ですが、スライドではなくクロスフェードに変更することは、かなり複雑なカスタマイズになるのでしょうか?また、横スライドの機能をループさせるというのも複雑でしょうか?突然、いくつもの質問失礼いたしました。お時間のある時にご教示いただければ幸いです。0:45>tana44さんコメントありがとうございます。当記事のスクロールスクリプトをご検討いただいている様で嬉しく思っております。画面数についてですがサンプルファイルにて画面を10個以上に増やして試したところ動作の不具合については確認できませんでしたが当記事からダウンロードできるファイルでも挙動がおかしくなる現象が起きるのでしょうか。横スライドをフェードにすることも可能だと思いますがスクリプトの改修が必要になります。同じ動作ではないですが当ブログ別記事の・jQueryでページの最上部に位置固定したフルスクリーンスライドショー(クロスフェード)を設置する方法http://black-flag.net/jquery/20141028-5428.htmlにて同様の仕様を実装しておりますのでこちらのスクリプト等を参考にしていただけますと幸いです。17:12ご返答ありがとうございます。画面の挙動については解決いたしました。urlHashの機能をoffにすると挙動が正常になったことで、setHashに設定していた値と、各画面要素に設定していたidが10画面目から重複してしまっていたことが原因でした。お騒がせいたしました。挙げていただいたページを参考にさせていただきます。貴重なお時間ありがとうございました。こちらのスクリプトを参考にwebサイトを作らさせていただいています。お忙しい中恐縮ですが、質問させていただきます。下の次のページにいくにつれてこの数字が増えていくという形式になっていますが、これを最下部のページをにして上にいくほど数字が増えるという形式に変更することは可能でしょうか。そのときを開いたトップページは今までどおり一番上のページが開かれる(数字が一番大きいページが開かれる)状態にさせたいです。サイトをつくって、後々一番初めのページに新しくページを追加していきたく、そのときにURLを書き換える手間をできるだけ減らしたいと考えています。お手数おかけしますが、お時間あるときにご回答いただけると幸いです。16:10はじめまして。求めていたスクリプトそのものでしたので早速実装させて頂きたいと思います。ありがとうございます。逆の、ひとつ上のページへ戻るボタンの実装は可能でしょうか。ご教示下さいますよう宜しくお願いいたします。1:04>yamaさんコメントありがとうございます。当記事のスクロールスクリプトをご検討いただいている様で嬉しく思っております。ご質問いただきました件についてですが理想とされている構成がどのような形なのかいまいち詳細を把握できずにおりますが上から下ではなく、下から上の動作にするということならば可能だとは思いますが大々的にスクリプトを組み直す必要があると思います。そのような構成でサンプルを作る機会がありましたらここで紹介させていただきたいと思います。1:20>TOMOさんコメントありがとうございます。当記事のスクロールスクリプトをご検討いただいている様で嬉しく思っております。上のページへ移動するボタンについては実装することはもちろん可能です。下へ移動するボタンのスクリプト部分をコピーして上移動用にカスタマイズする必要がありますがちょっと今すぐにはサンプルを作成する余裕がないので時間ができたらサンプルにオプション追加するよう検討させていただきたいと思います。3:03ご返信ありがとうございます。説明がわかりにくく申し訳ありません。動きを変える必要はありません。現在あるhtml(other.htmlとする)にこのスクリプトを適用しているページ(index.htmlとする)のリンクを貼っています。その場合、1ページ目にのリンクは「index.html#!page1」になるかと思います。同様に数字が増えていくと、Xページ目は「index.html#!pageX」となります。これを1ページ目のリンクを「index.html#!pageX」とし、Xページ目のリンクを「index.html#!page1」というように昇順ではなく降順にならないでしょうか。現在のつくりだと更新するたびすべてのリンクを書き換えていかなくてはならず、もしできるのであれば一度の更新で「index.html#!page1」の数字部分をひとつ加えるだけにできたらと思いお聞きしました。お手数おかけしてすみません。0:32>yamaさん動作内容について了解致しました。その様な仕様にすることも不可能ではないと思いますが全体的に構成を再検討する必要があると考えておりすぐに実装するのは難しい状況です・・・その様なオプション設定については今後検討させていただきます。19:59はじめまして。素敵なスクリプトにめぐり逢えて感激です。使用させていただきたいと思っています。そこで一つ質問させていただきたいことがあります。スライドエリアの中身の要素を、ブラウザ画面に対し上下中央揃えにすることはできませんでしょうか?現在は内容量が少ないと上詰めになってしまうようなので、上のような修正ができるかどうか気になりました。お手数ですがご回答いただけますと幸いです。1:06>geさんコメントありがとうございます。当記事のスクロールスクリプトをご検討いただいている様で嬉しく思っております。エリア内の上下中央揃えについてはスクリプトというよりかはCSSでの設定になります。CSSでpositionプロパティ等を使ってエリア内上下中央揃えをお試しいただければと思っております。16:35迅速なご回答ありがとうございました!下移動スクリプトのコピペを自分なりに編集してみて一応動作はするようになりました。一部挙動がおかしい所がありますがぼちぼち修正していこうと思います。サンプル内に実装されることをお待ちしています。22:51まだまだ初心者で未熟な勉強中の者です。現在jqueryを組み込んだサイト作りの勉強をしておりましてこちらに辿り着きました。貴重な情報をアップしていただきありがとうございます。各ページにbackground-imageにて画像を背景に設定したいと思いましてsection#stage1やdiv.fieldWrapにbackground-image:url(...)と入れてみたのですが表示されないのですが、どのように背景画像を設定すればよいでしょうか。ちなみにhtmlのimgタグを入れて画像を見せることはできたのですが、できたらcssにてbackground-imageで入れ込みたいと考えております。それと、同様に背景に動画を設定することはできますでしょうか。自前の動画、youtubeから引っ張ってくる、とそれぞれ可能なのでしょうか。Tubularなどを使用することになるのでしょうか。質問ばかりで申し訳ございません。お忙しい中お手数ですが、もし気が向いたらお答えいただければ幸いです。23:20先ほどの件ですが、background-imageにて設定できました。最初に試したときに何が悪かったのがわからないのですが、ためしにdiv.fieldWrapを各ページごとにdiv.fieldWrap1-1のように個別のクラス名をつけてみたら背景設定できました。試してから質問するべきでした。動画の件の質問のほうももう少し自分で試してみます。ブラックフラッグさんのサイトをささっと巡回してみたのですがいろいろと参考になりそうなことが満載なので引き続き拝見させていただきます。11:53>訓練生さんコメントありがとうございます。当記事のスクロールスクリプトをご活用いただいている様でありがとうございます。問題も無事に解決したようでよかったです。-こちらのスクリプトも多少参考になるかと思います。(少々古い記事になりFlash実装になっていますが・・・)お試しください。21:20はじめまして本日こちらのサイトを発見致しました。ワンページスクロールのサイトを制作をしており土台になるサンプルがあり凄く助かりました。ひとつどうしても前に進めない部分がありお教え頂ければ幸いです。こちらのサンプルデータにフッターのエリアを追加したのですがどうしても最後のセクションからスクロールして表示をしてくれません。14:45はじめまして。新たにjQueryを勉強しようと思い、こちらのサイトにたどり着きました。わかりやすい記述で大変勉強になります、ありがとうございます!コチラのテンプレに新たに、指定量スクロールした時点でメニューが出てくる処理を足そうとしているのですが上手くいきません。なにか方法はございますでしょうか?ご指導よろしくお願いします。13:00たびたびすみません。固定メニュー部分にスクロールに応じて一つclassを追加する方法でも構いまっせん。1:14>コマリガオさんコメントありがとうございます。当記事のスクロールスクリプトをご検討いただいている様で嬉しく思っております。ご質問いただきました件についてですが当記事のスクリプトでは画面内でのスクロールは想定しておらずそのような仕様にする場合は大きくカスタマイズする必要があります。そのような仕様でのスクリプトが出来ましたらここで紹介させていただきます。1:22>練習中さんコメントありがとうございます。当記事のスクロールスクリプトをご活用いただいている様で嬉しく思っております。当記事のスクリプトではスクロール動作はスクロール値ではなく「#container」の「top」値で制御する仕様になります。併せてアクティブ画面の番号に関してはbodyタグの「data-page」属性に画面番号を格納しており右メニューに関してはアクティブ状態のリンクに「activeStage」のクラスが付けて該当位置を判別するようになっておりますのでブラウザの開発ツールなどでそのあたりの動作を見ながら実装してみてはいかがでしょうか。