组合复活-挑战大结局

下载代码

html

css

分享到微信朋友圈

html

<div class="button shift-camera-button">
    <div class="border">
      <div class="left-plane"></div>
      <div class="right-plane"></div>
    </div>
    <div class="text">To The Stars</div>
  </div>
</div>
<div class="sky-container">
  <div class="text-right sky-container__left">
    <h2 class="portfolio">
				PORTFOLIO
			</h2>
    <h2 class="resurrection">
				resurrection	
			</h2>
  </div>
  <div class="text-left sky-container__right">
    <h2 class="08">
				08
			</h2>
    <h2 class="thirty-one">
				31
			</h2>
    <h2 class="2016">
				2016
			</h2>
  </div>
</div>

css

body {
  position: relative;
  margin: 0;
  overflow: hidden;
}

.intro-container {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: white;
  text-align: center;
  margin: 0 auto;
  right: 0;
  left: 0;
}

h1 {
  font-family: 'Brandon Grotesque', sans-serif;
  font-weight: bold;
  margin-top: 0px;
  margin-bottom: 0;
  font-size: 20px;
}
@media screen and (min-width: 860px) {
  h1 {
    font-size: 40px;
    line-height: 52px;
  }
}

.fancy-text {
  font-family: "adobe-garamond-pro",sans-serif;
  font-style: italic;
  letter-spacing: 1px;
  margin-bottom: 17px;
}

.button {
  position: relative;
  cursor: pointer;
  display: inline-block;
  font-family: 'Brandon Grotesque', sans-serif;
  text-transform: uppercase;
  min-width: 200px;
  margin-top: 30px;
}
.button:hover .border {
  box-shadow: 0px 0px 10px 0px white;
}
.button:hover .border .left-plane, .button:hover .border .right-plane {
  transform: translateX(0%);
}
.button:hover .text {
  color: #121212;
}
.button .border {
  border: 1px solid white;
  transform: skewX(-20deg);
  height: 32px;
  border-radius: 3px;
  overflow: hidden;
  position: relative;
  transition: .10s ease-out;
}
.button .border .left-plane, .button .border .right-plane {
  position: absolute;
  background: white;
  height: 32px;
  width: 100px;
  transition: .15s ease-out;
}
.button .border .left-plane {
  left: 0;
  transform: translateX(-100%);
}
.button .border .right-plane {
  right: 0;
  transform: translateX(100%);
}
.button .text {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  transition: .15s ease-out;
}

.x-mark {
  right: 10px;
  top: 10px;
  position: absolute;
  cursor: pointer;
  opacity: 0;
}
.x-mark:hover .right {
  transform: rotate(-45deg) scaleY(1.2);
}
.x-mark:hover .left {
  transform: rotate(45deg) scaleY(1.2);
}
.x-mark .container {
  position: relative;
  width: 20px;
  height: 20px;
}
.x-mark .left, .x-mark .right {
  width: 2px;
  height: 20px;
  background: white;
  position: absolute;
  border-radius: 3px;
  transition: .15s ease-out;
  margin: 0 auto;
  left: 0;
  right: 0;
}
.x-mark .right {
  transform: rotate(-45deg);
}
.x-mark .left {
  transform: rotate(45deg);
}

.sky-container {
  position: absolute;
  color: white;
  text-transform: uppercase;
  margin: 0 auto;
  right: 0;
  left: 0;
  top: 2%;
  text-align: center;
  opacity: 0;
}
@media screen and (min-width: 860px) {
  .sky-container {
    top: 18%;
    right: 12%;
    left: auto;
  }
}
.sky-container__left, .sky-container__right {
  display: inline-block;
  vertical-align: top;
  font-weight: bold;
}
.sky-container__left h2, .sky-container__right h2 {
  font-family: 'Brandon Grotesque', sans-serif;
  font-size: 26px;
  line-height: 26px;
  margin: 0;
}
@media screen and (min-width: 860px) {
  .sky-container__left h2, .sky-container__right h2 {
    font-size: 72px;
    line-height: 68px;
  }
}
.sky-container__left {
  margin-right: 5px;
}
.sky-container .thirty-one {
  letter-spacing: 4px;
}

.text-right {
  text-align: right;
}

.text-left {
  text-align: left;
}

.social:hover a {
  transform: rotate(-45deg) scale(1.05);
}
.social:hover i {
  color: #21c2ff;
}

