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クラスの一部。表示に不要なセルを消し、必要なセルのデータを取得するループ処理を行うことで、無限スクロールを実現している。 |
>>> 目次へ戻る
本記事は『MdN』2013年7月号(vol.231)からの転載です。
そのほかには下記のような記事が掲載されています。
(▼クリックすると画像が大きく表示されます)
特集のすべての記事は誌面でお読みになれます。
月刊『MdN』掲載記事号の情報はこちら!
- ■そのほかの月刊『MdN』からの転載記事
- 「人物イラストレーションを思いのままに描く」(『MdN』2013年6月号より)
- 「Adobe CS5&6を今日から使い倒す!」(『MdN』2013年5月号より)
- 「デザイナーが日々の忙しさで放置している 「困った……」を解決します!」(『MdN』2013年4月号より)
- 「まるっとわかる! ブックデザインの教室」(『MdN』2013年3月号より)
- 「素材で広がる! デザインアイデア50」(『MdN』2013年2月号より)
- 「イラストレーション メイキング・スタイル14」(『MdN』2013年1月号より)