<!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>TweenMax.js+jQuey-ui+GSAP 布加迪威龙跑车自动化制造动画</title>
<style>
body {
background: #11112d;
background: url(images/hexabump.png);
overflow: hidden;
}
#animation_holder {
width: 100%;
float: left;
position: relative;
}
#bugatti_veyron {
position: relative;
float: left;
width: 100%;
}
#bugatti_v {
display: block;
width: 100%;
position: relative;
max-width: 980px;
/* veyron Heading */
margin: 0 auto;
}
#veyron_rear_break,
#veyron_front_break {
position: absolute;
bottom: 35px;
}
#stage_2 {
position: absolute;
left: 45px;
width: 816px;
top: 52px;
}
img#bugatti_v_tire {
top: -133px;
left: 101px;
}
img#bugatti_v_tire_2 {
left: 476px;
top: -133px;
}
#veyron_bumper,
#veyron_frame,
#veyron_siding,
#veyron_fender,
#veyron_tire,
#veyron_tire_2,
#veyron_window,
#bugatti_v_tire,
#bugatti_v_tire_2 {
/* veyron Animations */
position: relative;
}
#carhold_1 {
border: 1px solid transparent;
height: 352px;
margin: 50px auto 0;
position: relative;
width: 980px;
float: left;
}
#veyron_heading,
#veyron_heading_3 {
position: relative;
font-weight: normal;
}
#divider {
width: 500px;
height: 500px;
display: block;
margin: auto;
}
#veyron_ruler_holer_box {
width: 900px;
height: 340px;
margin: 0px auto 0 auto;
z-index: 1;
position: absolute;
top: 0;
left: 0;
}
#ruler_1_wrap {
height: 370px;
position: relative;
width: 1000px;
z-index: 9999;
}
#veyron_scroll_1,
#veyron_scroll_1 img {
position: absolute;
bottom: -125px;
}
#ruler_horizontal_1,
#ruler_horizontal_2 {
position: relative;
}
#veyron_hold_box {
width: 978px;
height: 229px;
position: absolute;
top: 60px;
left: -50px;
}
#veyron_hold_box img {
opacity: 0;
}
#numbers_1 {
position: absolute;
width: 1000px;
bottom: 12px;
left: 4px;
padding: 0;
margin: 0;
z-index: 77777777;
}
#numbers_1 li {
float: left;
list-style: none outside none;
width: 67px;
text-align: center;
position: relative;
margin: 0 8px 0 0;
font-family: sans-serif;
}
.ruler_box_1 {
position: relative;
float: left;
width: 65px;
height: 347px;
margin: 4px;
border-left: 1px dashed #488fcd;
border-right: 1px dashed #488fcd;
}
.ruler_mark {
border-left: 2px dotted #ccc;
border-right: 2px dotted #ccc;
height: 22px;
margin: 11px auto;
width: 33px;
}
.ruler_mark_2 {
border-left: 2px dotted rgba(204, 204, 204, 0.32);
height: 50px;
margin: 8px auto 0px auto;
width: 1px;
}
</style>
</head>
<body>
<link rel='stylesheet' href='css/jquery-ui.min.css'>
<section id="animation_holder">
<section id="bugatti_v">
<section id="carhold_1">
<section id="veyron_ruler_holer_box">
<div id="ruler_1_wrap"> </div>
<section id="ruler_horizontal_2"> </section>
</section>
<section id="veyron_hold_box">
<img id="veyron_bumper" src="images/veyron_bumper.png">
<img id="veyron_frame" src="images/veyron_frame.png">
<img id="veyron_siding" src="images/veyron_siding.png">
<img id="veyron_fender" src="images/veyron_s_fender.png">
<img id="veyron_tire" src="images/veyron_tire.png">
<img id="veyron_tire_2" src="images/veyron_tire.png">
<img id="veyron_window" src="images/veyron_windows.png">
<img id="veyron_front_break" src="images/veyron_brake.png" />
<img id="veyron_rear_break" src="images/veyron_brake.png" />
</section>
<section id="stage_2">
<img id="bugatti_veyron" src="images/bugatti_v.png">
<img id="bugatti_v_tire" src="images/bugatti_v_tire.png">
<img id="bugatti_v_tire_2" src="images/bugatti_v_tire.png">
</section>
<!-- stage 2 -->
</section>
<!-- veyron hold box -->
</section>
<!-- bugatti veyron -->
</section>
<!-- animation_holder -->
<script src="js/jquery-1.11.1.min.js"></script>
<script src='js/jquery-ui.min.js'></script>
<script src='js/stopExecutionOnTimeout.js?t=1'></script>
<script src='js/TweenMax.min.js'></script>
<script>
$(document).ready(function() {
var miniBoxesHolder = $('#ruler_1_wrap');
var boxesTl = new TimelineMax({
repeat: 1,
repeatDelay: 0,
yoyo: true
});
for (n = 0; n < 12; n++) {
miniBoxesHolder.append('<div class="ruler_box_1"> </div>');
}
var rulers = $('.ruler_box_1');
anim: (new TimelineLite())
.appendMultiple([
TweenMax.staggerFromTo(rulers, .3, {
css: {
height: 0,
top: 0,
backgroundColor: '#000',
borderColor: 'red',
rotation: 720,
autoAlpha: 0
}
}, {
css: {
height: 330,
backgroundColor: 'transparent',
transformOrigin: "bottom",
borderColor: '#777',
rotation: 0,
autoAlpha: .3
},
ease: Back.easeOut,
immediateRender: true
}, .1),
])
.appendMultiple([
TweenMax.fromTo($('#veyron_rear_break'), 1.2, {
css: {
opacity: 0,
right: -1000,
},
immediateRender: true
}, {
css: {
right: 166,
opacity: 1
},
ease: SlowMo.ease
}),
TweenMax.fromTo($('#veyron_front_break'), 2.1, {
css: {
opacity: 0,
right: -1900
},
immediateRender: true
}, {
css: {
right: 678,
opacity: 1,
delay: 1
},
ease: SlowMo.ease
}),
TweenMax.fromTo($('#veyron_bumper'), 1, {
css: {
opacity: 0,
right: -1100,
top: -9
},
immediateRender: true
}, {
css: {
right: -97,
top: -9,
opacity: .7
},
ease: SlowMo.ease
}),
TweenMax.fromTo($('#veyron_frame'), 2.5, {
css: {
opacity: 0,
right: -1100,
top: -5
},
immediateRender: true
}, {
css: {
right: -76,
top: -5,
opacity: .7
},
ease: SlowMo.ease,
delay: 1
}),
TweenMax.fromTo($('#veyron_siding'), 1.2, {
css: {
opacity: 0,
right: -1200,
top: -135
},
immediateRender: true
}, {
css: {
right: -335,
top: -135,
opacity: .7
},
ease: SlowMo.ease
}),
TweenMax.fromTo($('#veyron_fender'), 1.9, {
css: {
opacity: 0,
r
TweenMax.js+jQuey+GSAP实现的布加迪威龙跑车自动化制造动画效果源码.zip
版权申诉
173 浏览量
2022-11-01
00:09:07
上传
评论
收藏 231KB ZIP 举报
TweenMax.js+jQuey+GSAP实现的布加迪威龙跑车自动化制造动画效果源码.zip （16个子文件） 
132689959998616503 css 
jquery-ui.min.css 29KB images 
veyron_s_fender.png 4KB bugatti_v_tire.png 22KB veyron_tire.png 5KB veyron_siding.png 324B veyron_windows.png 6KB veyron_brake.png 2KB veyron_frame.png 8KB veyron_bumper.png 3KB bugatti_v.png 37KB hexabump.png 218B
index.html 13KB js jquery-1.11.1.min.js 94KB jquery-ui.min.js 233KB TweenMax.min.js 105KB stopExecutionOnTimeout.js 2KB资源评论
