Lights by Katerina Boronina

lights.css

@@ -0,0 +1,80 @@
+#lights {
+	width: 200px;
+	margin: 100px auto;
+	height: 400px;
+	box-sizing: border-box;
+	border: 1px solid #ddd;
+	background: #eeeeee;
+	z-index: 10;
+}
+
+.light {
+	width: 100px;
+	height: 100px;
+	border-radius: 50%;
+	border: 1px solid #aaaaaa;
+	background: #bbbbbb;
+    background: -moz-radial-gradient(50% 25%, circle, #fefefe 0%, #bbbbbb 100%);
+    background: -webkit-radial-gradient(50% 25%, circle, #fefefe 0%, #bbbbbb 100%);
+    background: -o-radial-gradient(50% 25%, circle, #fefefe 0%, #bbbbbb 100%);
+    background: -ms-radial-gradient(50% 25%, circle, #fefefe 0%, #bbbbbb 100%);
+    background: radial-gradient(50% 25%, circle, #fefefe 0%, #bbbbbb 100%);
+	margin: 25px auto;
+	box-sizing: border-box;
+}
+
+.light#ylw {
+	top: 200px;
+}
+
+.light#grn {
+	top: 300px;
+}
+
+#lights.red > .light#red {
+	background: #ff2020;
+    background: -moz-radial-gradient(50% 25%, circle, #fefefe 0%, #ff2020 100%);
+    background: -webkit-radial-gradient(50% 25%, circle, #fefefe 0%, #ff2020 100%);
+    background: -o-radial-gradient(50% 25%, circle, #fefefe 0%, #ff2020 100%);
+    background: -ms-radial-gradient(50% 25%, circle, #fefefe 0%, #ff2020 100%);
+    background: radial-gradient(50% 25%, circle, #fefefe 0%, #ff2020 100%);
+}
+
+#lights.yellow > .light#ylw {
+	background: #f7df10;
+    background: -moz-radial-gradient(50% 25%, circle, #fefefe 0%, #f7df10 100%);
+    background: -webkit-radial-gradient(50% 25%, circle, #fefefe 0%, #f7df10 100%);
+    background: -o-radial-gradient(50% 25%, circle, #fefefe 0%, #f7df10 100%);
+    background: -ms-radial-gradient(50% 25%, circle, #fefefe 0%, #f7df10 100%);
+    background: radial-gradient(50% 25%, circle, #fefefe 0%, #f7df10 100%);
+}
+
+#lights.green > .light#grn {
+	background: #08a008;
+    background: -moz-radial-gradient(50% 25%, circle, #fefefe 0%, #08a008 100%);
+    background: -webkit-radial-gradient(50% 25%, circle, #fefefe 0%, #08a008 100%);
+    background: -o-radial-gradient(50% 25%, circle, #fefefe 0%, #08a008 100%);
+    background: -ms-radial-gradient(50% 25%, circle, #fefefe 0%, #08a008 100%);
+    background: radial-gradient(50% 25%, circle, #fefefe 0%, #08a008 100%);
+}
+
+.tram {
+	width: 200px;
+	height: 135px;
+	/*background: url("tram.png");
+	background-size: cover;*/
+	position: absolute;
+	top: 365px;
+	left: 0px;
+	z-index: 1;
+	cursor: pointer;
+}
+
+.tram.leaves {
+	opacity: 0;
+	transition: opacity 3s ease-in 0.5s;
+	-webkit-transition: opacity 3s ease-in 0.5s;
+	-o-transition: opacity 3s ease-in 0.5s;
+	-moz-transition: opacity 3s ease-in 0.5s;;
+
+}

lights.js

@@ -0,0 +1,87 @@
+Object.prototype.on = function (eventName, handler) {
+	if (!this._handlers)
+		this._handlers = [];
+	if (!this._handlers[eventName])
+		this._handlers[eventName] = handler;
+};
+
+Object.prototype.off = function (eventName) {
+	if (!this._handlers)
+		this._handlers = [];
+	if (!this._handlers[eventName])
+		return;
+	this._handlers[eventName] = null;
+};
+
+Object.prototype.trigger = function (eventName) {
+	if (!this._handlers)
+		this._handlers = [];
+	if (!this._handlers[eventName])
+		return;
+	this._handlers[eventName].call(arguments, 1);
+};
+
+function Lights(config) {
+	this.state = null;
+	this._timeout = null;
+	this._config = config;
+	this._elem = document.getElementById(config.blockId);
+
+	this.toRed = function (time) {
+		if (this._timeout)
+			clearTimeout(this._timeout);
+		this.state = "red";
+		this._elem.className = this.state;
+		this._timeout = setTimeout(function () {
+			this.toYellow();
+		}.bind(this), (time ? time : this._config.red) * 1000);
+	};
+
+	this.toYellow = function (time) {
+		if (this._timeout)
+			clearTimeout(this._timeout);
+		this.state = "yellow";
+		this._elem.className = this.state;
+		this._timeout = setTimeout(function () {
+			this.toGreen();
+		}.bind(this), (time ? time : this._config.yellow) * 1000);
+	};
+
+	this.toGreen = function (time) {
+		if (this._timeout)
+			clearTimeout(this._timeout);
+		this.state = "green";
+		this._elem.className = this.state;
+		this._timeout = setTimeout(function () {
+			this.toRed();
+		}.bind(this), (time ? time : this._config.green) * 1000);
+	};
+
+	this.start = function () {
+		if (this._timeout)
+			clearTimeout(this._timeout);
+		this.toRed();
+	};
+}
+
+function tramAnimation(v, delay, duration, to, durationLeft) {
+	duration -= delay;
+	var x0 = document.getElementsByClassName("tram")[0].getBoundingClientRect().left;
+	document.getElementsByClassName("tram")[0].style.left = (x0 + v*1) + "px";
+	if (duration > 0)
+		setTimeout(function() {
+			tramAnimation(v, delay, duration, to);
+		}, delay);
+	else
+		if (to) {
+			document.getElementsByClassName("tram")[0].className += " leaves"
+			setTimeout(function() {
+				tramAnimation(v, delay, 4000, false);
+			}, delay);
+		}
+		else {
+			document.getElementsByClassName("tram")[0].className = "tram";
+			document.getElementsByClassName("tram")[0].style.left = "0px";
+			document.getElementsByClassName("tram")[0].onclick = function () { lights.trigger('tram'); };
+		}
+}

svetofor.html

@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<title>����������� � ����������</title>
+	<link rel="stylesheet" type="text/css" href="lights.css">
+	<script type="text/javascript" src="lights.js"></script>
+</head>
+<body>
+	<img class="tram" onclick="lights.trigger('tram')" src="tram.png" />
+	<div id="lights">
+		<div class="light" id="red"></div>
+		<div class="light" id="ylw"></div>
+		<div class="light" id="grn"></div>
+	</div>
+	<script type="text/javascript">
+		var config = {
+			blockId: 'lights',
+			red: 2,
+			yellow: 0.3,	
+			green: 1
+		};
+
+		var lights = new Lights(config);
+		lights.on("tram", function() {
+			document.getElementsByClassName("tram")[0].onclick = function() {};
+			var duration = 3000;
+			var s = (window.innerWidth - 600) / 2;
+			var delay = 30;
+			var v = (s / (duration / delay)).toFixed();
+			setTimeout(function () {
+				lights.toGreen(10);
+			}, duration);
+			tramAnimation(v, delay, duration, true);
+		});
+		lights.start();
+	</script>
+</body>
+</html>