wow

In this example below you will see how to do a wow with some HTML / CSS and Javascript

three.js is pretty cool.

Thumbnail
This awesome code was written by Alison Buki, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Alison Buki ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>wow</title>
  
  
  <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/animate.css/3.2.3/animate.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <head> <link rel="stylesheet" href="//code.cdn.mozilla.net/fonts/fira.css">
</head>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js'></script>
<script src='https://cdn.rawgit.com/jeromeetienne/threex.windowresize/master/threex.windowresize.js'></script>
<script src='https://cdn.rawgit.com/mrdoob/three.js/master/examples/js/controls/OrbitControls.js'></script>
<script src='https://cdn.rawgit.com/jeromeetienne/threex.text/master/threex.text.js'></script>
<script src='https://s.cdpn.io/25480/OrbitControls.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/AlisonBuki/wow-akRxvQ */
body {
  background: #000;
  overflow: hidden;
}

#context {
  text-align: center;
}

div {
  text-align: center;
}


/*Downloaded from https://www.codeseek.co/AlisonBuki/wow-akRxvQ */
var scene, camera, controls, poly, poly1, poly2, poly3, poly4, poly5, poly6, light, text, text, stars, emoji, emoji1, emoji2, emoji3, renderer;

init();
write();
draw();
animate();

function init() {
  scene = new THREE.Scene();
  scene.fog = new THREE.FogExp2( 0x000000, .0003);
  
  var width = window.innerWidth;
  var height = window.innerHeight;
  
  renderer = new THREE.WebGLRenderer({antialias:true});
  
  renderer.setSize(width,height);
  renderer.setClearColor(0x000011, 1);
  renderer.domElement.id = "context";
   document.body.appendChild(renderer.domElement);
  
  camera = new THREE.PerspectiveCamera(45, width/height, .1, 10000);
  scene.add(camera);
 camera.position.set(0,160,-200);
  camera.lookAt(scene.position);
  
  var ambientLight = new THREE.AmbientLight(0x6cb2b2);
  scene.add(ambientLight);
  
  light = new THREE.PointLight(0xFFFBE3);
  light.position.set(100,0,-60);
  scene.add(light);
  
   controls = new THREE.OrbitControls(camera);
   
}

function draw(){
  
  //poly
  var geo = new THREE.IcosahedronGeometry(38,1);
var mat = new THREE.MeshNormalMaterial({ 
  //color: 0xD91470,
  //wireframe: true,
  //wireframeLinewidth: 8
});
poly = new THREE.Mesh(geo, mat);
scene.add(poly);
  //poly1
    var geo1 = new THREE.IcosahedronGeometry(9,1);
var mat1 = new THREE.MeshLambertMaterial({ 
  color: 0x00a025,
  wireframe: true,
  wireframeLinewidth: 2
});
poly1 = new THREE.Mesh(geo1, mat1);
scene.add(poly1);
  poly1.position.x = 60;
  poly1.position.y = 50;
  poly1.position.z = -2;
  
  //poly2
    var geo2 = new THREE.IcosahedronGeometry(7,1);
var mat2 = new THREE.MeshPhongMaterial({ 
  color: 0xffff00,
  wireframe: true,
  wireframeLinewidth: 2
});
poly2 = new THREE.Mesh(geo2, mat2);
scene.add(poly2);
  poly2.position.x = 80;
  poly2.position.y = -60;
  poly2.position.z = -2;
  
  //poly3
    var geo3 = new THREE.IcosahedronGeometry(12,1);
var mat3 = new THREE.MeshPhongMaterial({ 
  color: 0x001aaf,
  wireframe: true,
  wireframeLinewidth: 2
});
poly3 = new THREE.Mesh(geo3, mat3);
scene.add(poly3);
  poly3.position.x = -80;
  poly3.position.y = 40;
  poly3.position.z = 10;
  
  //poly4
    var geo4 = new THREE.IcosahedronGeometry(9,1);
var mat4 = new THREE.MeshLambertMaterial({ 
  color: 0xD91470,
  wireframe: true,
  wireframeLinewidth: 2
});
poly4 = new THREE.Mesh(geo4, mat4);
scene.add(poly4);
  poly4.position.x = -55;
  poly4.position.y = -15;
  poly4.position.z = -6;
  
    //poly5
    var geo5 = new THREE.IcosahedronGeometry(13,1);
var mat5 = new THREE.MeshLambertMaterial({ 
  color: 0x7b00ff,
  wireframe: true,
  wireframeLinewidth: 2
});
poly5 = new THREE.Mesh(geo5, mat5);
scene.add(poly5);
  poly5.position.x = 125;
  poly5.position.y = 10;
  poly5.position.z = -4;
  
  //stars yo
  var starAmt = 20000;
  var starGeo = new THREE.SphereGeometry(1000, 100, 50);
 var starAmt = 10000;
  var starMat = {
    size: 1.0, 
	   transparency: true, 
	   opacity: 0.7
  };
  var starMesh = new THREE.PointCloudMaterial(starMat); 
  
  for (var i = 0; i < starAmt; i++) {
			var starVertex = new THREE.Vector3();
			starVertex.x = Math.random() * 1000 - 500;
			starVertex.y = Math.random() * 1000 - 500;
			starVertex.z = Math.random() * 1000 - 500;
			starGeo.vertices.push(starVertex);
		}
  stars = new THREE.PointCloud(starGeo, starMesh);
		scene.add(stars);

}

