EffectHub.com: your best source for gaming

Recommendation

More Effects...

var WIDTH = 1024,
    HEIGHT = 720;
    console.log('oh');

var MainView = Backbone.View.extend({
    initialize: function () {
	
		var i,
			dotGroup,
			animal;
			
        Math.seedrandom('fish');

this.state = 0;
		this.dots = [];
		this.animals = [];
		this.trees = [];
		this.treeFaces = [];
		this.s = Snap(document.getElementsByTagName('svg')[0]);
		
		//dot animals
		dotGroup = this.s.select('#dots');
		this.dots = dotGroup.selectAll('*');
		
		for (i = 0; i < this.dots.length; i += 1) {
			animal = new PathAnimal({s: this.s, dot: this.dots[i]});
			this.animals.push(animal);
		}
		
		//sort depth
		for (i = 0; i < this.animals.length; i += 1) {
			if (i > 0) {
				var a = this.animals[i - 1].el,
					b = this.animals[i].el;
				
				if (a.matrix.split().dy > b.matrix.split().dy) {
					a.before(b);
				}
			}
		}
		
		//trees
		this.trees = this.s.selectAll('.tree');
		for (i = 0; i < this.trees.length; i += 1) {
			var tree = new TreeFace({s: this.s, tree: this.trees[i]});
			this.treeFaces.push(tree);
		}
		
		this.cube = document.getElementById('cube');
		var $cubeHitArea = document.getElementById('cube-hitarea');
		$cubeHitArea.addEventListener('click', this.handle_ROLL.bind(this));
		
		setTimeout(this.animate.bind(this), 3000);
    },

handle_ROLL: function () {
		this.number = Math.ceil(Math.random() * 6);
		if (this.number == 6) {
			rx = 45;
			ry = 180;
			rz = -45;
		} else if (this.number == 5) {
			rx = 50;
			ry = 0;
			rz = 50;			
		} else if (this.number == 4) {
			rx = -45;
			ry = 50;
			rz = 90;
		} else if (this.number == 3) {
			rx = -45;
			ry = 225;
			rz = -90;
		} else if (this.number == 2) {
			rx = -45;
			ry = 50;
			rz = 0;
		} else if (this.number == 1) {
			rx = 145;
			ry = -45;
			rz = 0;
		} else {
			rx = -90;
			ry = 0;
			rz = 0;
		}
		
		this.cube.style['webkitTransform'] = 'rotateX(' + rx + 'deg) rotateY(' + ry + 'deg) rotateZ(' + rz + 'deg)';
		this.cube.style['MozTransform'] = 'rotateX(' + rx + 'deg) rotateY(' + ry + 'deg) rotateZ(' + rz + 'deg)';		
	},
	
	trigger: function () {
		this.state += 1;//this.number;
		var animal = this.animals[this.state];
		animal.handle_MOUSEOVER();
		
	},

animate: function () {
		var tree = this.treeFaces[Math.floor(Math.random() * this.treeFaces.length)];
		tree.handle_MOUSEOVER();
		
		setTimeout(function () {
			tree.handle_MOUSEOUT();
		}.bind(this), 3000);
		
		setTimeout(this.animate.bind(this), 3000);
	}
});

var main = new MainView();

CSS

