14islands.com winter theme

In this example below you will see how to do a 14islands.com winter theme with some HTML / CSS and Javascript

Forked from http://seb.ly/2010/11/javascript-html5-canvas-snow-in-3d/

Thumbnail
This awesome code was written by 14islands, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 14islands ©
  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>14islands.com winter theme</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  

<header>
  <svg class="logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 892.2 305.2" enable-background="new 0 0 892.2 305.2"><path fill="#fff" d="M387 201.5h-14.6l.1-86.2h-12v-14.6h26.6l-.1 100.8z"></path><path fill="#fff" d="M470.6 230.6h-14.6v-29.2h-57l.1-15.5 41.3-85.2h14.6l-41.1 86.2h42v-57h14.6v57h11.9v14.6h-11.9v29.1z"></path><path fill="#fff" d="M505.7 201.5h-11.9v-100.8h11.9v100.8zm0-115.4h-11.9v-11.9h11.9v11.9z"></path><path fill="#fff" d="M547.6 203c-14.8 0-30.7-9-30.7-28.8v-3.2h11.9v2c0 13.7 9.7 18.6 18.7 18.6 12.3 0 18.5-5.9 18.5-17.5 0-10.7-5.6-16.7-19.4-20.7-12.8-3.2-27.5-9.3-27.5-27.4 0-16.7 10.8-26.6 29-26.6 7.6 0 14.5 2.3 19.5 6.6 5.8 5 8.9 12.6 8.9 21.9v3.3h-11.9v-3.3c0-4-1.2-17-16.4-17-11 0-16.6 4.9-16.6 14.6.3 11.4 10.6 14.5 17.5 16.5l1.1.3c19.3 5.1 28.3 15.1 28.3 31.3.1 18.7-11.2 29.4-30.9 29.4z"></path><path fill="#fff" d="M601.2 201.5h-11.9v-140.6h11.9v140.6z"></path><path fill="#fff" d="M642.7 203c-18.1 0-29-13.2-29-35.4v-33.1c0-31.7 20.2-35.1 29-35.1 10.1 0 18.1 4.4 22.7 12.6l1.4-11.3h9.2v100.8h-9.2l-1.4-11.3c-5.7 10.5-15.4 12.8-22.7 12.8zm2.5-92.1c-13 0-19.6 9.7-19.6 28.9v22.5c0 19.4 6.6 29.2 19.6 29.2 5.1 0 9.1-1.4 12-4.4 4.5-4.5 6.8-12.9 6.8-24.8v-22.5c.1-12.4-1.8-28.9-18.8-28.9z"></path><path fill="#fff" d="M748.3 201.5h-11.9v-60.3c0-27.1-10.4-30.3-18.3-30.3-12.3 0-18.9 9.5-18.9 27.6v63h-11.9v-100.8h9.2l1.5 11.8c4.7-8.5 12.7-13.1 22.9-13.1 18.2 0 27.4 11.4 27.4 33.8v68.3z"></path><path fill="#fff" d="M787.7 203c-8.4 0-28.1-3.4-28.1-35.4v-33.1c0-10.6 2.7-35.1 28.1-35.1 9.1 0 16.4 4 21 11.3v-49.8h11.9v140.5h-8.9l-1-11.3c-4.8 8.4-12.8 12.9-23 12.9zm2.8-92.1c-8.7 0-19 5.2-19 30.3v21.2c0 19.7 6.3 29.2 19 29.2 4.9 0 8.7-1.4 11.5-4.2 4.5-4.5 6.6-12.7 6.6-25.1v-21.2c0-20.9-5.6-30.2-18.1-30.2z"></path><path fill="#fff" d="M861.2 203c-14.8 0-30.7-9-30.7-28.8v-3.2h11.9v2c0 13.7 9.7 18.6 18.7 18.6 12.3 0 18.5-5.9 18.5-17.5 0-10.7-5.6-16.7-19.4-20.7-12.8-3.2-27.5-9.3-27.5-27.4 0-16.7 10.8-26.6 29-26.6 7.6 0 14.5 2.3 19.5 6.6 5.8 5 8.9 12.6 8.9 21.9v3.3h-11.9v-3.3c0-4-1.2-17-16.4-17-11 0-16.6 4.9-16.6 14.6.3 11.4 10.6 14.5 17.5 16.5l1.1.3c19.3 5.1 28.3 15.1 28.3 31.3.1 18.7-11.2 29.4-30.9 29.4z"></path><circle fill="#fff" cx="152.6" cy="152.6" r="152.6"></circle><g opacity=".4"><path class="polygon-down--light" fill="#01a084" d="M122.4 204l53 52.5 31.7-10.2 11.1-10.4 6.8 14.5 21.7-20 6.9-4.2 6.2-22.2z"></path><path class="polygon-down--light" fill="#01a084" d="M103.4 204l-1.4 4-9.6 10.6-7.7-6.3v9.9l-11.9 4.2-23.7-22.4z"></path><path class="polygon-down--dark" fill="#006457" d="M49.1 204h-2.1l5 10h7.7z"></path><path class="polygon-down--dark" fill="#006457" d="M84.7 222.2v-9.9l7.7 6.2-1.9 2.4z"></path><path class="polygon-down--dark" fill="#006457" d="M122.4 204h-4.1l9.9 28.2 18.8-3.8z"></path><path class="polygon-down--dark" fill="#006457" d="M207.1 246.2l11.1-10.4 6.8 14.6z"></path></g><g><path class="polygon-up--light" fill="#01a084" d="M122.4 202l53-53.2 31.7 9.8 11.1 10.3 6.8-14.7 21.7 20 6.9 4.9 6.2 22.9z"></path><path class="polygon-up--light" fill="#01a084" d="M103.4 202l-1.4-4.7-9.6-10.9-7.7 5.8v-9.8l-11.9-3.5-23.7 23.1z"></path><path class="polygon-up--dark" fill="#006457" d="M49.1 202h-2.1l5-10h7.5z"></path><path class="polygon-up--dark" fill="#006457" d="M84.7 182.4v9.8l7.7-6-1.9-2.6z"></path><path class="polygon-up--dark" fill="#006457" d="M122.4 202h-4.1l9.9-28.8 18.8 4.1z"></path><path class="polygon-up--dark" fill="#006457" d="M207.1 158.3l11.1 10.4 6.8-14.6z"></path></g></svg>
  <div class="text">
    <h1>
      Crafting digital 
      experiences with 
      cutting edge technologies.
    </h1>
  </div>
  <nav>
  </nav>
