mirror of
https://github.com/LeuisKen/leuisken.github.io.git
synced 2026-02-01 15:23:50 +00:00
1120 lines
32 KiB
HTML
1120 lines
32 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8" />
|
|
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width">
|
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
|
<meta name="description" content="比亚迪元，给你想要的青春。">
|
|
<title>这不是我要的青春</title>
|
|
<link rel="stylesheet" type="text/css" href="./style/normalize.css">
|
|
<link rel="stylesheet" type="text/css" href="./style/style.css">
|
|
<script type="text/javascript" src="./scripts/css3d.js"></script>
|
|
</head>
|
|
<body scroll="no">
|
|
<audio id="ibgm" preload="auto" src="./main.mp3"></audio>
|
|
<div id="wrapper">
|
|
<div class="layer" id="layer"></div>
|
|
<div class="back" id="back"></div>
|
|
<div id="main">
|
|
<div id="world"></div>
|
|
<div id="start"></div>
|
|
<div id="page2"></div>
|
|
<div id="page3"></div>
|
|
<div id="page4"></div>
|
|
<div id="page5"></div>
|
|
<div id="page6"></div>
|
|
<div id="page7"></div>
|
|
<div id="page8"></div>
|
|
<div id="page9"></div>
|
|
<div id="page10"></div>
|
|
<div id="page11">
|
|
<div class="main">
|
|
<div class="last" id="last">
|
|
<video></video>
|
|
<div class="text1"></div>
|
|
<div class="text2"></div>
|
|
<div class="btn"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="page12">
|
|
<div class="form" id="form">
|
|
<form>
|
|
<div class="name"><input type="text"></div>
|
|
<div class="phone"><input type="text"></div>
|
|
<div class="add">
|
|
<select>
|
|
<option>龙岗区</option>
|
|
<option>宝安区</option>
|
|
<option>龙华新区</option>
|
|
<option>福田区</option>
|
|
<option>南山区</option>
|
|
</select>
|
|
</div>
|
|
<input class="submit" type="submit" value="提交">
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</body>
|
|
<script type="text/javascript">
|
|
|
|
document.getElementsByTagName('body')[0].style.width = window.innerWidth + 'px'
|
|
document.getElementsByTagName('body')[0].style.height = window.innerHeight + 'px'
|
|
|
|
document.getElementById('wrapper').style.width = window.innerWidth + 'px'
|
|
document.getElementById('wrapper').style.height = window.innerHeight + 'px'
|
|
|
|
document.getElementById('page11').style.width = window.innerWidth + 'px'
|
|
document.getElementById('page11').style.height = window.innerHeight + 'px'
|
|
|
|
document.getElementById('page12').style.width = window.innerWidth + 'px'
|
|
document.getElementById('page12').style.height = window.innerHeight + 'px'
|
|
|
|
document.getElementsByClassName('btn')[0].addEventListener( 'touchstart',function() {
|
|
document.getElementById('main').style.top = -window.innerHeight*12 + 'px'
|
|
})
|
|
|
|
var bgImg = document.createElement('img')
|
|
bgImg.src = './images/back.png'
|
|
bgImg.onload = function() {
|
|
document.getElementsByClassName('back')[0].style.display = 'block'
|
|
}
|
|
|
|
var imgs = [
|
|
'./images/11_back.jpg',
|
|
'./images/11_btn.png',
|
|
'./images/11_text1.png',
|
|
'./images/11_text2.png',
|
|
'./images/12_back.png',
|
|
'./images/12_border.png',
|
|
'./images/12_in1.png',
|
|
'./images/12_in2.png',
|
|
'./images/12_in3.png',
|
|
'./images/12_sub.png',
|
|
'./images/index_bg.jpg',
|
|
'./images/index_car.png',
|
|
'./images/index_char_lar.png',
|
|
'./images/index_char_sm.png',
|
|
'./images/page_rect.png',
|
|
'./images/page1_bg.jpg',
|
|
'./images/page1_car.png',
|
|
'./images/page1_char_lar.png',
|
|
'./images/page1_char_sm.png',
|
|
'./images/page2_bg.jpg',
|
|
'./images/page2_car.png',
|
|
'./images/page2_char_lar.png',
|
|
'./images/page2_rect.png',
|
|
'./images/page3_char_lar.png',
|
|
'./images/page3_person.png',
|
|
'./images/page4_char.png',
|
|
'./images/page4_line_left.png',
|
|
'./images/page4_line_right.png',
|
|
'./images/page5_band.png',
|
|
'./images/page5_bg.jpg',
|
|
'./images/page5_car.png',
|
|
'./images/page5_char.png',
|
|
'./images/page6_bg.png',
|
|
'./images/page6_car.png',
|
|
'./images/page6_char.png',
|
|
'./images/page7_char.png',
|
|
'./images/page7_s1.png',
|
|
'./images/page7_s2.png',
|
|
'./images/page7_s3.png',
|
|
'./images/page7_s4.png',
|
|
'./images/page8_char.png',
|
|
'./images/page8_line_down.png',
|
|
'./images/page8_line_up.png',
|
|
'./images/page9_4G.png',
|
|
'./images/page9_char.png',
|
|
'./images/page9_signal_left1.png',
|
|
'./images/page9_signal_left2.png',
|
|
'./images/page9_signal_left3.png',
|
|
'./images/page9_signal_right1.png',
|
|
'./images/page9_signal_right2.png',
|
|
'./images/page9_signal_right3.png',
|
|
'./images/page9_tel.png',
|
|
'./images/page10_s1.jpg',
|
|
'./images/page10_s2.jpg',
|
|
'./images/page10_s3.jpg',
|
|
'./images/page10_s4.jpg'
|
|
];
|
|
|
|
loadImg(imgs,render)
|
|
|
|
function loadImg (imgs,callback) {
|
|
var imgsLen = imgs.length;
|
|
var back = document.getElementById('back');
|
|
var loaded = 0;
|
|
var layer = document.getElementById('layer');
|
|
for (var i = 0; i < imgsLen; i++) {
|
|
var imgDOM = document.createElement('img');
|
|
imgDOM.src = imgs[i];
|
|
imgDOM.onload = function () {
|
|
loaded++
|
|
back.style.width = (loaded / imgsLen * 36 + 32) + '%' //32 - 67 35
|
|
if (loaded == imgsLen) {
|
|
setTimeout(function () {
|
|
layer.style.display = "none";
|
|
back.style.display = "none";
|
|
callback()
|
|
},500)
|
|
};
|
|
}
|
|
};
|
|
}
|
|
|
|
function render() {
|
|
var stage = new C3D.Stage()
|
|
stage.size(window.innerWidth, window.innerHeight).material({
|
|
color: '#000000',
|
|
image: './images/index_bg.jpg'
|
|
}).update()
|
|
|
|
document.getElementById('world').appendChild(stage.el)
|
|
|
|
var indexSprite = new C3D.Sprite()
|
|
indexSprite.position(0, 0, -600).update()
|
|
stage.addChild(indexSprite)
|
|
|
|
var car = new C3D.Plane()
|
|
car.size(430, 342).scale(0, 0, 0).position(0, 0, 0).material({
|
|
image: './images/index_car.png'
|
|
}).update()
|
|
|
|
indexSprite.addChild(car)
|
|
|
|
var charSprite = new C3D.Sprite()
|
|
charSprite.position(0, 250, 0).update()
|
|
indexSprite.addChild(charSprite)
|
|
|
|
var largeChar = new C3D.Plane()
|
|
largeChar.size(204, 100).position(0, 300, 300).material({
|
|
image: './images/index_char_lar.png'
|
|
}).update()
|
|
|
|
charSprite.addChild(largeChar)
|
|
|
|
var smallChar = new C3D.Plane()
|
|
smallChar.size(305, 37).position(0, 300, 300).rotation(0, 0, 180).material({
|
|
image: './images/index_char_sm.png'
|
|
}).update()
|
|
|
|
charSprite.addChild(smallChar)
|
|
|
|
// 刷新场景
|
|
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame || window.oRequestAnimationFrame ||
|
|
function(callback) {
|
|
setTimeout(callback, 1000 / 60);
|
|
};
|
|
|
|
function changeStage() {
|
|
document.getElementById('ibgm').play()
|
|
document.getElementById('main').style.top = -window.innerHeight + 'px'
|
|
indexSprite.remove()
|
|
requestAnimationFrame(s1);
|
|
document.removeEventListener('touchstart', changeStage)
|
|
}
|
|
|
|
function go() {
|
|
if (car.scaleX < 0.7) {
|
|
car.scale(car.scaleX + 0.02, car.scaleY + 0.02, car.scaleZ + 0.02).updateT()
|
|
} else if (largeChar.z > 0) {
|
|
largeChar.move(0, -10, -10).updateT()
|
|
}
|
|
if (largeChar.z < 150) {
|
|
smallChar.move(0, -10, -10).rotation(0, 0, smallChar.rotationZ - 6).updateT()
|
|
};
|
|
if (largeChar.z <= 0 && smallChar.rotationZ === 0) {
|
|
document.addEventListener('touchstart', changeStage)
|
|
document.getElementById('start').appendChild(mainStage.el)
|
|
return
|
|
}
|
|
requestAnimationFrame(go);
|
|
}
|
|
|
|
requestAnimationFrame(go);
|
|
|
|
var mainStage = new C3D.Stage()
|
|
mainStage.size(window.innerWidth, window.innerHeight).material({
|
|
color: '#cccccc',
|
|
image: './images/page1_bg.jpg',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page1 = new C3D.Plane()
|
|
page1.origin(0, 0, 0).position(0, 0, -800).update()
|
|
mainStage.addChild(page1)
|
|
|
|
var page1Car = new C3D.Plane()
|
|
page1Car.size(569, 319, 20).position(-3000, -1000, -8200).material({
|
|
image: './images/page1_car.png'
|
|
}).update()
|
|
page1.addChild(page1Car)
|
|
|
|
var page1Sprite = C3D.create({
|
|
type: 'sprite',
|
|
position: [-700, -970, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
size: [1000, 900],
|
|
position: [0, 0, 0],
|
|
material: [{image: './images/page_rect.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
size: [417, 57],
|
|
position: [0, 0, 0],
|
|
material: [{image: './images/page1_char_sm.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
size: [210, 94],
|
|
position: [200, 110, 0],
|
|
material: [{image: './images/page1_char_lar.png'}]
|
|
}
|
|
]
|
|
}).update()
|
|
page1.addChild(page1Sprite)
|
|
|
|
var page2Sprite = C3D.create({
|
|
type: 'sprite',
|
|
position: [0, 0, (window.innerHeight + 24)/(-1.6)],
|
|
rotation: [0, 270, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
position: [0, 0, 0],
|
|
size: [window.innerWidth, window.innerHeight],
|
|
material: [{image: './images/page2_bg.jpg', repeat: 'no-repeat', size: '100%'}]
|
|
}
|
|
]
|
|
})
|
|
page2Sprite.visible = false
|
|
page2Sprite.updateV()
|
|
|
|
mainStage.addChild(page2Sprite)
|
|
|
|
function s1() {
|
|
if (page1Car.z < 0) {
|
|
page1Car.move(36, 16, 100).updateT()
|
|
} else if (page1Sprite.x < 0) {
|
|
page1Sprite.move(20, 20, 0).updateT()
|
|
} else if(page1.rotationY !== 90) {
|
|
if (page1.rotationY === 0) {
|
|
setTimeout(function() {
|
|
page1.rotationY += 3
|
|
requestAnimationFrame(s1);
|
|
}, 2000)
|
|
return
|
|
}
|
|
page1.rotate(0, 3, 0).updateT()
|
|
} else {
|
|
if (!page2Sprite.visible) {
|
|
page2Sprite.visible = true
|
|
page2Sprite.updateV()
|
|
}
|
|
page2Sprite.rotate(0, 3, 0).updateT()
|
|
if (page2Sprite.rotationY === 360) {
|
|
document.getElementById('main').style.top = -window.innerHeight*2 + 'px'
|
|
page1.remove()
|
|
page2Sprite.remove()
|
|
document.getElementById('page2').appendChild(page2Stage.el)
|
|
requestAnimationFrame(s2);
|
|
return
|
|
}
|
|
}
|
|
requestAnimationFrame(s1);
|
|
}
|
|
|
|
var page2Stage = new C3D.Stage()
|
|
page2Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
image: './images/page2_bg.jpg',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page2 = new C3D.Plane()
|
|
page2.origin(0, 0, 0).position(0, 0, -800).update()
|
|
page2Stage.addChild(page2)
|
|
|
|
var page2Car = new C3D.Plane()
|
|
page2Car.size(569, 319, 20).position(3000, -1000, -8200).material({
|
|
image: './images/page2_car.png'
|
|
}).update()
|
|
page2.addChild(page2Car)
|
|
|
|
var page2SpriteExtra = C3D.create({
|
|
type: 'sprite',
|
|
position: [800, -1050, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
size: [1000, 900],
|
|
position: [0, 0, 0],
|
|
material: [{image: './images/page2_rect.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
size: [356, 147],
|
|
position: [0, 0, 0],
|
|
material: [{image: './images/page2_char_lar.png'}]
|
|
}
|
|
]
|
|
}).update()
|
|
page2.addChild(page2SpriteExtra)
|
|
|
|
var page3Sprite = C3D.create({
|
|
type: 'sprite',
|
|
position: [0, 0, (window.innerHeight + 24)/(-1.6)],
|
|
rotation: [270, 0, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
position: [0, 0, 0],
|
|
size: [window.innerWidth, window.innerHeight],
|
|
material: [{color: '#000', image: './images/page5_bg.jpg', repeat: 'no-repeat', size: '100%'}]
|
|
}
|
|
]
|
|
})
|
|
|
|
page3Sprite.visible = false
|
|
page3Sprite.updateV()
|
|
|
|
page2Stage.addChild(page3Sprite)
|
|
|
|
function s2() {
|
|
if (page2Car.z < 0) {
|
|
page2Car.move(-72, 30.952380, 200).updateT()
|
|
} else if (page2SpriteExtra.x > 0) {
|
|
page2SpriteExtra.move(-20, 20, 0).updateT()
|
|
} else if (page2.rotationX !== 90) {
|
|
if (page2.rotationX === 0) {
|
|
setTimeout(function() {
|
|
page2.rotationX += 3
|
|
requestAnimationFrame(s2);
|
|
}, 2000)
|
|
return
|
|
}
|
|
page2.rotate(3, 0, 0).updateT()
|
|
} else {
|
|
if (!page3Sprite.visible) {
|
|
page3Sprite.visible = true
|
|
page3Sprite.updateV()
|
|
}
|
|
page3Sprite.rotate(3, 0, 0).updateT()
|
|
if (page3Sprite.rotationX === 360) {
|
|
document.getElementById('main').style.top = -window.innerHeight*3 + 'px'
|
|
document.getElementById('page3').appendChild(page3Stage.el)
|
|
page2.remove()
|
|
page3Sprite.remove()
|
|
requestAnimationFrame(s3);
|
|
return
|
|
}
|
|
}
|
|
requestAnimationFrame(s2);
|
|
}
|
|
|
|
var page3Stage = new C3D.Stage()
|
|
page3Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
color: '#000',
|
|
image: './images/page5_bg.jpg',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page3 = new C3D.Plane()
|
|
page3.origin(0, 0, 0).position(0, 0, -800).update()
|
|
page3Stage.addChild(page3)
|
|
|
|
var page3SpriteExtra = C3D.create({
|
|
type: 'sprite',
|
|
position: [1000, 0, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
size: [800, 416],
|
|
scale: [2, 2, 1],
|
|
position: [0, 0, 0],
|
|
material: [{image: './images/page3_person.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'text',
|
|
size: [478, 202],
|
|
position: [0, 200, 0],
|
|
material: [{image: './images/page3_char_lar.png'}]
|
|
}
|
|
]
|
|
}).update()
|
|
page3SpriteExtra.text.alpha = 0
|
|
page3SpriteExtra.text.update()
|
|
page3.addChild(page3SpriteExtra)
|
|
|
|
var page3Car = new C3D.Plane()
|
|
page3Car.size(569, 319, 20).position(-3000, -1000, -8200).material({
|
|
image: './images/page1_car.png'
|
|
}).update()
|
|
page3.addChild(page3Car)
|
|
|
|
function s3() {
|
|
if (page3Car.z < 0) {
|
|
page3Car.move(72, 21.42857, 200).updateT()
|
|
} else if (page3SpriteExtra.x > 0) {
|
|
page3SpriteExtra.move(-20, 0, 0).updateT()
|
|
} else if (page3SpriteExtra.text.alpha < 1) {
|
|
page3SpriteExtra.text.alpha += 0.02
|
|
page3SpriteExtra.text.updateV()
|
|
} else if (page3.rotationX !== 90) {
|
|
if (page3.rotationX === 0) {
|
|
setTimeout(function() {
|
|
page3.rotationX += 3
|
|
requestAnimationFrame(s3);
|
|
}, 2000)
|
|
return
|
|
}
|
|
page3.rotate(3, 0, 0).updateT()
|
|
} else {
|
|
document.getElementById('main').style.top = -window.innerHeight*4 + 'px'
|
|
document.getElementById('page4').appendChild(page4Stage.el)
|
|
page3.remove()
|
|
requestAnimationFrame(s4);
|
|
return
|
|
}
|
|
requestAnimationFrame(s3);
|
|
}
|
|
|
|
var page4Stage = new C3D.Stage()
|
|
page4Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
color: '#000',
|
|
image: './images/page5_bg.jpg',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page4 = new C3D.Plane()
|
|
page4.origin(0, 0, 0).position(0, 0, -800).update()
|
|
page4Stage.addChild(page4)
|
|
|
|
var page4Container = C3D.create({
|
|
type: 'sprite',
|
|
position: [0, 0, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
name: 'text',
|
|
position: [0, 0, 0],
|
|
size: [203, 540],
|
|
material: [{image: './images/page4_char.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'left_line',
|
|
scale: [2, 2, 1],
|
|
position: [0, 0, 0],
|
|
size: [163, 1348],
|
|
material: [{image: './images/page4_line_left.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'right_line',
|
|
scale: [2, 2, 1],
|
|
position: [0, 0, 0],
|
|
size: [283, 1285],
|
|
material: [{image: './images/page4_line_right.png'}]
|
|
}
|
|
]
|
|
})
|
|
|
|
page4Container.text.alpha = 0
|
|
page4Container.text.update()
|
|
page4.addChild(page4Container)
|
|
|
|
function s4() {
|
|
if (page4Container.left_line.x > -500) {
|
|
page4Container.left_line.move(-10, -20, 0).updateT()
|
|
page4Container.right_line.move(10, 20, 0).updateT()
|
|
page4Container.text.alpha += 0.02
|
|
page4Container.text.updateV()
|
|
} else if (page4.rotationX !== 90) {
|
|
if (page4.rotationX === 0) {
|
|
setTimeout(function() {
|
|
page4.rotationX += 3
|
|
requestAnimationFrame(s4);
|
|
}, 2000)
|
|
return
|
|
}
|
|
page4.rotate(3, 0, 0).updateT()
|
|
} else {
|
|
document.getElementById('main').style.top = -window.innerHeight*5 + 'px'
|
|
document.getElementById('page5').appendChild(page5Stage.el)
|
|
page4.remove()
|
|
requestAnimationFrame(s5);
|
|
return
|
|
}
|
|
requestAnimationFrame(s4);
|
|
}
|
|
|
|
var page5Stage = new C3D.Stage()
|
|
page5Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
color: '#000',
|
|
image: './images/page5_bg.jpg',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page5 = new C3D.Plane()
|
|
page5.origin(0, 0, 0).position(0, 0, -800).update()
|
|
page5Stage.addChild(page5)
|
|
|
|
var page5Container = C3D.create({
|
|
type: 'sprite',
|
|
position: [0, 0, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
name: 'band',
|
|
position: [0, 1000, 0],
|
|
size: [809, 339],
|
|
material: [{image: './images/page5_band.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'car',
|
|
position: [0, 370, 0],
|
|
scale: [0, 0, 0],
|
|
size: [601, 124],
|
|
material: [{image: './images/page5_car.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'char',
|
|
position: [0, 0, 0],
|
|
size: [430, 209],
|
|
material: [{image: './images/page5_char.png'}]
|
|
}
|
|
]
|
|
})
|
|
|
|
page5Container.char.alpha = 0
|
|
page5Container.char.update()
|
|
page5.addChild(page5Container)
|
|
|
|
function s5() {
|
|
if (page5Container.car.scaleX < 1) {
|
|
page5Container.car.scale(page5Container.car.scaleX + 0.02, page5Container.car.scaleY + 0.02, page5Container.car.scaleX + 0.02).updateT()
|
|
} else if (page5Container.band.y > 510) {
|
|
page5Container.band.move(0, -10, 0).updateT()
|
|
} else if (page5Container.char.alpha < 1) {
|
|
page5Container.char.alpha += 0.02
|
|
page5Container.char.updateV()
|
|
} else if (page5.rotationX !== 90) {
|
|
if (page5.rotationX === 0) {
|
|
setTimeout(function() {
|
|
page5.rotationX += 3
|
|
requestAnimationFrame(s5);
|
|
}, 2000)
|
|
return
|
|
}
|
|
page5.rotate(3, 0, 0).updateT()
|
|
} else {
|
|
document.getElementById('main').style.top = -window.innerHeight*6 + 'px'
|
|
document.getElementById('page6').appendChild(page6Stage.el)
|
|
page5.remove()
|
|
requestAnimationFrame(s6);
|
|
return
|
|
}
|
|
requestAnimationFrame(s5);
|
|
}
|
|
|
|
var page6Stage = new C3D.Stage()
|
|
page6Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
color: '#000000',
|
|
image: './images/page6_bg.png',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page6 = new C3D.Plane()
|
|
page6.origin(0, 0, 0).position(0, 0, -700).update()
|
|
page6Stage.addChild(page6)
|
|
|
|
var page6Container = C3D.create({
|
|
type: 'sprite',
|
|
position: [0, 0, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
name: 'car',
|
|
position: [0, 370, 0],
|
|
size: [644, 337],
|
|
material: [{image: './images/page6_car.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'char',
|
|
position: [0, 0, 0],
|
|
size: [430, 201],
|
|
material: [{image: './images/page6_char.png'}]
|
|
}
|
|
]
|
|
})
|
|
|
|
page6Container.char.alpha = 0
|
|
page6Container.char.update()
|
|
page6.addChild(page6Container)
|
|
|
|
function s6() {
|
|
if (page6Container.car.y < 720) {
|
|
page6Container.car.move(0, 5, 0).updateT()
|
|
} else if (page6Container.char.alpha < 1) {
|
|
page6Container.char.alpha += 0.02
|
|
page6Container.char.updateV()
|
|
} else if (page6.rotationX !== 90) {
|
|
if (page6.rotationX === 0) {
|
|
setTimeout(function() {
|
|
page6.rotationX += 3
|
|
requestAnimationFrame(s6);
|
|
}, 1500)
|
|
return
|
|
}
|
|
page6.rotate(3, 0, 0).updateT()
|
|
} else {
|
|
document.getElementById('main').style.top = -window.innerHeight*7 + 'px'
|
|
document.getElementById('page7').appendChild(page7Stage.el)
|
|
page6.remove()
|
|
requestAnimationFrame(s7);
|
|
return
|
|
}
|
|
requestAnimationFrame(s6);
|
|
}
|
|
|
|
var page7Stage = new C3D.Stage()
|
|
page7Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
color: '#000000',
|
|
image: './images/page5_bg.jpg',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page7 = new C3D.Plane()
|
|
page7.origin(0, 0, 0).position(0, 0, -700).update()
|
|
page7Stage.addChild(page7)
|
|
|
|
var page7Container = C3D.create({
|
|
type: 'sprite',
|
|
position: [0, 0, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
name: 's1',
|
|
position: [0, 250, 0],
|
|
size: [640, 496],
|
|
material: [{image: './images/page7_s1.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 's2',
|
|
position: [0, 250, 0],
|
|
size: [640, 496],
|
|
material: [{image: './images/page7_s2.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 's3',
|
|
position: [0, 250, 0],
|
|
size: [640, 496],
|
|
material: [{image: './images/page7_s3.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 's4',
|
|
position: [0, 250, 0],
|
|
size: [640, 496],
|
|
material: [{image: './images/page7_s4.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'car',
|
|
position: [-3000, -1000, -8200],
|
|
size: [569, 319],
|
|
material: [{image: './images/page1_car.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'char',
|
|
position: [0, 0, 0],
|
|
size: [539, 274],
|
|
material: [{image: './images/page7_char.png'}]
|
|
}
|
|
]
|
|
})
|
|
page7Container.s1.alpha = 0
|
|
page7Container.s2.alpha = 0
|
|
page7Container.s3.alpha = 0
|
|
page7Container.s4.alpha = 0
|
|
page7Container.char.alpha = 0
|
|
page7Container.s1.update()
|
|
page7Container.s2.update()
|
|
page7Container.s3.update()
|
|
page7Container.s4.update()
|
|
page7Container.char.update()
|
|
|
|
page7.addChild(page7Container)
|
|
|
|
function s7() {
|
|
if (page7Container.car.z < 0) {
|
|
page7Container.car.move(36, 15.952380, 100).updateT()
|
|
if (page7Container.s1 !== undefined && page7Container.s1.alpha < 1) {
|
|
page7Container.s1.alpha += 0.05
|
|
page7Container.s1.updateV()
|
|
} else if (page7Container.s2 !== undefined && page7Container.s2.alpha < 1) {
|
|
!!page7Container.s1 ? page7Container.s1.remove() : null
|
|
page7Container.s2.alpha += 0.05
|
|
page7Container.s2.updateV()
|
|
} else if (page7Container.s3 !== undefined && page7Container.s3.alpha < 1) {
|
|
!!page7Container.s2 ? page7Container.s2.remove() : null
|
|
page7Container.s3.alpha += 0.05
|
|
page7Container.s3.updateV()
|
|
} else if (page7Container.s4.alpha < 1) {
|
|
!!page7Container.s3 ? page7Container.s3.remove() : null
|
|
page7Container.s4.alpha += 0.05
|
|
page7Container.s4.updateV()
|
|
}
|
|
} else if (page7Container.char.alpha < 1) {
|
|
page7Container.char.alpha += 0.02
|
|
page7Container.char.updateV()
|
|
} else {
|
|
setTimeout(function() {
|
|
document.getElementById('main').style.top = -window.innerHeight*8 + 'px'
|
|
document.getElementById('page8').appendChild(page8Stage.el)
|
|
page7.remove()
|
|
requestAnimationFrame(s8);
|
|
}, 1500)
|
|
return
|
|
}
|
|
requestAnimationFrame(s7);
|
|
}
|
|
|
|
var page8Stage = new C3D.Stage()
|
|
page8Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
color: '#000000',
|
|
image: './images/page5_bg.jpg',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page8 = new C3D.Plane()
|
|
page8.origin(0, 0, 0).position(0, 0, -700).update()
|
|
page8Stage.addChild(page8)
|
|
|
|
var page8Container = C3D.create({
|
|
type: 'sprite',
|
|
position: [0, 0, 0],
|
|
children: [
|
|
{
|
|
type: 'sprite',
|
|
name: 'line',
|
|
position: [1600, 400, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
position: [0, 68, 0],
|
|
size: [1926, 602],
|
|
material: [{image: './images/page8_line_up.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [-388, 440, 0],
|
|
size: [1415, 340],
|
|
material: [{image: './images/page8_line_down.png'}]
|
|
},
|
|
]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'car',
|
|
position: [-600, 320, 0],
|
|
size: [569, 319],
|
|
material: [{image: './images/page1_car.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
name: 'char',
|
|
position: [0, -300, 0],
|
|
size: [527, 201],
|
|
material: [{image: './images/page8_char.png'}]
|
|
}
|
|
]
|
|
})
|
|
page8Container.char.alpha = 0
|
|
page8Container.char.update()
|
|
|
|
page8.addChild(page8Container)
|
|
|
|
function s8() {
|
|
if (page8Container.car.x < 0) {
|
|
page8Container.car.move(30, 0, 0).updateT()
|
|
} else if (page8Container.line.y > 0) {
|
|
page8Container.line.move(-20, -5, 0).updateT()
|
|
} else if (page8Container.char.alpha < 1) {
|
|
page8Container.char.alpha += 0.02
|
|
page8Container.char.updateV()
|
|
} else {
|
|
setTimeout(function() {
|
|
document.getElementById('main').style.top = -window.innerHeight*9 + 'px'
|
|
document.getElementById('page9').appendChild(page9Stage.el)
|
|
page8.remove()
|
|
requestAnimationFrame(s9);
|
|
}, 1500)
|
|
return
|
|
}
|
|
requestAnimationFrame(s8);
|
|
}
|
|
|
|
var page9Stage = new C3D.Stage()
|
|
page9Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
color: '#000000',
|
|
image: './images/page5_bg.jpg',
|
|
size: '100%',
|
|
repeat: 'no-repeat'
|
|
}).update()
|
|
|
|
var page9 = new C3D.Plane()
|
|
page9.origin(0, 0, 0).position(0, 0, -700).update()
|
|
page9Stage.addChild(page9)
|
|
|
|
var page9Container = C3D.create({
|
|
type: 'sprite',
|
|
position: [0, 0, 0],
|
|
children: [
|
|
{
|
|
type: 'plane',
|
|
position: [0, 178, -195],
|
|
name: 'car',
|
|
size: [569, 319],
|
|
material: [{image: './images/page1_car.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [-300, 500, -300],
|
|
name: 'tel',
|
|
size: [120, 226],
|
|
material: [{image: './images/page9_tel.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [-234, 369, -85],
|
|
name: '4G',
|
|
size: [54, 84],
|
|
material: [{image: './images/page9_4G.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [-220, 48, 0],
|
|
name: 'signal_left1',
|
|
size: [32, 74],
|
|
material: [{image: './images/page9_signal_left1.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [-240, 45, 0],
|
|
name: 'signal_left2',
|
|
size: [46, 96],
|
|
material: [{image: './images/page9_signal_left2.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [-265, 45, 0],
|
|
name: 'signal_left3',
|
|
size: [58, 117],
|
|
material: [{image: './images/page9_signal_left3.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [225, 85, 0],
|
|
name: 'signal_right1',
|
|
size: [27, 58],
|
|
material: [{image: './images/page9_signal_right1.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [245, 85, 0],
|
|
name: 'signal_right2',
|
|
size: [47, 90],
|
|
material: [{image: './images/page9_signal_right2.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [275, 85, 0],
|
|
name: 'signal_right3',
|
|
size: [45, 122],
|
|
material: [{image: './images/page9_signal_right3.png'}]
|
|
},
|
|
{
|
|
type: 'plane',
|
|
position: [50, -200, 0],
|
|
name: 'char',
|
|
size: [476, 130],
|
|
material: [{image: './images/page9_char.png'}]
|
|
}
|
|
]
|
|
})
|
|
|
|
page9Container.car.alpha = 0
|
|
page9Container.tel.alpha = 0
|
|
page9Container['4G'].alpha = 0
|
|
page9Container.signal_left1.alpha = 0
|
|
page9Container.signal_left2.alpha = 0
|
|
page9Container.signal_left3.alpha = 0
|
|
page9Container.signal_right1.alpha = 0
|
|
page9Container.signal_right2.alpha = 0
|
|
page9Container.signal_right3.alpha = 0
|
|
page9Container.char.alpha = 0
|
|
|
|
page9Container.car.update()
|
|
page9Container.tel.update()
|
|
page9Container['4G'].update()
|
|
page9Container.signal_left1.update()
|
|
page9Container.signal_left2.update()
|
|
page9Container.signal_left3.update()
|
|
page9Container.signal_right1.update()
|
|
page9Container.signal_right2.update()
|
|
page9Container.signal_right3.update()
|
|
page9Container.char.update()
|
|
|
|
page9.addChild(page9Container)
|
|
|
|
function s9() {
|
|
if (page9Container.car.alpha < 1) {
|
|
page9Container.car.alpha += 0.05
|
|
page9Container.car.updateV()
|
|
} else if (page9Container.tel.alpha < 1) {
|
|
page9Container.tel.alpha += 0.05
|
|
page9Container.tel.updateV()
|
|
} else if (page9Container['4G'].alpha < 1) {
|
|
page9Container['4G'].alpha += 0.05
|
|
page9Container['4G'].updateV()
|
|
} else if (page9Container.signal_left1.alpha < 1) {
|
|
page9Container.signal_left1.alpha += 0.05
|
|
page9Container.signal_left1.updateV()
|
|
page9Container.signal_right1.alpha += 0.05
|
|
page9Container.signal_right1.updateV()
|
|
} else if (page9Container.signal_left2.alpha < 1) {
|
|
page9Container.signal_left2.alpha += 0.05
|
|
page9Container.signal_left2.updateV()
|
|
page9Container.signal_right2.alpha += 0.05
|
|
page9Container.signal_right2.updateV()
|
|
} else if (page9Container.signal_left3.alpha < 1) {
|
|
page9Container.signal_left3.alpha += 0.05
|
|
page9Container.signal_left3.updateV()
|
|
page9Container.signal_right3.alpha += 0.05
|
|
page9Container.signal_right3.updateV()
|
|
} else if (page9Container.char.alpha < 1) {
|
|
page9Container.char.alpha += 0.05
|
|
page9Container.char.updateV()
|
|
} else {
|
|
setTimeout(function() {
|
|
document.getElementById('main').style.top = -window.innerHeight*10 + 'px'
|
|
document.getElementById('page10').appendChild(page10Stage.el)
|
|
page9.remove()
|
|
requestAnimationFrame(s10);
|
|
}, 1000)
|
|
return
|
|
}
|
|
requestAnimationFrame(s9);
|
|
}
|
|
|
|
var page10Stage = new C3D.Stage()
|
|
page10Stage.size(window.innerWidth, window.innerHeight).position(0, 0, 0).material({
|
|
color: '#000000'
|
|
}).update()
|
|
|
|
var page10S1 = new C3D.Plane()
|
|
page10S1.size(643, 1040).position(0, 0, -740).material({
|
|
image: './images/page10_s1.jpg'
|
|
}).update()
|
|
|
|
var page10S2 = new C3D.Plane()
|
|
page10S2.size(643, 1040).position(0, 0, -740).rotation(0, 270, 0).material({
|
|
image: './images/page10_s2.jpg'
|
|
}).update()
|
|
|
|
var page10S3 = new C3D.Plane()
|
|
page10S3.size(643, 1040).position(0, 0, -740).rotation(0, 270, 0).material({
|
|
image: './images/page10_s3.jpg'
|
|
}).update()
|
|
|
|
var page10S4 = new C3D.Plane()
|
|
page10S4.size(643, 1040).position(0, 0, -740).rotation(0, 270, 0).material({
|
|
image: './images/page10_s4.jpg'
|
|
}).update()
|
|
|
|
page10Stage.addChild(page10S1)
|
|
page10Stage.addChild(page10S2)
|
|
page10Stage.addChild(page10S3)
|
|
page10Stage.addChild(page10S4)
|
|
|
|
function s10() {
|
|
if (page10S1.rotationY < 90) {
|
|
if (page10S1.rotationY === 0) {
|
|
setTimeout(function() {
|
|
page10S1.rotationY += 3
|
|
requestAnimationFrame(s10);
|
|
}, 1000)
|
|
return
|
|
}
|
|
page10S1.rotate(0, 3, 0).updateT()
|
|
} else if (page10S2.rotationY < 360) {
|
|
page10S2.rotate(0, 3, 0).updateT()
|
|
} else if (page10S2.rotationY < 450) {
|
|
if (page10S2.rotationY === 360) {
|
|
setTimeout(function() {
|
|
page10S2.rotationY += 3
|
|
requestAnimationFrame(s10);
|
|
}, 1000)
|
|
return
|
|
}
|
|
page10S2.rotate(0, 3, 0).updateT()
|
|
} else if (page10S3.rotationY < 360) {
|
|
page10S3.rotate(0, 3, 0).updateT()
|
|
} else if (page10S3.rotationY < 450) {
|
|
if (page10S3.rotationY === 360) {
|
|
setTimeout(function() {
|
|
page10S3.rotationY += 3
|
|
requestAnimationFrame(s10);
|
|
}, 1000)
|
|
return
|
|
}
|
|
page10S3.rotate(0, 3, 0).updateT()
|
|
} else if (page10S4.rotationY < 360) {
|
|
page10S4.rotate(0, 3, 0).updateT()
|
|
} else if (page10S4.rotationY < 450) {
|
|
if (page10S4.rotationY === 360) {
|
|
setTimeout(function() {
|
|
page10S4.rotationY += 3
|
|
requestAnimationFrame(s10);
|
|
}, 1000)
|
|
return
|
|
}
|
|
page10S4.rotate(0, 3, 0).updateT()
|
|
} else {
|
|
document.getElementById('main').style.top = -window.innerHeight*11 + 'px'
|
|
page10S1.remove()
|
|
page10S2.remove()
|
|
page10S3.remove()
|
|
page10S4.remove()
|
|
return
|
|
}
|
|
requestAnimationFrame(s10);
|
|
}
|
|
}
|
|
|
|
// render()
|
|
|
|
</script>
|
|
</html>
|