Movable Type 備忘録

 ブラウザのスクロールに連動する RSS アイコン表示

  • Dec252007
  • Vote:
    http://bizcaz.com/archives/2007/12/25-001017.php
  • Categories: JavaScript
  • Tags:
  • Social Bookmark

こんばんわ^^

Wii 初めてやりました。
今さっき聞いた話だけど、姪っ子たちは今日から年末まで泊まるんだとかっ Σ(￣Д￣；) がびーーーん !!
で、家から Wii 持ってきたらしくってボクシングゲームやってみたんですけど･･･ムズかしいんですねぇ (;￣∇￣A

姪っ子( 5 歳 )がやけに強いんです。
どう見ても適当にやってるとしか思えないのにやたら強いんです（つω-`｡）なぜ
甥っ子( 7 歳 )もやりなれてるようで、姪っ子程!? じゃないけどやっぱり強い。

どうやらわたしにはゲームは向いてないようです (´Д｀；) 知ってたけど･･･。
チビたちは「スーパーマリオ ギャラクシー」ってので遊んでる( ママ／パパがいないので、ここぞとばかりに夜更かし中 )ので、今のうちに記事書いちゃいます (;￣∇￣A

さてさて、今回は youmos さんとこで配布してる wrapScroll を久しぶりに使ってみたのでご紹介します♪

使い方はカンタンで、わたしのサイトでは RSS アイコンを右サイドにブラウザーのスクロールに連動させて表示しています。

最近では prototype や jQuery などのフレームワークを使ったエフェクトが多いですが、wrapScroll は それらのフレームワークに依存することなく使用できます。

使い方

Wrapscroll

使い方は youmos さんとこで詳しく説明されてるのでそちらを参照してください。
ここでは実際にわたしのサイトでどのように使ってるかを説明しますね (￣∇￣)b

わたしのサイトのテンプレートは大まかに右図のような構成になってます。
青く網掛けした部分が RSS アイコンで、<div id="content">～</div> を移動範囲として設定します。
その場合の設定方法は以下の通りです。

  1. <script type="text/javascript">
  2. //<![CDATA[
  3. var obj = new wrapScroll ('wrapscroll', 'content');
  4. obj.marginTop = 50;
  5. //]]>
  6. </script>

青い字の部分にはブラウザーのスクロールと連動させたいブロックの ID を指定します。図で言うと <div id="wrapscroll"> になります。
赤い字の部分には移動範囲を設定します。図で言うと <div id="content"> を指定しています。

必ずしも赤い字は必要ではないのですが、もし期待した動作にならなかった場合には移動範囲を明示的に指定してあげることで、思ったとおりの動作をするようになります (￣∇￣)b

また、緑の字の部分ではお好みですが上マージンを指定することで表示位置を調整できます。

以上です。
わたしのサイトでは、タグ検索時にも prototype & scriptaculous によるスクロールエフェクトを使用してますが、問題なく動作してます。

お試しあれぇ～(●´∀｀●)♪

 Trackback Pings(0)

No trackbacks found.

 Comments(9)

#1: Posted by Author Profile Page ゆにっく @ December 25, 2007 [REPLY]
user-pic

姪っ子、甥っ子とWiiで遊びましたか!ええお姉ちゃんやん(^-^) それと、姪っ子甥っ子はゲームやり慣れてるっていうのはありますよね。そんな相手にいきなりWiiをやってもなかなか勝つのは難しいと思いますよ〜。俺はいい大人ですがゲームは割と得意ですけどね。Wii持ってるし(^^;) でも何か楽しそうでいいですね。

 
#2: Posted by Author Profile Page bzbell @ December 25, 2007 [REPLY]
user-pic

>>1 ゆにっく さん

こんばんわ^^

> そんな相手にいきなりWiiをやってもなかなか勝つのは難しいと思いますよ〜。俺はいい大人ですがゲームは割と得意ですけどね。Wii持ってるし(^^;) でも何か楽しそうでいいですね。

そぅなんですよねぇあせあせ
しかもシロウト相手に手加減しないし。

アクションゲーム !? ってのが苦手でしてあせあせ
へぇ～ゆにっく さんゲーム得意なんですかぁ。
『スーパーマリオ ギャラクシー』っての持ってますか!?
甥っ子曰く、おもしろいらしいですキャハハ

 
#3: Posted by Author Profile Page ゆにっく @ December 25, 2007 [REPLY]
user-pic

聞かれたので答えに来ました(笑)。スーパーマリオギャラクシーは持ってませんが、昔のゲームをダウンロードできるサービスをWiiは提供していてスーパーマリオブラザーズ3というのをやっています。
アクションゲームは得意な方でっせ、お姉さん♪
まあゲームだろうが何だろうが「楽しい」と思える趣味があれば何だってええような気がします(←何の話や!?)
ところで、絵文字可愛いですねあせあせ　猫好きなんで正直たまらんのですけどバイバイ

 
#4: Posted by かわぐち @ December 27, 2007 [REPLY]
user-pic

ども、かわぐちです。チュ！

以前、私もこのエフェクトを導入したんですが・・・、
期待してた動作にならず、断念してました。
ん～、今度、もう一回、チャレンジしてみます。やあ！

ウチにはDSしかないんですが、
Wiiは娘が買って買ってと
毎日うるさくて・・・。
たまにするのは、おもしろそ～ですね。バイバイ

 
#5: Posted by Author Profile Page bzbell @ December 28, 2007 [REPLY]
user-pic

>>4 かわぐち さん

こんばんわ^^

> 以前、私もこのエフェクトを導入したんですが・・・、
> 期待してた動作にならず、断念してました。

たぶん Ver Up 前だと prototype と競合しちゃってたような気がしたなぁ。
でもね、今の Ver は prototype とかと競合せず使えます。

> ウチにはDSしかないんですが、
> Wiiは娘が買って買ってと
> 毎日うるさくて・・・。

あせあせ はは
姪っ子たちもうるさかったですイヤイヤ

> たまにするのは、おもしろそ～ですね。

うん、わたしもそぅ思う。
わたしの場合、飽きっぽいこともあってまともにゲームクリアしたことないですあせあせ

 
#6: Posted by かわぐち @ December 28, 2007 [REPLY]
user-pic

ども、かわぐちです。

>でもね、今の Ver は prototype とかと競合せず使えます。
うひょっ！そうなんですか。
それは知りませんでしたぁ～。
んじゃ、この年末・年始で
トライしてみようかな？

貴重な情報、ありがとうございます。バイバイ

 
#7: Posted by Author Profile Page bzbell @ December 29, 2007 [REPLY]
user-pic

>>6 かわぐち さん

こんばんわ^^

> んじゃ、この年末・年始で
> トライしてみようかな？

はいやあ！
ところで、おさるちゃん、ブログ飽きちゃったんですかねキャハハ
最近･･･てか、もぅ何ヶ月も更新してないのであせあせ
まだ早かったかのかな。

 
#8: Posted by youmos @ January 2, 2008 [REPLY]
user-pic

wrapScrollの導入サンプルありがとうございます。
最近、いろいろなサイトで目にする機会も多くなってきましたが、RSSアイコンとページTOPリンクをセットでスクロール連動させてあげると便利ですね。

 
#9: Posted by Author Profile Page bzbell @ January 3, 2008 [REPLY]
user-pic

>>8 youmos さん

明けましておめでとうございます。
本年もよろしくお願いします (m;_ _)mペコ

youmos さん久しぶりですね。
ここ数ヶ月お忙しいようですが、記事の方楽しみにしてますんっ！？

> 最近、いろいろなサイトで目にする機会も多くなってきましたが、RSSアイコンとページTOPリンクをセットでスクロール連動させてあげると便利ですね。

ですね。
PAGE TOP のリンクをあっちこっち埋め込みたくなかったのでまとめてみましたのもじもじ

 

 Post a Comment

 

コメント用フィード