</header>
  <script src='https://rawgit.com/sebleedelisle/live-coding-presentations/master/2011/JSSnow/js/ThreeCanvas.js'></script>

  

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




</body>

</html>

/*Downloaded from https://www.codeseek.co/14islands/14islandscom-winter-theme-gaXYLR */
body {
  background-color: #01a084;
  margin: 0px;
  overflow: hidden;
  color: #fff;
}

header {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.logo {
  width: 200px;
  padding: 10% 20% 0;
}

.text {
  padding: 0 20%;
}

h1 {
  flex: none;
  font-family: Calibre, Helvetica, Arial;
  font-size: 96px;
  font-weight: 600;
  letter-spacing: -2.90425px;
  line-height: 96.8083px;
  max-width: 700px;
}

nav {
  background: #fff;
  height: 80px;
  flex: none;
}

/*Downloaded from https://www.codeseek.co/14islands/14islandscom-winter-theme-gaXYLR */
// Particle3D class

Particle3D = function (material ) {

	THREE.Particle.call( this, material );
	
	//this.material = material instanceof Array ? material : [ material ];
	
	// define properties
	this.velocity = new THREE.Vector3(0,-2,0);
	this.velocity.rotateX(randomRange(-45,45)); 
	this.velocity.rotateY(randomRange(0,360)); 
	this.gravity = new THREE.Vector3(0,0,0); 
	this.drag = 1; 
	// methods... 
  
	
};

Particle3D.prototype = new THREE.Particle();
Particle3D.prototype.constructor = Particle3D;
Particle3D.prototype.updatePhysics = function() {
	
	this.velocity.multiplyScalar(this.drag); 
	this.velocity.addSelf(this.gravity);
	this.position.addSelf(this.velocity);

}

var TO_RADIANS = Math.PI/180; 

THREE.Vector3.prototype.rotateY = function(angle){
					
	cosRY = Math.cos(angle * TO_RADIANS);
	sinRY = Math.sin(angle * TO_RADIANS);
	
	var tempz = this.z;; 
	var tempx = this.x; 

	this.x= (tempx*cosRY)+(tempz*sinRY);
	this.z= (tempx*-sinRY)+(tempz*cosRY);


}

THREE.Vector3.prototype.rotateX = function(angle){
					
	cosRY = Math.cos(angle * TO_RADIANS);
	sinRY = Math.sin(angle * TO_RADIANS);
	
	var tempz = this.z;; 
	var tempy = this.y; 

	this.y= (tempy*cosRY)+(tempz*sinRY);
	this.z= (tempy*-sinRY)+(tempz*cosRY);


}

THREE.Vector3.prototype.rotateZ = function(angle){
					
	cosRY = Math.cos(angle * TO_RADIANS);
	sinRY = Math.sin(angle * TO_RADIANS);
	
	var tempx = this.x;; 
	var tempy = this.y; 

	this.y= (tempy*cosRY)+(tempx*sinRY);
	this.x= (tempy*-sinRY)+(tempx*cosRY);
}



// returns a random number between the two limits provided 
function randomRange(min, max)
{
	return ((Math.random()*(max-min)) + min); 
}


var resizeDebounceTimer = null;
function onWindowResize() {
  clearTimeout(resizeDebounceTimer);
  resizeDebounceTimer = setTimeout(onWindowResizeDebounced, 500);
}

function onWindowResizeDebounced() {
  SCREEN_WIDTH = window.innerWidth;
  SCREEN_HEIGHT = window.innerHeight;
  windowHalfX = window.innerWidth / 2;
  windowHalfY = window.innerHeight / 2;
  
  // update camera, renderer and particle positions
  camera.aspect = SCREEN_WIDTH / SCREEN_HEIGHT;
  camera.updateProjectionMatrix();
  renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
  for (var i = 0; i < particles.length; i++) { 
    particles[i].position.x = getRandomInt(-SCREEN_WIDTH/2, SCREEN_WIDTH/2);
    particles[i].position.y = getRandomInt(-SCREEN_HEIGHT/2, SCREEN_HEIGHT/2);
    particles[i].position.z = Math.random() * 2000 - 1000;
	}
}

var SCREEN_WIDTH = window.innerWidth;
var SCREEN_HEIGHT = window.innerHeight;
var windowHalfX = window.innerWidth / 2;
var windowHalfY = window.innerHeight / 2;

var container;
var particle;

var camera;
var scene;
var renderer;

var mouseX = 0;
var mouseY = 0;

var isRunning = false;

var particles = []; 
var particleImage = new Image();//THREE.ImageUtils.loadTexture( "img/ParticleSmoke.png" );
particleImage.src = "data:image/png;base64,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"; 

		/**
 * Returns a random integer between min (inclusive) and max (inclusive)
 * Using Math.round() will give you a non-uniform distribution!
 */
function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}
		
			function init() {

				container = document.createElement('div');
				document.body.appendChild(container);

				camera = new THREE.PerspectiveCamera( 80, SCREEN_WIDTH / SCREEN_HEIGHT, 1, 10000 );
				camera.position.z = 1000;

				scene = new THREE.Scene();
				scene.add(camera);
					
				renderer = new THREE.CanvasRenderer();
				renderer.setSize(SCREEN_WIDTH, SCREEN_HEIGHT);
				var material = new THREE.ParticleBasicMaterial( { map: new THREE.Texture(particleImage) } );
					
				for (var i = 0; i < 200; i++) { 
					particle = new Particle3D( material);
					particle.position.x = getRandomInt(-SCREEN_WIDTH/2, SCREEN_WIDTH/2);
					particle.position.y = getRandomInt(-SCREEN_HEIGHT/2, SCREEN_HEIGHT/2);
					particle.position.z = Math.random() * 2000 - 1000;
					particle.scale.x = particle.scale.y = 0.5; //1;
					scene.add( particle );
					
					particles.push(particle); 
				}

				container.appendChild( renderer.domElement );

	
				document.addEventListener( 'mousemove', onDocumentMouseMove, false );
				document.addEventListener( 'touchstart', onDocumentTouchStart, false );
				document.addEventListener( 'touchmove', onDocumentTouchMove, false );
				
				//setInterval( loop, 1000 / 60 );
        isRunning = true;
        loop();
			}
			
			function onDocumentMouseMove( event ) {

				mouseX = event.clientX - windowHalfX;
				mouseY = event.clientY - windowHalfY;
			}

			function onDocumentTouchStart( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}

			function onDocumentTouchMove( event ) {

				if ( event.touches.length == 1 ) {

					event.preventDefault();

					mouseX = event.touches[ 0 ].pageX - windowHalfX;
					mouseY = event.touches[ 0 ].pageY - windowHalfY;
				}
			}

			//

			function loop() {
        if (isRunning) {
          requestAnimationFrame(loop); 
        }

			for(var i = 0; i<particles.length; i++)
				{

					var particle = particles[i]; 
					particle.updatePhysics(); 
	
					with(particle.position)
					{
						if(y<-windowHalfY) y+=SCREEN_HEIGHT;
            
						if(x>windowHalfX) x-=SCREEN_WIDTH; 
						else if(x<-windowHalfX) x+=SCREEN_WIDTH; 
            
						if(z>1000) z-=2000; 
						else if(z<-1000) z+=2000; 
					}				
				}
			
				camera.position.x += ( mouseX - camera.position.x ) * 0.05;
				camera.position.y += ( - mouseY - camera.position.y ) * 0.05;
				camera.lookAt(scene.position); 

				renderer.render( scene, camera );

				
			}

init();
window.addEventListener('resize', onWindowResize, false);

Comments