<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery创意线条步骤流程图动画特效</title>
<script src="js/jquery.min.js"></script>
<style>
body {
background: #d33144;
}
.process {
width: 800px;
margin: 3em auto;
cursor: default;
}
.process-items {
display: table;
margin: 0 0 10px;
padding: 0;
list-style-type: none;
color: #fff;
font-size: 18px;
text-align: center;
}
.process-items li {
display: table-cell;
width: 25%;
vertical-align: bottom;
padding: 0 .5em;
-webkit-transform: scale(0.65) translateY(40px);
transform: scale(0.65) translateY(40px);
-webkit-transform-origin: bottom center;
transform-origin: bottom center;
transition: -webkit-transform .5s;
transition: transform .5s;
transition: transform .5s, -webkit-transform .5s;
}
.process-items li.active {
-webkit-transform: scale(1) translateY(0);
transform: scale(1) translateY(0);
}
.process-items em {
display: block;
margin-top: .5em;
}
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<div class="process">
<ol class="process-items">
<li class="active">第一步 1
<em>just do it</em></li>
<li>第二步 2
<em>yesterday you said tomorrow</em></li>
<li>第三步 3
<em>just do it</em></li>
<li>第四步 4
<em>make your dreams come true</em></li>
</ol>
<canvas id="canvas" width="800" height="55"></canvas>
</div>
<script>
var process = $('.process');
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
var SECTION_WIDTH = 200;
var sections = [];
var create = function(start) {
var section = {
start: start,
width: SECTION_WIDTH,
height: 45,
hMax: 35,
hMod: 0,
progress: 0,
dot: {
x: 0,
y: 0
}
};
section.end = section.start + section.width;
section.dot.x = section.start + section.width/2;
section.dot.y = section.height;
sections.push(section);
};
var draw = function(s) {
var wMod = s.width * 0.3;
ctx.beginPath();
ctx.moveTo(s.start, s.height);
ctx.bezierCurveTo(
s.start+wMod, s.height,
s.start+wMod, s.height - s.hMod,
s.start + s.width/2, s.height - s.hMod
);
ctx.bezierCurveTo(
s.end-wMod, s.height - s.hMod,
s.end-wMod, s.height,
s.end, s.height
);
ctx.lineWidth = 4;
ctx.strokeStyle = 'white';
ctx.stroke();
ctx.beginPath();
ctx.fillStyle = 'white';
ctx.arc(s.dot.x, s.dot.y, 8, 0, Math.PI * 2);
ctx.fill();
};
function quad(progress) {
return Math.pow(progress, 2);
}
function makeEaseOut(delta) {
return function(progress) {
return 1 - delta(1 - progress);
}
}
var quadOut = makeEaseOut(quad);
var bend = function(s) {
if(s.progress < s.hMax) {
var delta = quadOut(s.progress/s.hMax);
s.hMod = s.hMax*delta;
s.dot.y = s.height - s.hMax*delta;
s.progress++;
}
};
var reset = function(s) {
if(s.progress > 0) {
var delta = quadOut(s.progress/s.hMax);
s.hMod = s.hMax*delta;
s.dot.y = s.height - s.hMax*delta;
s.progress -= 2;
} else {
s.hMod = 0;
s.dot.y = s.height;
s.progress = 0;
}
};
var currentSection = 0;
process.on('mousemove', function(event) {
var section = Math.floor((event.clientX - process.offset().left) / SECTION_WIDTH);
currentSection = section;
process.find('.active').removeClass('active');
process.find('li').eq(section).addClass('active');
});
create(0);
create(200);
create(400);
create(600);
var loop = function() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
sections.forEach(function(s, index) {
if(currentSection === index) {
bend(s);
} else {
reset(s);
}
draw(s);
});
window.requestAnimationFrame(loop);
};
loop();
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器：360、FireFox、Chrome、Opera、傲游、搜狗、世界之窗. 不支持Safari、IE8及以下浏览器。</p>
<p>来源：<a href="http://www.lanrenzhijia.com/" target="_blank">懒人</a></p>
</div>
</body>
</html>
