以下のように縦長のwebサイトをつくろうとしているのですが、どんなjs が必要で、どの様に書けばいいのかがわかりません。 詳しく解説をしてくれているサイトや 本があったら教えて下さい。

http://www.iutopi.com/
http://www.rynapse.co.jp/

回答の条件
  • URL必須
  • 1人5回まで
  • 13歳以上
  • 登録:2011/08/19 19:18:05
  • 終了:2011/08/22 10:40:48

ベストアンサー

id:sloto No.2

sloto回答回数49ベストアンサー獲得回数62011/08/19 20:15:56

ポイント150pt

パララックススクロール、もしくはパララックス効果で調べてください。

http://www.designwalker.com/2008/11/parallax.html

http://coliss.com/articles/build-websites/operation/javascript/js-faster-scrolling-parallax-websites-in-firefox-by-keithclark.html


まず、

CSSで複数の画像をレイヤーで重ねています。

1:最奥の背景

2:魚などの生物

3:文字列

これらを見える順番で重ねています。

最奥から手前まで順に

対応させるjquery

背景を重ねるCSS

ソースコードを見ればわかるように、1と3はそれぞれに対応するものを設定しています。

これらを重ねて、パララックス効果を与えるリンク先のjqueryを使えばいいと思います。

その他の回答(1件)

id:a-kuma3 No.1

a-kuma3回答回数4440ベストアンサー獲得回数18242011/08/19 20:15:47

ポイント100pt

該当するページのソースを当たるのが、早いと思うな。


で、簡単そうな http://www.rynapse.co.jp/ の方を見てみた。

「縦長のサイト」と言ってるのは、

  1. スクロールしても、上部に貼りついてるロゴとメニュー
  2. 下にスクロールすると、自動で現れる "Scroll Back to Top"

の二つだよね。


最初のは簡単。スタイルで指定してる。

固定されてる領域は id=masthead な要素だけど、それについて、以下のスタイルを指定してる。

#masthead {
	position: fixed;
	...
}

二番目のボタンはスクリプト。

以下の外部スクリプトだけで実現されてる。

http://www.rynapse.co.jp/common/js/scrolltopcontrol.js


jQuery を使ってるけど、たいしたことはやってない。

位置を固定してるのは、やっぱり position: fixed 。

ボタンの要素を作って、下にスクロールしたら現れる、というようなところをスクリプトで制御してる。

id:sloto No.2

sloto回答回数49ベストアンサー獲得回数62011/08/19 20:15:56ここでベストアンサー

ポイント150pt

パララックススクロール、もしくはパララックス効果で調べてください。

http://www.designwalker.com/2008/11/parallax.html

http://coliss.com/articles/build-websites/operation/javascript/js-faster-scrolling-parallax-websites-in-firefox-by-keithclark.html


まず、

CSSで複数の画像をレイヤーで重ねています。

1:最奥の背景

2:魚などの生物

3:文字列

これらを見える順番で重ねています。

最奥から手前まで順に

対応させるjquery

背景を重ねるCSS

ソースコードを見ればわかるように、1と3はそれぞれに対応するものを設定しています。

これらを重ねて、パララックス効果を与えるリンク先のjqueryを使えばいいと思います。

  • id:sloto
    ちなみにこのパララックススクロール、大変便利で、こういうサイトも作成できます。
    http://www.moodsofnorway.com/#/home
    真ん中にポインタを置いて(クリックせずに)、ホイールまわしてスクロールしてみてください。

    >どんなjsが必要で
    http://www.google.com/search?q=parallax+jquery
    この辺に書かれているjsならどれでも適当なものを使えば可能です。
  • id:yamamoton3
    パララックススクロールで調べてみます。
    ありがとうございました!

この質問への反応(ブックマークコメント)

「あの人に答えてほしい」「この質問はあの人が答えられそう」というときに、回答リクエストを送ってみてましょう。

これ以上回答リクエストを送信することはできません。制限について

絞り込み :
はてなココの「ともだち」を表示します。
回答リクエストを送信したユーザーはいません