Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
  <script>
   var EndlessList=function(){};EndlessList=function(param){var canvas=param.canvas,print=canvas.getContext("2d"),offset=param.offset,finger={x:0,y:0},fingerStart={x:0,y:0},zero=0,inheight=0,now=new Date(),direction,speed=[],velocity={x:0,y:0},activing=false,gliding=false,freeze=false,outing=false,testing=false,DPI=param.DPI||1;media={fps:60,animate:function(callback){window.setTimeout(callback,1000/media.fps)}},ease=function(start,end,time,now){return start+(end-start)*(1-Math.pow(2,-(now/time)*10))},heightList=[],moveToTime=1500,glidToTime=2000,touchstart=param.touchstart||function(){},touchmove=param.touchmove||function(){},touchend=param.touchend||function(){},touchleft=param.touchleft||function(){},touchright=param.touchright||function(){},swipeleft=param.swipeleft||function(){},swiperight=param.swiperight||function(){},pulldown=param.pulldown||function(){},pullend=param.pullend||function(){},tap=param.tap||function(){},shouldPullDown=false,check_direction=function(start,end){var direction="",directionX=Number(end.x-start.x),directionY=Number(end.y-start.y),DirectionX=Math.abs(directionX),DirectionY=Math.abs(directionY);if(DirectionX<DirectionY*1.8){if(directionY<=0){direction="up"}else{direction="down"}}else{if(directionX>=0){direction="right";lr=true}else{direction="left";lr=true}}return direction},pull=function(){},pullup=function(){pullend();pullup=function(){}},moveTo=function(target){gliding=true;var startTime=new Date().getTime(),fps=1000/media.fps,start=zero,end=target,duration=moveToTime,_now=0,animate=media.animate,play=function(){if(!gliding){return false}now=new Date().getTime()-startTime;if((duration-now)<fps||freeze){zero=ease(start,end,duration,duration);inheight=mainDraw(zero);gliding=false;return false}zero=ease(start,end,duration,now);inheight=mainDraw(zero);animate(play)};animate(play)},glidTo=function(target){gliding=true;var startTime=new Date().getTime(),fps=1000/media.fps,start=zero,end=target,duration=glidToTime,_now=0,animate=media.animate,play=function(){if(!gliding){return false}now=new Date().getTime()-startTime;if((duration-now)<fps||freeze){zero=ease(start,end,duration,duration);if(zero>0){zero=0}else{if(inheight+zero-offset.height<0){zero=offset.height-inheight}}inheight=mainDraw(zero);gliding=false;return false}zero=ease(start,end,duration,now);if(zero>0){zero=0;inheight=mainDraw(zero);gliding=false;return false}else{if(inheight+zero-offset.height<0){if(offset.height<=inheight){zero=offset.height-inheight}else{zero=0}inheight=mainDraw(zero);gliding=false;return false}}if(inheight+zero<2*offset.height){pullup()}inheight=mainDraw(zero);animate(play)};animate(play)},mainDraw=function(zero){var loopFunction=param.main||function(){},i=0,_height=0,_totalHeight=0,drawed=false;print.clearRect(0,0,offset.width,offset.height);while(true){drawed=false;if(heightList[i]==undefined){_height=loopFunction(zero+_totalHeight,i);heightList[i]=_height;drawed=true}if(_height==undefined){break}_totalHeight+=heightList[i];if(_totalHeight>-zero&&_totalHeight-heightList[i]<-zero+offset.height&&drawed==false){_height=loopFunction(zero+_totalHeight-heightList[i],i);if(_height!=heightList[i]){_totalHeight=_totalHeight-heightList[i]+_height;heightList[i]=_height}drawed=true}i++}return _totalHeight},control={refresh:function(){mainDraw(zero)},go:function(){activing=false},stop:function(){activing=true},goAnimate:function(){freeze=false},stopAnimate:function(){gliding=false;freeze=true},moveTo:function(y){moveTo(y)},zero:function(n){zero=n;mainDraw(zero)},gliding:function(){return gliding}},ePageXY=function(e){var _page={x:0,y:0};if(e.touches==undefined){_page.x=e.pageX;_page.y=e.pageY}else{_page.x=e.touches[0].pageX;_page.y=e.touches[0].pageY}return _page},startAction=function(e){var _page=ePageXY(e);fingerStart.x=(_page.x-offset.left)*DPI;fingerStart.y=(_page.y-offset.top)*DPI;finger.x=(_page.x-offset.left)*DPI;finger.y=(_page.y-offset.top)*DPI;if(activing){return false}now=new Date();shouldPullDown=false;pull=function(){shouldPullDown=true;pull=function(){}};pullup=function(){pullend();pullup=function(){}};gliding=false;tapping=true;testing=true;direction="";speed=[];touchstart(finger);e.preventDefault()},moveAction=function(e){if(activing){return false}var _page=ePageXY(e),moveBlock=function(){var nowAdd=(finger.y-fingerStart.y),nowPoint=zero+nowAdd,_bottom=inheight+nowPoint-offset.height;if(nowPoint>0){nowPoint=nowPoint/1.7;pull();outing=true}else{if(_bottom<0&&offset.height<=inheight){nowPoint=offset.height-inheight+_bottom/1.7;outing=true}}if(nowPoint!=NaN){inheight=mainDraw(nowPoint)}if(_bottom<offset.height){pullup()}};now=new Date();finger.x=(_page.x-offset.left)*DPI||finger.x;finger.y=(_page.y-offset.top)*DPI||finger.y;if(Math.abs(Math.sqrt(fingerStart.x*fingerStart.x+fingerStart.y*fingerStart.y)-Math.sqrt(finger.x*finger.x+finger.y*finger.y))>5){tapping=false}if(testing&&!tapping){testing=false;direction=check_direction(fingerStart,finger)}else{if(direction=="left"){touchleft(finger)}else{if(direction=="right"){touchright(finger)}else{if(direction=="up"){moveBlock()}else{if(direction=="down"){moveBlock()}}}}}speed.push({time:now.getTime(),point:JSON.parse(JSON.stringify(finger))});if(speed.length>5){speed.shift()}touchmove(finger);e.preventDefault()},endAction=function(e){if(activing){return false}if(tapping){finger.x-=10;finger.y-=5;tap(finger)}else{var sumX=0,sumY=0,length=speed.length,_speedB,_speedA;for(var x in speed){if(x!=0){_speedA=speed[x];_speedB=speed[x-1];sumX+=_speedA.point.x-_speedB.point.x;sumY+=_speedA.point.y-_speedB.point.y}}velocity.x=sumX/(length-2);velocity.y=sumY/(length-2);if(direction=="up"||direction=="down"){if(outing){var nowAdd=(finger.y-fingerStart.y),nowPoint=zero+nowAdd,_bottom=inheight+nowPoint-offset.height;if(nowPoint>0){nowPoint=nowPoint/1.7}else{if(_bottom<0){nowPoint=offset.height-inheight+_bottom/1.7}}outing=false;zero=nowPoint}else{zero+=finger.y-fingerStart.y}}var _top=zero,_bottom=inheight+zero-offset.height;if(_top>0){moveTo(0)}else{if(_bottom<0&&offset.height<=inheight){moveTo(offset.height-inheight)}else{if(_bottom<0&&offset.height>inheight){moveTo(0)}else{if(velocity.y){if(direction=="up"||direction=="down"){if(velocity.y>90){velocity.y=90}else{if(velocity.y<-90){velocity.y=-90}}glidTo(zero+velocity.y*Math.abs(velocity.y))}}}}}if(shouldPullDown&&zero>60*DPI){pulldown()}if(direction=="left"){swipeleft(fingerStart,finger)}else{if(direction=="right"){swiperight(fingerStart,finger)}}}tapping=false;testing=false;direction="";touchend(finger);e.preventDefault()};inheight=mainDraw(zero);canvas.addEventListener("touchstart",function(e){startAction(e)});canvas.addEventListener("touchmove",function(e){moveAction(e)});canvas.addEventListener("touchend",function(e){endAction(e)});return control};
  </script>
  <meta charset="utf-8">
  <title>HTML5 Canvas endless list for mobile by Wei Jia</title>
