Christmas Tree

by 蔡 育曄

HTML

<div class="snow-container">
  <img src="https://i.imgur.com/YdY7lS4.png" style="position:absolute;top:10vw;left:30vw;width:30vw">
  <div class="snow foreground"></div>
  <div class="snow foreground layered"></div>
  <div class="snow middleground"></div>
  <div class="snow middleground layered"></div>
  <div class="snow background"></div>
  <div class="snow background layered"></div>
</div>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<button id='switch'>off</button>
<button id='diffculty'>complex</button>

CSS

.snow-container {
		position: absolute;
		height: 100%;
		width: 100%;
		top: 0;
		left: 0;
		overflow: hidden;
		z-index: -1;
		background-color: #262626;
	}

	.snow {
		display: block;
		position: absolute;
		z-index: 3;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		pointer-events: none;
		-webkit-transform: translate3d(0, -100%, 0);
		transform: translate3d(0, -100%, 0);
		-webkit-animation: snow linear infinite;
		animation: snow linear infinite;
	}
	.snow.foreground {
		background-image: url("https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-large-075d267ecbc42e3564c8ed43516dd557.png");
		-webkit-animation-duration: 15s;
		animation-duration: 15s;
		z-index: 5;
	}
	.snow.foreground.layered {
		-webkit-animation-delay: 7.5s;
		animation-delay: 7.5s;
	}
	.snow.middleground {
		background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-medium-0b8a5e0732315b68e1f54185be7a1ad9.png);
		-webkit-animation-duration: 20s;
		animation-duration: 20s;
		z-index: 3;
	}
	.snow.middleground.layered {
		-webkit-animation-delay: 10s;
		animation-delay: 10s;
	}
	.snow.background {
		background-image: url(https://dl6rt3mwcjzxg.cloudfront.net/assets/snow/snow-small-1ecd03b1fce08c24e064ff8c0a72c519.png);
		-webkit-animation-duration: 30s;
		animation-duration: 30s;
		z-index: -2;
	}
	.snow.background.layered {
		-webkit-animation-delay: 15s;
		animation-delay: 15s;
	}

	@-webkit-keyframes snow {
		0% {
			-webkit-transform: translate3d(0, -100%, 0);
			transform: translate3d(0, -100%, 0);
		}
		100% {
			-webkit-transform: translate3d(15%, 100%, 0);
			transform: translate3d(15%, 100%, 0);
		}
	}

	@keyframes snow {
	0% {
		-webkit-transform: translate3d(0, -100%, 0);
			transform: translate3d(0, -100%, 0);
		}
		100% {
			-webkit-transform: translate3d(15%, 100%, 0);
			transform: translate3d(15%, 100%, 0);
		}
	}

JavaScript

class Light { 
  constructor() {  
    // create/append div dynamically
    // https://stackoverflow.com/questions/14004117/create-div-and-append-div-dynamically
    this.element = document.createElement ('div');
    //this = iDiv;
    this.element.id = 'light';
    this.saturation = 100;
    this.mode = 1;
    // set element style attribute
    //https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style
    //this.element.style.cssText = "position:absolute;width:20px;height:20px;border-radius:15px;z-index:1"; 
    //this.element.style.top = '10vw';
    //this.element.style.left = '30vw';
    // CSS color property: https://www.w3schools.com/cssref/pr_text_color.asp
    // hsl: https://www.w3schools.com/colors/colors_hsl.asp
    this.element.style.cssText = "position:absolute;width:20px;height:20px;border-radius:15px;z-index:1"; 
    this.element.style.background = "hsl(89, 100%, 70%)";
    document.getElementsByTagName('body')[0].appendChild(this.element);
  }
  changeColor() {
    // https://stackoverflow.com/questions/45147661/javascript-recursion-within-a-class/45147713
    var self = this;
    var hue = Math.random()*300;
    self.element.style.background = "hsl(" + hue + ", " + this.saturation +"%, 70%)";  
    if(this.mode) {
    	this.time =  500;
    } else {
    	this.time =  Math.random()*2000;
    }
    	
    setTimeout (function() { self.changeColor() } , this.time);
    // setTimeout ( self.changeColor , 1000);  // why this is not working ...
  }
  positionSet(x,y) {
    this.element.style.top =  x +'vw';
    this.element.style.left = y + 'vw';
  }
}
var lights = [],type = true, type2 = true;
////////////////////////////////
init();

function init() {
	lights.push(new Light());
  lights[lights.length-1].positionSet(18,43);
  lights.push(new Light());
  lights[lights.length-1].positionSet(21,41);
  lights.push(new Light());
  lights[lights.length-1].positionSet(24,44);
  lights.push( new Light());
 ...