ページの無限ループ

今回はページの無限ループに挑戦してみようかと思います。
横の無限ループは良くプラグインで使用される機能ですよね。
試しに一度やってみようと思います。

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

        <script src="./jquery-1.9.1.min_.js"></script>   
        <script type="text/javascript"><!--

            $(function(){

                $("body").height($(window).height() + 50);
                var heightB  = $("body").height();
                
                var heightW  = 0;
                var heightST = 0;
                var baseTop  = 1;
                
                $(window).scroll(function() {

                    heightW  = window.innerHeight;
                    heightST = $(window).scrollTop();

                    if ( heightST >= (heightB - heightW) ) {
                        $(window).scrollTop(baseTop);
                    } else if (heightST == 0) {
                        $(window).scrollTop(heightB - heightW - baseTop);
                    }

                });

            });


        --></script>

        <link rel="stylesheet" href="reset.css" type="text/css">
        <style type="text/css"><!--

            #main_area div {
                margin : 50px;
            }

        --></style>

    </head>
    <body>

        <div id="page_area">

            <div id="main_area">
                <div>text01 text01 text01 text01 text01</div>
                <div>text02 text02 text02 text02 text02</div>
                <div>text03 text03 text03 text03 text03</div>
                <div>text04 text04 text04 text04 text04</div>
                <div>text05 text05 text05 text05 text05</div>
                <div>text06 text06 text06 text06 text06</div>
                <div>text07 text07 text07 text07 text07</div>
                <div>text08 text08 text08 text08 text08</div>
                <div>text09 text09 text09 text09 text09</div>
                <div>text10 text10 text10 text10 text10</div>
                <div>text11 text11 text11 text11 text11</div>
                <div>text12 text12 text12 text12 text12</div>
                <div>text13 text13 text13 text13 text13</div>
                <div>text14 text14 text14 text14 text14</div>
                <div>text15 text15 text15 text15 text15</div>
                <div>text16 text16 text16 text16 text16</div>
                <div>text17 text17 text17 text17 text17</div>
                <div>text18 text18 text18 text18 text18</div>
                <div>text19 text19 text19 text19 text19</div>
                <div>text20 text20 text20 text20 text20</div>
                <div>text21 text21 text21 text21 text21</div>
                <div>text22 text22 text22 text22 text22</div>
                <div>text23 text23 text23 text23 text23</div>
                <div>text24 text24 text24 text24 text24</div>
                <div>text25 text25 text25 text25 text25</div>
                <div>text26 text26 text26 text26 text26</div>
                <div>text27 text27 text27 text27 text27</div>
                <div>text28 text28 text28 text28 text28</div>
                <div>text29 text29 text29 text29 text29</div>
                <div>text30 text30 text30 text30 text30</div>
            </div>

        </div>

    </body>
</html>

sample

sample では ページを上下にスクロールすると無限ループします。

よくある処理のため、ありがちではありますが結構面白いですね。
あまりにもページが短い場合などは別途対応する必要もありそうですが、
そのあたりは臨機応変に対応する必要がありそうです。

表示する内容に最寄りますが綺麗な写真などを繰り返し表示する場合など、
使い方によっては効果的に表示することができそうです。
まぁ、今回の sample の様なページでは魅力も半減ですが(笑)

jQuery はここからダウンロードしてください。

この投稿は役に立ちましたか? 役に立った 役に立たなかった 0 人中 0 人がこの 投稿 は役に立ったと言っています。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です