</head>
  
  
  
  
  
  
<body>
  <div id="main_title">
        HTML5 Canvas endless list for mobile
    </div>
    <div id="canvas_container">
        <canvas id="canvas" width="1000px" height="1000px"></canvas>
    </div>
</body>
</html>
 
//init values
var canvas = document.getElementById("canvas"),
    print = canvas.getContext("2d"),
    offset = $(canvas).offset(),
    touchstartPoint = false;
​
offset.width = 1000;
offset.height = 1000;
​
//use endlist list
var list = EndlessList({
    canvas: canvas,
    offset: offset,
    DPI: 2,
    main: function(positionY, i){
        if(i < 100)
        {
            var inheight = 90;
            print.save();
            print.fillStyle = "rgba("+((i*10)%150+50)+","+((i*10)%150+50)+","+((i*10)%150+50)+",0.3)";
            print.beginPath();
            print.rect(0, positionY, 1000, 88);
​
            //user action
            if(touchstartPoint)
            {
                if(print.isPointInPath(touchstartPoint.x,touchstartPoint.y))
                {
                    print.fillStyle = "#d99330";
                    touchstartPoint = false;
                }
            }
​
            print.fill();
            print.fillStyle = "#f1f1f1";
            print.font = "40px Arial";
            print.textAlign = "center";
            print.fillText(i, 490, positionY+60);
            print.restore();
​
            return inheight;
        }
    },
    touchstart: function(position){
        touchstartPoint = position;
        list.refresh();
    }
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
kahitomipro
0viewers