A present for coach Lee

A Christmas present for my old coach Lee.

by William Green

HTML

<div id="projectContainer">
  <div id="scrollButtonUp" class="scrollIndicator">
    <span style="font-size:4vh; color:#333; line-height:4vh;">&#x21d1;</span>
    <br> Scroll Up
  </div>
  <div id="projectContainer">
    <div id="messageOne" class="message" style="display:block;">
    <div class="messageContent">
      <div class="superTextContainer">
        <div class="textContainer">
          Dear Lee
        </div>
        <div id="messageOneBow">
          <div></div>
          <div></div>
        </div>
      </div>
      </div>
    </div>
    <div id="messageTwo" class="message">
      <div class="superTextContainer">
        <div class="textContainer" style="font-size:7vh;">
          Thank you for being my coach for over two years!
        </div>
      </div>
    </div>
  <div id="messageThree" class="message">
    <div class="superTextContainer">
      <div class="textContainer" style="font-size:7vh; padding-left:2vw; padding-right:2vw;">
      You are <span style="font-weight:400; color:#333;">one-of-a-kind</span> and you are missed.
      </div>
    </div>
  </div>
  <div id="messageFour" class="message">
    <div class="superTextContainer">
      <div class="textContainer" style="font-size:7vh; padding-left:2vw; padding-right:2vw;">
        Thank you for encouraging me and the rest of the team to go out and swim to the best of our given ability.
      </div>
    </div>
  </div>
  <div id="messageFive" class="message">
    <div class="superTextContainer">
      <div class="textContainer" style="color:#ff0000; font-weight:400;">
        Merry Christmas!
      </div>
    </div>
  </div>
  <div id="messageSix" class="message">
    <div class="superTextContainer">
      <div class="textContainer" style="font-size:50vh; line-height:50vh;">
        <img style="-o-transform:translate(0%,-25%);-moz-transform:translate(0%,-25%);-webkit-transform:translate(0%,-25%);-ms-transform:translate(0%,-25%);transform:translate(0%,-25%);"...

CSS

@import url(https://fonts.googleapis.com/css?family=Raleway:100,400);
@import url(https://fonts.googleapis.com/css?family=Lato:100,400);
html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #333;
  overflow: hidden;
}

html{
  display:none;
  opacity:0;
  transition:opacity 1s ease;
}

#projectContainer {
  width: 100%;
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  position: absolute;
}

#projectContainer * {
  -o-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -webkit-transition: all .7s ease;
  -ms-transition: all .7s ease;
  transition: all .7s ease;
}

.message {
  -o-transition: transform .7s, left 2s ease, block 0s;
  -moz-transition: transform .7s, left 2s ease, block 0s;
  -webkit-transition: transform .7s, left 2s, block 0s;
  -ms-transition: transform .7s, left 2s, block 0s;
  transition: transform .7s, left 2s, block 0s;
  color: #333;
  padding-top: 8vh;
  padding-bottom: 8vh;
  /*padding-left:1vw;
  padding-right:1vw;*/
  -o-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  word-wrap: break-word;
  overflow:hidden;
  width: 100%;
  height: 100%;
  background-color: #fff;
  position: absolute;
}

.messageContent{
  width:100%;
  height:100%;
  background-color:transparent;
  position:relative;
  z-index:10000;
  overflow:auto;
}

* {
  font-family: 'Raleway', sans-serif;
  /*font-family: 'Lato', sans-serif;*/
  font-weight: 100;
  color: #fff;
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000;
  -webkit-font-smoothing: subpixel-antialiased;
}


/*specific message styles*/

.superTextContainer {
  position: absolute;
  top: 50%;
  -o-transform: translate(0%, -50%);
  -moz-transform: translate(0%, -50%);
  -webkit-transform: translate(0%, -50%);
  -ms-transform: translate(0%, -50%);
  transform: translate(0%, -50%);
  width: 100%;
  /*padding-right:2vw;*/
 ...

JavaScript

window.addEventListener('load', function() {
	var superContainer = document.documentElement;
  var scrollIndicatorTransitionTime = 1000; //based on transition time of the scroll indicator labels
  
  createSnowFlakes();
  function createSnowFlakes(){
  	var xLimit = Math.floor(window.innerWidth/100)*10;
    var yLimit = Math.floor(window.innerHeight/20)*10;
    var snowflakeContainers = document.getElementsByClassName('snowFlakes');
    var snowflakeContainers = document.getElementsByClassName('snowFlakes');
    for(var i = 0; i < snowflakeContainers.length; i++){
    	snowflakeContainers[i].children[0].innerHTML = '';
    }
    for(var i = 0; i < snowflakeContainers.length; i++){
    	var currentContainer = snowflakeContainers[i];
      var currentYContainer = snowflakeContainers[i].getElementsByClassName('snowflakeYContainer')[0];
      for(var k = 0; k < yLimit; k++){
      	//y snow flakes
        var snowflake = document.createElement('div');
        snowflake.className = 'snowflake';
        var dimensions = getRandomDimensions();
        snowflake.style.width = dimensions;
        snowflake.style.height = dimensions;
        snowflake.style.top = getRandomYPosition();
        snowflake.style.left = getRandomXPosition();
       	currentYContainer.appendChild(snowflake);
      }
    }
    function getRandomDimensions(){
    	return Math.floor(Math.random()*(6 - 2 +1))+2+'px';
    }
    function getRandomYPosition(){
    	return Math.floor(Math.random()*10*window.innerHeight)+'px';
    }
    function getRandomXPosition(){
    	return Math.floor(Math.random()*window.innerWidth)+'px';
    }
  }
  window.setInterval(function(){
    var snowflakeYContainers = document.getElementsByClassName('snowflakeYContainer');
    var randomYContainer = snowflakeYContainers[Math.floor(Math.random()*snowflakeYContainers.length)];
    randomYContainer.style.left = Math.floor(Math.random()*30)+'vw';
  },500);

	//load background audio
  //Google Source:...