css 戴夫斯图尔特的钢笔。

Posted 2021-05-13

GreenSock Timeline - Basic Tween
--------------------------------
Basic Timeline example with slider

A [Pen](http://codepen.io/davestewart/pen/ACHmx) by [Dave Stewart](http://codepen.io/davestewart) on [CodePen](http://codepen.io/).

[License](http://codepen.io/davestewart/pen/ACHmx/license).

<div id="stage">
  <div class="box" id="box1"></div>
</div>

<div id="timeline">
  <span></span>
</div>

// ----------------------------------------------
// SETUP
// ----------------------------------------------

// variables
	var none = Power0.easeOut;

// objects
	var $timeline = $('#timeline');
	var $playhead = $('#timeline span');

// timeline manipulation
	function onUpdate()
	{
    var p = tl.progress();
    var t = tl.totalTime();
    var d = tl.totalDuration();
    var c = d * p;
    $playhead.width((p * 100) + '%').text('Time:' + t.toFixed(3));
	}
  $timeline
  	.on('mousemove', function(event){
    	var w = $timeline.width();
	    var x = event.offsetX;
  	  var p = x / w;
    	tl.pause().progress(p);
  	})
  	.on('mouseout', function(event){
      tl.resume();
    });


// ----------------------------------------------
// animation
// ----------------------------------------------

// elements
  var box1 = $('#box1').get(0);

// timeline
	var tl = new TimelineLite({onUpdate:onUpdate});

// animate main box
	tl.to(box1, 10, {left:750, ease:none}, 0);

/* layout */
body{
  width:800px;
  font:12px normal "Arial", sans-serif;
}

#stage {
  position:relative;
  height:200px;
  background-color:black;
}

#timeline {
  width:100%;
  height:50px;
  background-color:#ccc;
  margin-top:5px;
}

#timeline span{
	display:block;
  background:rgba(0, 0, 0, 0.5);
  height:50px;
  width:50%;
}

/* elements */
.box {
  width:50px;
  height:50px;
  position:absolute;
}

#box1 { 
  background-color:red;
}