zymiboxpay/index.html

## index.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>css variables && animations</title>
  <script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
  <style>
  :root {
    --transparency: 1;
    --v_offset: -100%;
  }
  .container {
    width: 200px;
    height: 400px;
    margin: 450px auto 0;
    overflow-y: hidden;
  }
  .up,
  .down {
    width: 100%;
    height: 100%;
    transform: translateY(var(--v_offset));
  }

  .up {
    background-color: rgb(0, 203, 204);
  }

  .down {
    background-color: rgba(204, 0, 0, var(--transparency));
  }
  </style>
</head>
<body>
  <div class="container">
    <div class="up"></div>
    <div class="down"></div>
  </div>
  <script>
    $(function(){
      var $up = $('.up');
      var direction, persent;
      $('.container').on('mousedown',function(event){
        var _y = event.pageY;
        var last_y = event.pageY;
        var v_distance;

        $('.container').on('mousemove', function(inner_event){
          direction = inner_event.pageY - last_y > 0 ? 'down' : 'up';
          v_distance = Math.max(inner_event.pageY - _y, 0);
          persent = Math.min(v_distance * 1.0 / 400, 1);
          document.documentElement.style.setProperty('--transparency', (1 - persent));
          document.documentElement.style.setProperty('--v_offset', (1 - persent) * (-100) + '%');
          last_y = inner_event.pageY;
        });
      }).on('mouseup', function(inner_event){
        $('.container').off('mousemove');

        //动画时长 秒
        var duration = 2.0;
        //鼠标放开时所处位置，百份比
        var v_offset = (1 - persent) * (-100);
        //初速度，暂定为所处位置
        var v;

        //最终的目标
        var target;

        //计算出加速度
        var a;

        //时间差
        var t;
        //位移
        var s;
        //起始时间
        var startTime;

        if(direction == 'down') {
          // 匀减速直线运动
          target = 0;
          v = v_offset * -1.0;
          a = 2.0 * (v * duration - target + v_offset) / (duration * duration);
          startTime = Date.now();
          requestAnimationFrame(function step(){
            t = (Date.now() - startTime) / 1000.0;
            // from -100 to 0
            s = Math.min(v_offset + (v * t - a * t * t / 2.0 ), 0);
            document.documentElement.style.setProperty('--transparency', s * -1 / 100);
            document.documentElement.style.setProperty('--v_offset', s + '%');
            if(t < duration) {
              requestAnimationFrame(step);
            }
            else {
              //重置
              setTimeout(function(){
                document.documentElement.style.setProperty('--transparency', 1);
                document.documentElement.style.setProperty('--v_offset', '-100%');
              }, 500);
            }
          });
        }
        else if (direction == 'up') {
          target = -100;
          v = -100 - v_offset;
          a = 2.0 * (v * duration - target + v_offset) / (duration * duration);
          startTime = Date.now();
          requestAnimationFrame(function step(){
            t = (Date.now() - startTime) / 1000.0;
            // from 0 to -100
            s = Math.max(v_offset + (v * t - a * t * t / 2.0 ), -100);
            document.documentElement.style.setProperty('--transparency', s * -1 / 100);
            document.documentElement.style.setProperty('--v_offset', s + '%');
            if(t < duration) {
              requestAnimationFrame(step);
            }
          });

        }

      });
    });
  </script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>css variables && animations</title>
	<script src="http://cdn.bootcss.com/jquery/2.2.4/jquery.js"></script>
	<style>
	:root {
	--transparency: 1;
	--v_offset: -100%;
	}
	.container {
	width: 200px;
	height: 400px;
	margin: 450px auto 0;
	overflow-y: hidden;
	}
	.up,
	.down {
	width: 100%;
	height: 100%;
	transform: translateY(var(--v_offset));
	}

	.up {
	background-color: rgb(0, 203, 204);
	}

	.down {
	background-color: rgba(204, 0, 0, var(--transparency));
	}
	</style>
	</head>
	<body>
	<div class="container">
	<div class="up"></div>
	<div class="down"></div>
	</div>
	<script>
	$(function(){
	var $up = $('.up');
	var direction, persent;
	$('.container').on('mousedown',function(event){
	var _y = event.pageY;
	var last_y = event.pageY;
	var v_distance;

	$('.container').on('mousemove', function(inner_event){
	direction = inner_event.pageY - last_y > 0 ? 'down' : 'up';
	v_distance = Math.max(inner_event.pageY - _y, 0);
	persent = Math.min(v_distance * 1.0 / 400, 1);
	document.documentElement.style.setProperty('--transparency', (1 - persent));
	document.documentElement.style.setProperty('--v_offset', (1 - persent) * (-100) + '%');
	last_y = inner_event.pageY;
	});
	}).on('mouseup', function(inner_event){
	$('.container').off('mousemove');

	//动画时长秒
	var duration = 2.0;
	//鼠标放开时所处位置，百份比
	var v_offset = (1 - persent) * (-100);
	//初速度，暂定为所处位置
	var v;

	//最终的目标
	var target;

	//计算出加速度
	var a;

	//时间差
	var t;
	//位移
	var s;
	//起始时间
	var startTime;

	if(direction == 'down') {
	// 匀减速直线运动
	target = 0;
	v = v_offset * -1.0;
	a = 2.0 * (v * duration - target + v_offset) / (duration * duration);
	startTime = Date.now();
	requestAnimationFrame(function step(){
	t = (Date.now() - startTime) / 1000.0;
	// from -100 to 0
	s = Math.min(v_offset + (v * t - a * t * t / 2.0 ), 0);
	document.documentElement.style.setProperty('--transparency', s * -1 / 100);
	document.documentElement.style.setProperty('--v_offset', s + '%');
	if(t < duration) {
	requestAnimationFrame(step);
	}
	else {
	//重置
	setTimeout(function(){
	document.documentElement.style.setProperty('--transparency', 1);
	document.documentElement.style.setProperty('--v_offset', '-100%');
	}, 500);
	}
	});
	}
	else if (direction == 'up') {
	target = -100;
	v = -100 - v_offset;
	a = 2.0 * (v * duration - target + v_offset) / (duration * duration);
	startTime = Date.now();
	requestAnimationFrame(function step(){
	t = (Date.now() - startTime) / 1000.0;
	// from 0 to -100
	s = Math.max(v_offset + (v * t - a * t * t / 2.0 ), -100);
	document.documentElement.style.setProperty('--transparency', s * -1 / 100);
	document.documentElement.style.setProperty('--v_offset', s + '%');
	if(t < duration) {
	requestAnimationFrame(step);
	}
	});

	}

	});
	});
	</script>
	</body>
	</html>