<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>GSAP 飞着去上班的人</title>
<style>
body,
html {
background: #99D5E2;
margin: 0;
padding: 0;
}
div#container {
width: 100%;
height: 100%;
background: #99D5E2;
position: fixed;
}
div#bg {
position: absolute;
display: block;
width: 100%;
height: 1000px;
background: transparent;
}
#tie path:nth-child(2),
#neckHair path:nth-child(2),
#foreHeadHair path:nth-child(2) {
visibility: hidden
}
div#container:before {
position: relative;
width: 100%;
display: block;
color: white;
font-family: arial, san-serif;
font-size: .75em;
padding: 10px;
content: 'SCROLL UP AND DOWN'
}
</style>
</head>
<body>
<script src="js/jquery-2.1.1.min.js"></script>
<script src="js/TweenMax.min.js"></script>
<!-- <a href='http://www.freepik.com/free-vector/business-moves-faster-with-a-rocket_765202.htm'>Modified Original Design by Freepik</a> -->
<div id='container'>
<svg x="0px" y="0px" viewBox="0 0 800 600" enable-background="new 0 0 800 600" xml:space="preserve">
<rect fill="#99D5E2" width="800" height="600" />
<g id="clouds">
<path fill="#FFFFFF" d="M93.2,85.3c0,0,0-8.3,11.4-8.1c0,0,0.5-7,6-11.1c2.1-1.6,5.4-3.1,10.3,0.4c5.6,4.1,7.7-13.5,17.7-2.5
c0,0,5.5-10,16.5-11.6c19.5-2.9,19.5,11.6,21.6,11.3c27.1-4.4,21.9,17.5,21.9,17.5s9.9,5.7-4.5,8s-22.2-2-22.2-2
s-23.2,8.3-37.3,3.3c0,0-29.9,3.4-35.6-0.9c0,0-5.5,3.4-9,0C86.4,86.2,87,85.1,93.2,85.3" />
<path fill="#FFFFFF" d="M436.6,281.7c0,0,3.9-10.5-7.2-19c3.5-3.4-11.9-7.3-11.9-7.3s5.3-21.3-21.9-26.5c-27.2-5.2-36,18.6-36,18.6
c-0.9-4.1-4-13.9-19.8-14.3c-15.8-0.4-16.2,16.2-16.2,16.2c-7.2-0.1-9.9,4.8-10.8,8.5c-1.2-0.1-2.5-0.1-3.8-0.1
c-26-0.4-26.7,17.5-26.7,17.5c-18.8-0.2-18.8,13.4-18.8,13.4c-10.1-0.4-37.5,1.4-31.7,7c5.8,5.6,41.1,0,41.1,0
c9.4,7,58.5,1.5,58.5,1.5c23.2,8.2,61.2-5.5,61.2-5.5s32.5,3.8,56.3,0C472.7,287.8,436.6,281.7,436.6,281.7z" />
</g>
<g id="guy">
<g id="jetpack">
<g id="flame">
<path fill="#F0D61D" d="M614.6,234.7c0,0,7.9,8.3,8.4,8.9c0.5,0.6,2-5.9,2-5.9s8.8,5.7,10.5,6.6c0,0-1.3-5-1.4-7.6
c0,0,23.6-1.9,28.4-3c0,0-21.7-18.8-23.7-18.8c0,0,2-2.5,2.8-3.6c0.7-1.1-11.3,0.5-11.3,0.5s2.1-5,2.4-6.9l-10.5,2
C622.2,206.8,615.5,229.3,614.6,234.7" />
<path fill="#FFEB80" d="M615.8,230.1c0,0,5.3,5.5,5.6,5.9c0.3,0.4,1.4-3.9,1.4-3.9s5.9,3.8,7.1,4.4c0,0-0.9-3.3-0.9-5.1
c0,0,15.8-1.3,19-2c0,0-14.5-12.6-15.9-12.6c0,0,1.4-1.7,1.8-2.4c0.5-0.7-7.6,0.3-7.6,0.3s1.4-3.4,1.6-4.6l-7,1.4
C620.9,211.4,616.4,226.5,615.8,230.1" />
</g>
<path fill="#C9F2FF" d="M560.3,177.7c0,11-4.7,19.4-8.9,24.7c13.5,16.2,52.3,30.1,52.3,30.1c15.4-21.1,13.9-34.4,13.9-34.4
C588.4,184.6,570.9,177.2,560.3,177.7" />
<path fill="#71A3AC" d="M601.5,231.3l1,2.1c0,0,7.7,3.4,8.4,3.7c0,0,18.1-21.6,15.6-37.6c0,0-7.6-3.4-9-2.8l-1.4,0.7
C616.2,197.5,614.7,213.3,601.5,231.3" />
<path fill="#C95E15" d="M593.2,228.7c0,0,10.3-12.8,15.6-35.3l-5.9-3.1c0,0-2.4,13.5-15.7,35.2L593.2,228.7z" />
<path opacity="0.53" fill="#FFFFFF" d="M552.5,185.5c0,0,3.5-7.4,15.2-5c11.7,2.4,37.1,14.1,46,18.2l-0.7,3.5
C613,202.2,559.3,174.5,552.5,185.5" />
<path fill="#C95E15" d="M560.3,177.7c-6.5,0.3-12,6.6-12.9,10.5c-1.2,4.9,0.1,9.6,3.9,14.2C555.6,197.1,560.3,188.7,560.3,177.7" />
</g>
<g id="rightHand">
<path fill="#F1F2F2" d="M557.7,244.9l-4.4,3.1c0,0,5.8,3.2,7.8,1.4L557.7,244.9z" />
<path fill="#A7A9AC" d="M554.3,247.6c0,0,5.5,2.4,6.5,1.8c1-0.6-2.1-4.9-2.1-4.9L554.3,247.6z" />
<g>
<path fill="#EABE96" d="M556.9,245.6c-0.2-2.7-3.8-4.6-3.8-4.6l-9.4,7.3c-1.2-2.5-3.5-5.1-4.6-3.9c-1.1,1.1-1.9,2.6,1.4,6.3
c0.7,0.8,1.3,1.4,1.8,1.8c-0.7,2.5-0.9,5.8,3,6.2c0,0,0.1,0,0.2-0.1c0.5-0.4,1.9-1.7,1.4-4C550,252.9,557,247.7,556.9,245.6z" />
<path fill="#FFDCB8" d="M533.6,250.6c-3.1,3.4-3.4,9.1,4.1,3.5C545.3,248.5,540.7,242.9,533.6,250.6" />
<path fill="#FFDCB8" d="M536.4,254.4c-1.8,2-3.3,4.1-1.8,5.7c1.2,1.2,2.6,0.5,6.1-2.1c3.7-2.7,4.8-5,3.8-6.8
C543.6,249.8,540.4,250.1,536.4,254.4" />
<path fill="#FFDCB8" d="M540,257.9c-2.5,2.8-2.8,7.4,3.4,2.8c3-2.3,3.7-4.7,2.9-5.7C544.9,253.2,542.9,254.7,540,257.9" />
</g>
<path fill="#E6E7E8" d="M549.5,243.5c0,0,9.1,2.4,9.6,5.7c0.6,3.4,8.4-5.9,8.4-5.9l-10.1-6.6L549.5,243.5z" />
</g>
<g id="rightLeg">
<path fill="#281C00" d="M704.6,296.6c0,0,8.6,8.4,11.7,13.4c3.1,4.9,11.1,6.7,13.5,2.8c2.3-3.9-10.7-27.3-12.5-29.9
s-10,3.1-10,3.1S704.4,293.6,704.6,296.6" />
<path fill="#383D3F" d="M589.7,266.4c0,0,66.6,38,115.1,33.3c0,0,10.7-7.1,2.5-18.9c0,0-19.4-0.1-49.3-5.9
c-29.8-5.8-55.8-14.3-60.1-15.8L589.7,266.4z" />
</g>
<g id="leftLeg">
<path fill="#382B19" d="M709.3,281.8c0,0,8.5,2.5,15.2,5.4c6.7,2.8,15.7,8.7,19.8,4.6c4.1-4.1,2.4-7.4,2.4-7.4s-20-17.4-23.5-18.3
c-3.5-1-11.1,3.2-11.1,3.2L709.3,281.8z" />
<path fill="#464B4C" d="M587.7,269.3c0,0,24.5-8.3,33-9.2c8.5-0.9,77.9,28.8,91.4,25.5c0,0,7.6-7.7,5.1-22.6
c0,0-53.4-1.3-105.1-21.2c0,0-26,19.1-26.2,31.6L587.7,269.3z" />
</g>
<path fill="#FFFFFF" d="M546.4,192c0,0,60,43.1,62.6,42.2c5.9-2,8.4,4.1,7,4.7c0,0-25.3,37-29.8,35.4
c-20.4-7.2-36.3-55.8-58.5-59.4c0,0-0.3-6.7,2.2-9.9c2.4-3.1,3.8-10,3.8-10S536,190.3,546.4,192z" />
<path fill="#D1D3D4" d="M576,252.3c0.5,0.3,0.7,0.9,0.4,1.2c-0.2,0.3-0.8,0.4-1.3,0c-0.5-0.3-0.7-0.9-0.4-1.2
S575.5,251.9,576,252.3" />
<path fill="#D1D3D4" d="M586.8,263.5c0.5,0.3,0.7,0.9,0.4,1.2c-0.2,0.3-0.8,0.4-1.3,0c-0.5-0.3-0.7-0.9-0.4-1.2
C585.8,263.1,586.4,263.1,586.8,263.5" />
<path fill="#FFFFFF" d="M526.4,202c0,0,1,2.7,3.2,4.5c0,0,0.8,5.9,0.1,7.4c0,0-5.3-4.4-6.6-6.1L526.4,202z" />
<polygon fill="#D1D3D4" points="529.2,213.3 529.7,209.2 524.2,207.9 " />
<polygon fill="#E6E7E8" points="523.2,207.3 532.1,190.2 536.6,192.1 531.5,209 " />
<path fill="#FFDCB8" d="M521.5,185.1c0,0,12.7,9.5,13.1,11.1c3.1,14-2.7,12.3-2.7,12.3s-11.5-9-15.4-11
C518.2,191.8,521.5,185.1,521.5,185.1" />
<polygon fill="#A7A9AC" points="530.5,203 533.6,205.8 534.5,203.8 " />
<path fill="#BE1E2D" d="M533.1,202.6c0,0-3.3,6.7-3.1,7c0.2,0.3,8.8,4.5,8.8,4.5s3.4-2.1,3-2.7c-0.4-0.6-6-7.5-6-7.5" />
<path fill="#F1F2F2" d="M532.2,190.2c0,0-2,10.9-2,12.6c0,0,9.6,2.1,11.2,2.2c0,0-2.4-11.7-3.7-13.8L532.2,190.2z" />
<path fill="#D1D3D4" d="M566.9,240.6c0.5,0.3,0.7,0.9,0.4,1.2c-0.2,0.3-0.8,0.4-1.3,0c-0.5-0.3-0.7-0.9-0.4-1.2
S566.5,240.2,566.9,240.6" />
<path fill="#D1D3D4" d="M556.6,228.6c0.5,0.3,0.7,0.9,0.4,1.2c-0.2,0.3-0.8,0.4-1.3,0c-0.5-0.3-0.7-0.9-0.4-1.2
C555.6,228.3,556.2,228.3,556.6,228.6" />
<path fill="#D1D3D4" d="M546.8,217.4c0.5,0.3,0.7,0.9,0.4,1.2c-0.2,0.3-0.8,0.4-1.3,0c-0.5-0.3-0.7-0.9-0.4-1.2
C545.8,217.1,546.3,217.1,546.8,217.4" />
<g id="tie">
<path id="path_1_" fill="#BE1E2D" d="M538.8,213.6c0,0,8.5,9.2,7.3,27.5c-0.7,10.6,7.4,33,22.6,36.6c0,0,11.6-3,12.8-5
c0,0-3.3-9.3-4.7-11.6c0,0-21.2-2.9-23-21.8c-2.1-22.2-12.5-27.7-12.5-27.7L538.8,213.6z" />
<path id="path" fill="#BE1E2D" d="M541.9,211.6c0,0,3.4,23,19.5,31.7c9.4,5,20.1,10.6,15.2,25.5c0,0-4.7,10.3-7,10.3
c0,0-6.1-7.7-7.4-10.1c0,0,3.7-12.6-11.4-24.1c-17.7-13.5-