function write(){
  //message
text = document.createElement('div');
text.style.position = 'absolute';
//text2.style.zIndex = 1;    
text.style.width = 100;
text.style.height = 100;
text.style.color = '#d3d3d3';
text.style.fontFamily = 'fira mono';
text.style.fontWeight = 600;
text.style.fontSize = '3.5rem';
text.innerHTML = 'THANK YOU!';
text.style.top = 50 + 'px';
text.style.left = 100 + 'px';
text.style.textAlign = 'center';
document.body.appendChild(text);
  
 //instructions
  text2 = document.createElement('div');
text2.style.position = 'absolute';
//text2.style.zIndex = 1;    
text2.style.width = 100;
text2.style.height = 100;
text2.style.color = '#d3d3d3';
text2.style.fontFamily = 'fira mono';
text2.style.fontWeight = 600;
text2.style.fontSize = '1.5rem';
text2.innerHTML = '(rotate me)';
text2.style.bottom = 50 + 'px';
text2.style.left = 600 + 'px';
text2.style.textAlign = 'center';
document.body.appendChild(text2);
  
  //Extraterrestrials
emoji = document.createElement("img")
emoji.setAttribute("src", "http://imgh.us/alien.svg");
  emoji.setAttribute("height", "55");
  emoji.setAttribute("width", "55");
  emoji.style.position = 'absolute';
  emoji.style.textAlign = 'center';
  emoji.style.bottom = 90 + 'px';
  emoji.style.right = 40 + 'px';
  document.body.appendChild(emoji);
  
 emoji1 = document.createElement("img")
emoji1.setAttribute("src", "http://imgh.us/alien.svg");
  emoji1.setAttribute("height", "55");
  emoji1.setAttribute("width", "55");
  emoji1.style.position = 'absolute';
  emoji1.style.textAlign = 'center';
  emoji1.style.bottom = 90 + 'px';
  emoji1.style.left = 50 + 'px';
  document.body.appendChild(emoji1);
  
  //sunglasses
   emoji2 = document.createElement("img")
emoji2.setAttribute("src", "http://imgh.us/sunglasses.svg");
  emoji2.setAttribute("height", "55");
  emoji2.setAttribute("width", "55");
  emoji2.style.position = 'absolute';
  emoji2.style.textAlign = 'center';
  emoji2.style.top = 130 + 'px';
  emoji2.style.left = 50 + 'px';
  document.body.appendChild(emoji2);
  
   emoji3 = document.createElement("img")
emoji3.setAttribute("src", "http://imgh.us/sunglasses.svg");
  emoji3.setAttribute("height", "55");
  emoji3.setAttribute("width", "55");
  emoji3.style.position = 'absolute';
  emoji3.style.textAlign = 'center';
  emoji3.style.top = 130 + 'px';
  emoji3.style.right = 40 + 'px';
  document.body.appendChild(emoji3);
}

function animate() {
  requestAnimationFrame(animate);
  
  poly.rotation.y += 0.007;
  poly1.rotation.y += -0.009;
  poly2.rotation.y += 0.02;
  poly3.rotation.x += 0.01;
  poly4.rotation.x += -0.03;
  poly5.rotation.y += .01;
  
  renderer.render(scene, camera);
}

Comments