<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="hero">
<svg width="110px" height="142px" viewBox="0 0 210 242" class="logo">
<g fill="none">
<g id="Desktop-Landscape" transform="translate(-537.000000, -234.000000)">
<g id="Logo" transform="translate(542.000000, 240.000000)">
<polygon id="Polygon" stroke="#FFFFFF" stroke-width="10" points="100 0 199.592921 57.5 199.592921 172.5 100 230 0.407078565 172.5 0.407078565 57.5"></polygon>
<path d="M42.4314575,171.568542 C73.6734008,202.810486 124.326599,202.810486 155.568542,171.568542 C186.810486,140.326599 186.810486,89.6734008 155.568542,58.4314575 L148.497475,65.5025253 C175.834175,92.8392257 175.834175,137.160774 148.497475,164.497475 C121.160774,191.834175 76.8392257,191.834175 49.5025253,164.497475 C22.1658249,137.160774 22.1658249,92.8392257 49.5025253,65.5025253 L42.4314575,58.4314575 C11.1895142,89.6734008 11.1895142,140.326599 42.4314575,171.568542 Z" id="Oval" fill="#FFFFFF"></path>
<path d="M60.109127,178.890873 C81.5879631,200.369709 116.412037,200.369709 137.890873,178.890873 C159.369709,157.412037 159.369709,122.587963 137.890873,101.109127 L130.819805,108.180195 C148.393398,125.753788 148.393398,154.246212 130.819805,171.819805 C113.246212,189.393398 84.753788,189.393398 67.1801948,171.819805 C49.6066017,154.246212 49.6066017,125.753788 67.1801948,108.180195 L60.109127,101.109127 C38.630291,122.587963 38.630291,157.412037 60.109127,178.890873 Z" id="Oval" fill="#FFFFFF"></path>
<path d="M78.1421356,185.568542 C83.8017128,191.22812 91.3487318,194.312821 99.1935625,194.354905 C107.149643,194.397586 114.828973,191.308112 120.568542,185.568542 C132.284271,173.852814 132.284271,154.857864 120.568542,143.142136 L113.497475,150.213203 C121.307961,158.023689 121.307961,170.686989 113.497475,178.497475 C109.665906,182.329043 104.559146,184.383545 99.2472072,184.355049 C94.009919,184.326953 88.9914968,182.275768 85.2132034,178.497475 C77.4027176,170.686989 77.4027176,158.023689 85.2132034,150.213203 L78.1421356,143.142136 C66.4264069,154.857864 66.4264069,173.852814 78.1421356,185.568542 Z" id="Oval" fill="#FFFFFF"></path>
</g>
</g>
</g>
</svg>
<svg viewBox="0 0 100 100" preserveAspectRatio="none" class="wave">
<path>
<animate attributeName="d" values="M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100; M0,60 A50,50 0 0,1 50,50 A50,50 0 0,0 100,50 L100,100 L0,100; M0,50 A50,200 0 0,1 50,50 A50,200 0 0,0 100,50 L100,100 L0,100" dur="10s" repeatCount="indefinite" rotate="auto"></animate>
</path>
<path>
<animate attributeName="d" values="M0,50 A50,150 0 0,0 40,50 A50,100 0 0,1 100,50 L100,100 L0,100; M0,30 A50,300 0 0,0 40,50 A50,150 0 0,1 100,50 L100,100 L0,100; M0,50 A50,150 0 0,0 40,50 A50,100 0 0,1 100,50 L100,100 L0,100" dur="15s" repeatCount="indefinite" rotate="auto"></animate>
</path>
</svg>
</div>
.hero {
height: 100vh;
background-color: #69ACFF;
}
.logo {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.wave {
width: 100%;
height: 50vh;
margin-top: 50vh;
path {
fill: rgba(67, 117, 178, .15);
}
}
//VARIABLES
var renderer, scene, windowHeight, windowWidth, aspectRatio, fieldOfView, near, far, camera,cube;
var Animation = {
duration:1.5,
delay:.5,
colors: {
cube: 0xE0E0E0,
plateform:0x9E9E9E,
ground:0xf99d17,
background:0xffad19
}
};
function getDegree(degree) {
return degree * Math.PI/180;
}
//INIT
function init(){
newScene();
newLights();
newPlateform();
newGround();
newCube();
render();
}
//SCENE
function newScene(){
windowHeight = window.innerHeight;
windowWidth = window.innerWidth;
scene = new THREE.Scene();
aspectRatio = windowWidth / windowHeight;
factor = 130;
near = 1;
far = 10000;
camera = new THREE.OrthographicCamera(windowWidth/-factor,windowWidth/factor,windowHeight/factor,windowHeight/-factor,near,far);
camera.position.set(7,5,5);
camera.lookAt(scene.position);
renderer = new THREE.WebGLRenderer({antialias:true});
renderer.setClearColor(new THREE.Color(Animation.colors.background), 1);
renderer.shadowMap.enabled = true;
renderer.shadowMap.type = THREE.PCFSoftShadowMap;
renderer.setSize(windowWidth, windowHeight);
document.body.appendChild(renderer.domElement);
window.addEventListener('resize', windowResize, false);
function windowResize() {
renderer.setSize(window.innerWidth, window.innerHeight);
camera.left = -window.innerWidth / factor;
camera.right = window.innerWidth / factor;
camera.top = window.innerHeight / factor;
camera.bottom = -window.innerHeight / factor;
camera.updateProjectionMatrix();
}
}
//LIGHTS
function newLights(){
var light = new THREE.AmbientLight( 0xFFFFFF,.9);
var hemisphereLight = new THREE.HemisphereLight(0xFFFFFF,0xFFFFFF, .1);
var shadowLight = new THREE.DirectionalLight(0xFFFFFF, .1);
shadowLight.position.set(10,100,30);
shadowLight.castShadow = true;
scene.add( light );
scene.add(hemisphereLight);
scene.add(shadowLight);
}
//GROUND
Ground = function(){
this.mesh = new THREE.Object3D();
var geometry = new THREE.PlaneGeometry(20, 20,1,1);
var material = new THREE.MeshLambertMaterial({color: Animation.colors.ground});
var plane = new THREE.Mesh(geometry, material);
plane.receiveShadow = true;
this.mesh.add(plane);
};
function newGround(){
ground = new Ground();
ground.mesh.position.y = -2;
ground.mesh.rotation.x = getDegree(-90);
scene.add(ground.mesh);
}
//PLATEFORME
Plateform = function(posX,posY,posZ){
this.mesh = new THREE.Object3D();
var geometry = new THREE.BoxGeometry(1, .2, 1);
var material = new THREE.MeshLambertMaterial({color: Animation.colors.plateform});
this.plateform = new THREE.Mesh(geometry, material);
this.plateform.castShadow = true;
this.mesh.add(this.plateform);
};
var plateformee;
function newPlateform(){
var plateformPosition = [[0, -1, .5],[0, -1, -.5],[-1, -1, -.5]];
for (var pos in plateformPosition){
plateformee = new Plateform();
plateformee.mesh.position.x = plateformPosition[pos][0];
plateformee.mesh.position.y = plateformPosition[pos][1];
plateformee.mesh.position.z = plateformPosition[pos][2];
scene.add(plateformee.mesh);
}
}
//CUBE
Cube = function(){
this.mesh = new THREE.Object3D();
var geometry = new THREE.BoxGeometry(1,1,1);
var material = new THREE.MeshLambertMaterial({color: Animation.colors.cube, transparent: true});
this.cube = new THREE.Mesh(geometry, material);
this.mesh.add(this.cube);
};
function newCube(){
cube = new Cube();
scene.add(cube.mesh);
cube.cube.position.set(0,2,.5);
var tl = new TimelineMax({repeat:-1, repeatDelay: Animation.delay});
tl.set(cube.cube.material, {opacity: 0});
tl.to(cube.cube.position, 0.8, {y:-.4, ease: Bounce.easeOut});
tl.to(cube.cube.scale, 0.8,{y: 1, ease: Bounce.easeOut},"-=0.8");
tl.to(cube.cube.material, 0.5,{opacity: 1},"-=0.8");
tl.to(cube.cube.rotation, 0.8, {x:getDegree(-90)},"+=0.2");
tl.to(cube.cube.position, 0.3, {y:-.2},"-=0.8");
tl.to(cube.cube.position, 0.8, {z:-0.5},"-=0.8");
tl.to(cube.cube.position, 0.3, {y:-.4},"-=0.4");
tl.to(cube.cube.rotation, 0.8, {y:getDegree(-90)});
tl.to(cube.cube.position, 0.3, {y:-.2},"-=0.8");
tl.to(cube.cube.position, 0.8, {x:-1},"-=0.8");
tl.to(cube.cube.position, 0.3, {y:-.4},"-=0.4");
tl.to(cube.cube.rotation, 0.8, {x:0, ease:Power3.easeOut});
tl.to(cube.cube.position, 0.8, {z:0.8, ease:Power3.easeOut},"-=0.8");
tl.to(cube.cube.position, 0.60, {y:-4, ease:Power3.easeIn},"-=0.80");
tl.to(cube.cube.scale, 0.8,{y: 1.5},"-=0.5");
tl.to(cube.cube.material, 0.25,{opacity: 0},"-=0.85");
tl.timeScale(Animation.duration);
}
//RENDER
function render() {
renderer.render( scene, camera );
requestAnimationFrame( render );
}
init();