body{
				margin: 0;
				padding: 0;
				background: #b7bf76;
				overflow: hidden;
			}
			
			svg{
				display: block;
				margin: auto;
				-webkit-transform-origin: top center;
				-webkit-transform: scale(1.5);
				-moz-transform-origin: top center;
				-moz-transform: scale(1.5);
			}
			
			.hit-area{
				cursor: pointer;
			}
			
			.face .mouth{
				-webkit-transform-origin: 0px 4px;
				-webkit-transition: -webkit-transform .4s;
				-webkit-transform: scale(1, 0);
				-moz-transform-origin: 0px 4px;
				-moz-transition: -webkit-transform .4s;
				-moz-transform: scale(1, 0);
			}
			
			.face .eye.right{
				-webkit-transform-origin: 8px -4px;
				-moz-transform-origin: 8px -4px;
			}
			
			.face .eye.left{
				-webkit-transform-origin: -8px -4px;
				-moz-transform-origin: -8px -4px;
			}
			
			.face .eye{
				-webkit-transition: -webkit-transform .2s;
				-webkit-transform: scale(1, 0);
				-moz-transition: -webkit-transform .2s;
				-moz-transform: scale(1, 0);
			}
			
			@-webkit-keyframes breeze{
				0% {
					-webkit-transform: rotate(0deg);
				}
				50% {
					-webkit-transform: rotate(10deg);
				}
				100% {
					-webkit-transform: rotate(0deg);
				}
			}
			
			@-moz-keyframes breeze{
				0% {
					-moz-transform: rotate(0deg);
				}
				50% {
					-moz-transform: rotate(10deg);
				}
				100% {
					-moz-transform: rotate(0deg);
				}
			}
			
			@-webkit-keyframes blink{
				0% {
					-webkit-transform: scale(1, 0);
				}
				10% {
					-webkit-transform: scale(1, 1);
				}
				90% {
					-webkit-transform: scale(1, 1);
				}
				100% {
					-webkit-transform: scale(1, 0);
				}
			}
			
			@-moz-keyframes blink{
				0% {
					-moz-transform: scale(1, 0);
				}
				10% {
					-moz-transform: scale(1, 1);
				}
				90% {
					-moz-transform: scale(1, 1);
				}
				100% {
					-moz-transform: scale(1, 0);
				}
			}
			
			@-webkit-keyframes talk{
				0% {
					-webkit-transform: scale(1, 0);
				}
				50% {
					-webkit-transform: scale(1, 1);
				}
				100% {
					-webkit-transform: scale(1, 0);
				}
			}
			
			@-moz-keyframes talk{
				0% {
					-moz-transform: scale(1, 0);
				}
				50% {
					-moz-transform: scale(1, 1);
				}
				100% {
					-moz-transform: scale(1, 0);
				}
			}
			
			.tree{
				-webkit-transform-origin: 50% 100%;
				-webkit-animation: breeze 2s ease-out infinite;
				-moz-transform-origin: 50% bottom;
				/*-moz-animation: breeze 2s ease-out infinite;*/
			}
			
			.tree .face.animating .eye{
				-webkit-transform: scale(1, 1);
				-moz-transform: scale(1, 1);
			}
			
			.face.animating .eye{
				-webkit-animation: blink 5s infinite;
				-moz-animation: blink 5s infinite;
			}
			
			.face.animating .mouth{
				-webkit-animation: talk 1s infinite;
				-moz-animation: talk 1s infinite;
			}
			
			#cube-hitarea{
				position: absolute;
				top: 100px;
				left: 100px;
				width: 125px;
				height: 125px;	
				cursor: pointer;		
			}
			
			#cube{
				position: absolute;
				left: 25px;
				top: 25px;
				width: 74px;
				height: 74px;
				z-index: 100;
				backface-visibility: visible;
				pointer-events: none;
				-webkit-transform-style: preserve-3d;
				-webkit-transform-origin: center center;
				-webkit-backface-visibility: visible;
				-webkit-transform: rotateX(-45deg) rotateY(50deg);
				-webkit-transition: -webkit-transform 1s;
				-moz-transform-style: preserve-3d;
				-moz-transform-origin: center center;
				-moz-backface-visibility: visible;
				-moz-transform: rotateX(-45deg) rotateY(50deg);
				-moz-transition: -moz-transform 1s;
			}
			
			.side{
				position: absolute;
				top: 0;
				left: 0;
				width: 74px;
				height: 74px;
				pointer-events: none;
				backface-visibility: visible;
				-webkit-transform-origin: center center;
				-webkit-backface-visibility: visible;
				-moz-transform-origin: center center;
				-moz-backface-visibility: visible;
			}
			
			.side *{
				pointer-events: none;
			}
			
			#cube .side:nth-child(1) {
				-webkit-transform: translateY(37px) rotateX(90deg);
				-moz-transform: translateY(37px) rotateX(90deg);
			}
			
			#cube .side:nth-child(2) {
				-webkit-transform: translateY(-37px) rotateX(-90deg);
				-moz-transform: translateY(-37px) rotateX(-90deg);
				
			}
		
			#cube .side:nth-child(3) {				
				-webkit-transform: translateX(37px) rotateY(-90deg);
				-moz-transform: translateX(37px) rotateY(-90deg);
				
			}
			
			#cube .side:nth-child(4) {				
				-webkit-transform: translateX(-37px) rotateY(-90deg);
				-moz-transform: translateX(-37px) rotateY(-90deg);
			}
			
			#cube .side:nth-child(5) {	
				-webkit-transform: translateZ(37px) rotateZ(90deg);
				-moz-transform: translateZ(37px) rotateZ(90deg);
			}
			
			#cube .side:nth-child(6) {			
				-webkit-transform: translateZ(-37px) rotateZ(0deg);
				-moz-transform: translateZ(-37px) rotateZ(0deg);
			}

HTML

Recommendation

Join Effecthub.com