Point 2 上下の無限スクロールをJavaScriptで実装

2013.6.6 THU

Case Study {01}
華やかでクリエイティブなUIが印象的な
「MVA - SPACE SHOWER MUSIC VIDEO
AWARDS」オフィシャルサイト
url. mva.jp/

Point 2
→ 上下の無限スクロールをJavaScriptで実装

//インフィニティスクロール
//メインのクラスのupdate部分を抜粋
//wheelのイベント処理でthis.offtopの値を足し引きされると、
//updateでスクロールの処理

index_main.prototype.update = function() {
　var h, items, y, yy;

　//セルを表示できる領域の高さ
　h = Util.window.size().height - $("#header").height() - $("#footer").height();

　//セルを格納している要素の縦軸の位置
　y = this.cellarea.position().top;

　//スクロールのイージングの計算後の縦軸の位置
　yy = y + (this.offtop - y) * 0.1;

　//セルを格納している要素の縦移動
　this.cellarea.css("top", yy + "px");
　yy *= -1;

　//表示に不必要なセルを消し、必要なセルのデータを取得
　items = this.floatObjects.scroll(yy, yy + h);
　if (items != null) {
　　//セルの表示処理
　　this.viewCells(items);
　}
　return requestAnimationFrame(this.update);
};

// this.floatObjects.scroll 部分（別クラス）
Tiling.prototype.scroll = function(miny, maxy) {
　var delete_max, delete_min, head, i, item, l, tail;
　delete_min = miny - 500;
　delete_max = maxy + 500;
　i = 0;
　l = this.items.length;

　//cellのデータが消去するラインを超えたら消す
　while (i < l) {
　　item = this.items[i];
　　if (item != null) {
　　　head = item.top + item.height;

　　tail = item.top;
　　if (tail > delete_max) {
　　　　this.removeTails(item);
　　　　this.spools.unshift(this.removeCell(item));
　　　　　l--;
　　　　　i--;
　　　　} else if (head < delete_min) {
　　　　　this.removeHeads(item);
　　　　　this.spools.push(this.removeCell(item));
　　　　　l--;
　　　　　i--;
　　　　}
　　　}
　　　i++;
　　}

　　//更新処理
　　return this.update();
　};

　// return this.update() 部分……に続く
　Tiling.prototype.update = function() {
　　var flg;
　　this.updateItems = [];
　　flg = this.checkTailsBorder();
　　while (flg) {
　　　flg = this.pushToStage();
　　　if (flg) {
　　　　　flg = this.checkTailsBorder();
　　　}
　　}
　　flg = this.checkHeadsBorder();
　　while (flg) {
　　　flg = this.unshiftToStage();
　　　if (flg) {
　　　　flg = this.checkHeadsBorder();
　　　}
　　}
　　return this.updateItems;
　};

トップページは、Masonryに加えて「Infinite Scroll」（無限スクロール）も実装。一般的なInfinite Scrollは下方向のみだが、ここでは上下方向を実現した。14個のセルをワンセットとし、上下方向スクロールの際、新たなデータを取得してフェードアニメーションで表示する。同時に非表示となったデータを削除してメモリ負荷を軽減する。図のソースはそれを実現するためのJavaScriptクラスの一部。表示に不要なセルを消し、必要なセルのデータを取得するループ処理を行うことで、無限スクロールを実現している。