人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile


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

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


●質問者: yamamoton3
●カテゴリ:インターネット ウェブ制作
✍キーワード:js webサイト サイト
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● a-kuma3
●100ポイント

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


で、簡単そうな 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 。

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


2 ● sloto
●150ポイント ベストアンサー

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

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を使えばいいと思います。

関連質問


●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