• かちびと.net

    jQueryでWebサイト内を無限にスクロール出来るようにする方法。誰が得するか分からないけど無制限にスクロールできる方法を書いておきます。

    Kudos for

    WordPress jQuery
  • About This

    Web制作に役立つTips、チュートリアル、、マーケティングに役立つ情報などのリソースをほぼ毎日配信しています。宜しければメモ代わりにご利用下さい。詳しい情報はAbout me またはhumans.txtをご覧下さい。

    Kachibito.net is a community-based website for web designers and developers. The site includes a popular weblog, a design gallery, a open source software, design tips, and the various web-news.

  • Links

jQueryでWebサイト内を無限にスクロール出来るようにする

スポンサーリンク

ちょっと語弊があるかもですけど、無限に
スクロール出来るように見せる、みたいな
方法です。これが何の役に立つんですか
とか言われると困っちゃうんですけど・・・
こういうのがあってもいいかなと思ったの
でちょっと作ってみました。実装にはjQuery
を使います。

土曜日なのでちょっとネタ的な話題です。

数日前に「スクロールに応じて要素がアニメーションする、視差効果(パララックス)を取り入れたWebデザイン例とTipsいろいろ」っていう記事を書いたんですが、この中に App Galaxy by Googleっていうサイトとunfoldっていうサイトがありまして、ここが無限に縦スクロールできるようになってます。

これを実装しよう、という誰得な話です。

Sample


以下サンプルです。

Sample

コード

$(function(){
$("body").height($(window).height() + 2000 ); $(window).scroll(function() {
if
($(window).scrollTop() >= ($("body").height() - $(window).height())) { $(window).scrollTop(1);}
else if
($(window).scrollTop() == 0) { $(window).scrollTop($("body").height() - $(window).height() - 1);}});
});

本体と上記コードで動作します。

全体の高さにブラウザの高さを加えます(日本語合ってるかな?w)。こうしてあげないとループ時にチカチカしちゃいます。

$("body").height($(window).height() + 2000 );

一番下に到達したら一番上に戻し、一番上に到達したら一番下に送ります。

if
($(window).scrollTop() >= ($("body").height() - $(window).height())) { $(window).scrollTop(1);}
else if
($(window).scrollTop() == 0) { $(window).scrollTop($("body").height() - $(window).height() - 1);}});

加えて、背景画像を繋ぎ目のないシームレスな画像にすれば無限にスクロール出来ているように見えますね。

横スクロールにしたければscrollTopをscrollLeftに、heightをwidthに変更すれば理屈上は実装出来ると思います。

css

body {
height: 2000px;
background: url("bg01.gif") ;
}
 

一応高さを指定します。

このまま使うと多分問題出ると思うので使うときは何かしら処理してください。

URLスペルミスしてたw

URL :
TRB :

Comments & Trackbacks (1)

Twitter

Web制作に役立つそうなリソースを独断と好みで配信しています。

かちびと.netにリンクの無いトラックバックはお受けいていません。
コメントされる前にガイドラインをご覧下さい。

twitter facebook rss contact

Ads

Posts

Contact

Services