smoothscroll.jsでゆっくりスクロールさせたい


0   名前: ぎんじ : 2007/04/01(日) 16:46  ID:IYJzG3XG sub-.G
http://www.maybeinc.com
↑このように、1画面でできていて、ゆっくりスクロールするHPを作りたいと思っています。

smoothscroll.js が機能しているらしいということ、
また、smoothscroll.jsを使うためには、prototype.jsが必要だということがわかりました。
http://cl.pocari.org/2005-10-05-4.html
http://slightlyblue.com/blog/2006/08/javascript_smoothscroll2.html
http://zerobase.jp/blog/entry-268.html
http://www.prototypejs.org/

そこで、上記の2つのJscript Script Fileをダウンロードしたのですが、
ゆっくりスクロールしてくれません。

これらのファイルは、ダウンロードしただけでは動かないのでしょうか?
それとも、他に問題がありますか?

自分のレベルはブログのカスタマイズがようやくできる程度で、基本的にJScriptの知識はまったくありません。
よろしくお願いします。

1   名前: minx : 2007/04/01(日) 16:46  ID:u7OKXWvF sub-vK
For文の中でscrollToとかscrollbyとかを使えば良いのでは?

for (a=0; a<100; a++){
window.scrollTo(a, 0);
};

このa++を、例えばa=a+0.5とかにしてみるとか。


2   名前: ぎんじ : 2007/04/01(日) 16:46  ID:IYJzG3XG sub-.G
minxさん、ありがとうございます。

For文 というのはなんでしょうか? 
for(a=0 ではじまる文は、smoothscroll.js や prototype.js の中にはありませんでしたが、
どこに使えばよいのでしょうか?

バカみたいな質問でしたら申し訳ありませんが、初心者なりにがんばるつもりですので、
ご助力お願いします。

また、セーブしたprototype.js を開こうとすると、次のメッセージが出ます。
行: 9
文字:1
エラー: 'document'は宣言されていません。
コード:800A1391
ソース: Microsoft JScript実行時エラー

これはなにか関係あるでしょうか?

3   名前: minx : 2007/04/01(日) 16:46  ID:u7OKXWvF sub-vK
ええと、私はsmoothscroll.jsなどのファイルは確認しておりませんので、jsファイルのコードとは一切関係ない所でのコメントです。
何が書いてあるか分からない人様のコードを利用しなくても、たったこれだけでスクロールが出来る、という事です。

scrollToをいきなり使うと、目にもとまらない速さでスクロールしてしまいますので、ちびちびとスクロールさせる為、For文を使っています。

For文は繰り返し処理に使う文です。Javascript入門などの本には必ず載っています。

4   名前: ぎんじ : 2007/04/01(日) 16:46  ID:IYJzG3XG sub-.G
minxさん、ありがとうございます。 やはり、わたしの質問が初歩的過ぎるのですね。

あれからいろいろ検索して、別にsmoothscroll.jsじゃなくてもなめらかにスクロールができるのだということがわかってきたところです。

入門の本を買って、ちびちびとスクロールを実現したいと思います。 ありがとうございました。

5   名前: 匿名 : 2007/04/01(日) 16:46  ID:SHqbFxHj sub-Cz
>>1-4
for 文は関係ない。と言うか、N88-BASIC じゃないんだから、for/while 文による「ソフトウェアタイマ」というのは、絶対やってはいけないことの一つ。

『ゆっくりスクロール』の意味がイマイチ分からないが、smoothscroll.js 中の

・ss.STEPS(後ろから 3 行目)
・setInterval の第 2 引数(setInterval(......,10);)

あたりを調節してみれ。

6   名前: minx : 2007/04/01(日) 16:46  ID:i2Krktoq sub-.B
ああ、そうなんですか。絶対ダメなんですか。

まぁ私のニーズとしてはそのやり方で全く問題なかったので紹介させていただきました。


7   名前: 匿名 : 2007/04/01(日) 16:46  ID:SHqbFxHj sub-Cz
>>6
絶対駄目。貴方のニーズ云々ではなく、単純にブラクラ(ループ中はブラウザの処理が完全に固まる、それどころか CPU 使用率がものすごいことになる)。

タイマ処理が必要な場合は setTimeout/setInterval を使う。

8   名前: minx : 2007/04/01(日) 16:46  ID:f5U.ZzmF sub-Ax
一点確認させてください。
私の示した例はタイマ処理、というつもりはなかったのですが(空のFor文を回すというのではないのですが)、これは「匿名」さんのおっしゃるソフトウェアタイマーに相当しますか?

for (a=0; a<100; a++){
window.scrollTo(a, 0);
};

9   名前: 匿名 : 2007/04/01(日) 16:46  ID:SHqbFxHj sub-Cz
>>8
相当する。ループ中に他の処理が割り込めないわけだから。と言うか、

>>3
> ちびちびとスクロールさせる為

それで本当に「ちびちびと」動くかい? 少なくとも私の環境では、ブラウザが一瞬固まった後、最終目的地に一気に飛ぶだけだよ。だから、ブラウザを操作不能にさせず、かつどのマシンでも(それなりに)同じ速さで「ちびちびと」動かすには、タイマを使うわけだ。
setInterval (function () { scrollBy (0, 10); }, 10);

話を無理やり本筋に戻すと、smoothscroll.js でも setInterval() で動かしている(cf. >>5)。

10   名前: minx : 2007/04/01(日) 16:46  ID:f5U.ZzmF sub-Ax
setIntervalを使うと、スクロールの間もブラウザが操作を受け付けるワケですね?
試してはおりませんが、仰る事は分かりました。

尚、私の環境では確かにちびちびというか、徐々にスクロールします。
私の環境はWinXP Pro、IE6及びMozila2(.0.0.3)です。

匿名さんの環境をご参考までに教えていただければ幸いです。

11   名前: Z ◆XTzyosZXcL : 2007/04/01(日) 16:46  ID:n0OHqpHV sub-Cl
>>10
 それ以外に、

・端末の処理能力(CPUのクロック数など)
・回線の状態(通信速度、有線or無線)

など、影響を与えると思われるものが他にも色々と考えられるように思いますので「WinXP Pro、IE6及びMozila2(.0.0.3)」の情報でも「徐々にスクロール」するかどうかは保証の限りでないのではと思います。

#そもそもJavaScriptを切っていれば何もおきない訳ですしね。

12   名前: minx : 2007/04/01(日) 16:46  ID:i2Krktoq sub-.B
なるほど、勉強になりました。
ありがとうございます。

13   名前: 匿名 : 2007/04/01(日) 16:46  ID:SHqbFxHj sub-Cz
for/while ループ中にレンダリングできるというのは、ハイスペックなマシンか、逆にめっちゃ旧式のマシンだと思う(そうなると Firefox 2.0 なんて動かないか)。

・Windows XP SP2(デスクトップ、1.2GHz)
・Windows XP SP1(ノート、700MHz)
・MacOS X 10.4(iBook、800MHz)

どれにも Firefox 2.0、Opera 9.1 は入っているが「ちびちび」とは動かない。

http://www.oklab.org/test/
http://www.pro.or.jp/%7Efuji/mybooks/cdiag/cdiag.2.7.html (最後の節)

14   名前: ぎんじ : 2007/04/01(日) 16:46  ID:mhqgBLS6 sub-Ds
匿名さん、minxさん、Zさん、ありがとうございます。

一瞬で、ではなく、するするするーとターゲット地点まで移動させるよう、
いろいろやってみます。

一覧へ戻る