以下のように縦長のwebサイトをつくろうとしているのですが、どんなjs が必要で、どの様に書けばいいのかがわかりません。 詳しく解説をしてくれているサイトや 本があったら教えて下さい。
http://www.iutopi.com/
http://www.rynapse.co.jp/
No.2
49
6
150pt
パララックススクロール、もしくはパララックス効果で調べてください。
http://www.designwalker.com/2008/11/parallax.html
まず、
CSSで複数の画像をレイヤーで重ねています。
１：最奥の背景
２：魚などの生物
３：文字列
：
これらを見える順番で重ねています。
最奥から手前まで順に
対応させるjquery
背景を重ねるCSS
ソースコードを見ればわかるように、１と３はそれぞれに対応するものを設定しています。
これらを重ねて、パララックス効果を与えるリンク先のjqueryを使えばいいと思います。
No.1
49732154
100pt
該当するページのソースを当たるのが、早いと思うな。
で、簡単そうな http://www.rynapse.co.jp/ の方を見てみた。
「縦長のサイト」と言ってるのは、
の二つだよね。
最初のは簡単。スタイルで指定してる。
固定されてる領域は id=masthead な要素だけど、それについて、以下のスタイルを指定してる。
#masthead { position: fixed; ... }
二番目のボタンはスクリプト。
以下の外部スクリプトだけで実現されてる。
http://www.rynapse.co.jp/common/js/scrolltopcontrol.js
jQuery を使ってるけど、たいしたことはやってない。
位置を固定してるのは、やっぱり position: fixed 。
ボタンの要素を作って、下にスクロールしたら現れる、というようなところをスクリプトで制御してる。
No.2
496
ここでベストアンサー
150pt
パララックススクロール、もしくはパララックス効果で調べてください。
http://www.designwalker.com/2008/11/parallax.html
まず、
CSSで複数の画像をレイヤーで重ねています。
１：最奥の背景
２：魚などの生物
３：文字列
：
これらを見える順番で重ねています。
最奥から手前まで順に
対応させるjquery
背景を重ねるCSS
ソースコードを見ればわかるように、１と３はそれぞれに対応するものを設定しています。
これらを重ねて、パララックス効果を与えるリンク先のjqueryを使えばいいと思います。
4
2
1
2
2
10
9
コメント（2件)
http://www.moodsofnorway.com/#/home
真ん中にポインタを置いて（クリックせずに）、ホイールまわしてスクロールしてみてください。
＞どんなjsが必要で
http://www.google.com/search?q=parallax+jquery
この辺に書かれているjsならどれでも適当なものを使えば可能です。
ありがとうございました！