a {
  position: absolute;
  bottom: -40px;
  right: -75px;
  background: white;
  color: white;
  box-shadow: -1px -1px 20px 0px rgba(0, 0, 0, 0.3);
  display: inline-block;
  width: 150px;
  height: 80px;
  transform-origin: 50% 50%;
  transform: rotate(-45deg);
  transition: .15s ease-out;
}

i {
  position: absolute;
  bottom: 7px;
  right: 7px;
  pointer-events: none;
  color: #00ACED;
  z-index: 1000;
  font-size: 100px;
  transition: .15s ease-out;
}

JavaScript

"use strict";
/* globals THREE, $, TweenLite, Power3, TimelineMax  */

var camera = undefined,
    scene = undefined,
    renderer = undefined;
var plane = undefined;
var raycaster = new THREE.Raycaster();
var normalizedMouse = {
	x: 0,
	y: -180
};

// let lightBlue = {
// 	r: 34,
// 	g: 183,
// 	b: 236
// };

var darkBlue = {
	r: 0,
	g: 52,
	b: 74
};

var baseColorRGB = darkBlue;
var baseColor = "rgb(" + baseColorRGB.r + "," + baseColorRGB.g + "," + baseColorRGB.b + ")";
var nearStars = undefined,
    farStars = undefined,
    farthestStars = undefined;

function init() {
	scene = new THREE.Scene();
	camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
	renderer = new THREE.WebGLRenderer();

// Scene initialization
	camera.position.z = 50;

renderer.setClearColor("#121212", 1.0);
	renderer.setSize(window.innerWidth, window.innerHeight);
	renderer.setPixelRatio(window.devicePixelRatio);

document.body.appendChild(renderer.domElement);

// Lights
	var topLight = new THREE.DirectionalLight(0xffffff, 1);
	topLight.position.set(0, 1, 1).normalize();
	scene.add(topLight);

var bottomLight = new THREE.DirectionalLight(0xffffff, 0.4);
	bottomLight.position.set(1, -1, 1).normalize();
	scene.add(bottomLight);

var skyLightRight = new THREE.DirectionalLight(0x666666, 0.2);
	skyLightRight.position.set(-1, -1, 0.2).normalize();
	scene.add(skyLightRight);

var skyLightCenter = new THREE.DirectionalLight(0x666666, 0.2);
	skyLightCenter.position.set(-0, -1, 0.2).normalize();
	scene.add(skyLightCenter);

var skyLightLeft = new THREE.DirectionalLight(0x666666, 0.2);
	skyLightLeft.position.set(1, -1, 0.2).normalize();
	scene.add(skyLightLeft);

// Mesh creation
	var geometry = new THREE.PlaneGeometry(400, 400, 70, 70);
	var darkBlueMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff, shading: THREE.FlatShading, side: THREE.DoubleSide, vertexColors: THREE.FaceColors });

geometry.vertices.forEach(function (vertice) {
		vertice.x += (Math.random() - 0.5) * 4;
		vertice.y += (Math.random() - 0.5) * 4;
		vertice.z += (Math.random() - 0.5) * 4;
		vertice.dx = Math.random() - 0.5;
		vertice.dy = Math.random() - 0.5;
		vertice.randomDelay = Math.random() * 5;
	});

for (var i = 0; i < geometry.faces.length; i++) {
		geometry.faces[i].color.setStyle(baseColor);
		geometry.faces[i].baseColor = baseColorRGB;
	}

plane = new THREE.Mesh(geometry, darkBlueMaterial);
	scene.add(plane);

// Create stars
	farthestStars = createStars(1200, 420, "#0952BD");
	farStars = createStars(1200, 370, "#A5BFF0");
	nearStars = createStars(1200, 290, "#118CD6");

scene.add(farthestStars);
	scene.add(farStars);
	scene.add(nearStars);

farStars.rotation.x = 0.25;
	nearStars.rotation.x = 0.25;

// Uncomment for testing second camera position
	// camera.rotation.x = Math.PI / 2;
	// camera.position.y = -0;
	// camera.position.z = 20;
	// plane.scale.x = 2;
}

function createStars(amount, yDistance) {
	var color = arguments.length <= 2 || arguments[2] === undefined ? "0x000000" : arguments[2];

var opacity = Math.random();
	var starGeometry = new THREE.Geometry();
	var starMaterial = new THREE.PointsMaterial({ color: color, opacity: opacity });

for (var i = 0; i < amount; i++) {
		var vertex = new THREE.Vector3();
		vertex.z = (Math.random() - 0.5) * 1500;
		vertex.y = yDistance;
		vertex.x = (Math.random() - 0.5) * 1500;

starGeometry.vertices.push(vertex);
	}

return new THREE.Points(starGeometry, starMaterial);
}

