lizhug · December 17, 2015 18:19
diff --git a/gistfile1.html b/gistfile1.html
 <html>
 	<head>
 		<meta charset="utf-8" />
 		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
 		<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js"></script>
 		
 		<style type="text/css">
 			body {
 				background-color: #111;
 				color: #fff;
 			}
 			#demo {
 				position: relative;
 				width: 800px;
 				height: 300px;
 				margin: auto;
 				overflow: hidden;
 			}
 			#demo h3 {
 				position: absolute;
 				font-family: '微软雅黑', sans-serif;
 				font-weight: 700;
 				margin: 0;
 				padding: 0;
 				width: 800px;
 				text-align: center;
 				visibility: hidden;
 				font-size: 120px;
 				top:65px;
 			}

 		</style>
 	</head>
 	<body>		
 		<div id="demo"></div>
 		<script type="text/javascript">
 		
 			//识别是不是句子的结尾
 			var cut = /(\. | \? | \!)$/g;
 			
 			//动画主体
 			var actionStart = function(text){
 				var container = $("#demo"),
 					words = text.split(" "),
 					myTween = new TimelineMax({delay: 0.6, repeat: 2, repeatDelay: 4}),
 					wordsLength = words.length,
 					time = 0,
 					word, element, duration, isSentence, i;
 					

 				for (i = 0; i < wordsLength; ++i){
 					word = words[i];
 					isSentence = cut.test(word);
 					element = $("<h3>" + word + "</h3>").appendTo(container);
 					duration = Math.max(0.6, word.length * 0.1);

 					if (isSentence){
 						duration += 0.6;
 					}

 					TweenLite.set(element, {autoAlpha: 0, scale: 0, z: 0.01});

 					myTween.to(element, duration, {scale: 1.2, ease: SlowMo.ease.config(0.25, 0.9)}, time)
 						   .to(element, duration, {autoAlpha: 1, ease: SlowMo.ease.config(0.25, 0.9, true)}, time);
 						  

 					time += duration - 0.05;

 					if (isSentence){
 						time += 0.6;
 					}
 				}
 			};

 			actionStart("These is only a practice demo");

 		</script>
 	</body>
 </html>
	<html>
	<head>
	<meta charset="utf-8" />
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.js"></script>
	<script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.0/TweenMax.min.js"></script>

	<style type="text/css">
	body {
	background-color: #111;
	color: #fff;
	}
	#demo {
	position: relative;
	width: 800px;
	height: 300px;
	margin: auto;
	overflow: hidden;
	}
	#demo h3 {
	position: absolute;
	font-family: '微软雅黑', sans-serif;
	font-weight: 700;
	margin: 0;
	padding: 0;
	width: 800px;
	text-align: center;
	visibility: hidden;
	font-size: 120px;
	top:65px;
	}

	</style>
	</head>
	<body>
	<div id="demo"></div>
	<script type="text/javascript">

	//识别是不是句子的结尾
	var cut = /(\. \| \? \| \!)$/g;

	//动画主体
	var actionStart = function(text){
	var container = $("#demo"),
	words = text.split(" "),
	myTween = new TimelineMax({delay: 0.6, repeat: 2, repeatDelay: 4}),
	wordsLength = words.length,
	time = 0,
	word, element, duration, isSentence, i;


	for (i = 0; i < wordsLength; ++i){
	word = words[i];
	isSentence = cut.test(word);
	element = $("<h3>" + word + "</h3>").appendTo(container);
	duration = Math.max(0.6, word.length * 0.1);

	if (isSentence){
	duration += 0.6;
	}

	TweenLite.set(element, {autoAlpha: 0, scale: 0, z: 0.01});

	myTween.to(element, duration, {scale: 1.2, ease: SlowMo.ease.config(0.25, 0.9)}, time)
	.to(element, duration, {autoAlpha: 1, ease: SlowMo.ease.config(0.25, 0.9, true)}, time);


	time += duration - 0.05;

	if (isSentence){
	time += 0.6;
	}
	}
	};

	actionStart("These is only a practice demo");

	</script>
	</body>
	</html>