var timer = 0;

function render() {
	requestAnimationFrame(render);

timer += 0.01;
	var vertices = plane.geometry.vertices;

for (var i = 0; i < vertices.length; i++) {
		// Ease back to original vertice position while still maintaining sine wave
		vertices[i].x -= Math.sin(timer + vertices[i].randomDelay) / 40 * vertices[i].dx;
		vertices[i].y += Math.sin(timer + vertices[i].randomDelay) / 40 * vertices[i].dy;
		// ((vertices[i].x - vertices[i].originalPosition.x) * 0.1) +
	}

// Determine where ray is being projected from camera view
	raycaster.setFromCamera(normalizedMouse, camera);

// Send objects being intersected into a variable
	var intersects = raycaster.intersectObjects([plane]);

if (intersects.length > 0) {
		(function () {

var faceBaseColor = intersects[0].face.baseColor;

plane.geometry.faces.forEach(function (face) {
				face.color.r *= 255;
				face.color.g *= 255;
				face.color.b *= 255;

face.color.r += (faceBaseColor.r - face.color.r) * 0.01;
				face.color.g += (faceBaseColor.g - face.color.g) * 0.01;
				face.color.b += (faceBaseColor.b - face.color.b) * 0.01;

var rInt = Math.floor(face.color.r);
				var gInt = Math.floor(face.color.g);
				var bInt = Math.floor(face.color.b);

var newBasecol = "rgb(" + rInt + "," + gInt + "," + bInt + ")";
				face.color.setStyle(newBasecol);
			});
			plane.geometry.colorsNeedUpdate = true;

intersects[0].face.color.setStyle("#006ea0");
			plane.geometry.colorsNeedUpdate = true;
		})();
	}

plane.geometry.verticesNeedUpdate = true;
	plane.geometry.elementsNeedUpdate = true;

farthestStars.rotation.y -= 0.00001;
	farStars.rotation.y -= 0.00005;
	nearStars.rotation.y -= 0.00011;

renderer.render(scene, camera);
}

init();

window.addEventListener("resize", function () {

camera.aspect = window.innerWidth / window.innerHeight;
	camera.updateProjectionMatrix();
	renderer.setSize(window.innerWidth, window.innerHeight);
});

window.addEventListener("mousemove", function (event) {

// Normalize mouse coordinates
	normalizedMouse.x = event.clientX / window.innerWidth * 2 - 1;
	normalizedMouse.y = -(event.clientY / window.innerHeight) * 2 + 1;
});

var introContainer = $('.intro-container');
var skyContainer = $('.sky-container');
var xMark = $('.x-mark');

$('.shift-camera-button').click(function () {
	var introTimeline = new TimelineMax();

introTimeline.add([TweenLite.fromTo(introContainer, 0.5, { opacity: 1 }, { opacity: 0, ease: Power3.easeIn }), TweenLite.to(camera.rotation, 3, { x: Math.PI / 2, ease: Power3.easeInOut }), TweenLite.to(camera.position, 2.5, { z: 20, ease: Power3.easeInOut }), TweenLite.to(camera.position, 3, { y: 120, ease: Power3.easeInOut }), TweenLite.to(plane.scale, 3, { x: 2, ease: Power3.easeInOut })]);

introTimeline.add([TweenLite.to(xMark, 2, { opacity: 1, ease: Power3.easeInOut }), TweenLite.to(skyContainer, 2, { opacity: 1, ease: Power3.easeInOut })]);
});

$('.x-mark').click(function () {
	var outroTimeline = new TimelineMax();

outroTimeline.add([TweenLite.to(xMark, 0.5, { opacity: 0, ease: Power3.easeInOut }), TweenLite.to(skyContainer, 0.5, { opacity: 0, ease: Power3.easeInOut }), TweenLite.to(camera.rotation, 3, { x: 0, ease: Power3.easeInOut }), TweenLite.to(camera.position, 3, { z: 50, ease: Power3.easeInOut }), TweenLite.to(camera.position, 2.5, { y: 0, ease: Power3.easeInOut }), TweenLite.to(plane.scale, 3, { x: 1, ease: Power3.easeInOut })]);

outroTimeline.add([TweenLite.to(introContainer, 0.5, { opacity: 1, ease: Power3.easeIn })]);
});

render();

粒子时间文字 hover canvas 3d 游戏音乐火焰水波轮播图鼠标跟随动画 css 加载动画导航菜单按钮滑块 tab 弹出层统计图 svg