neve_natal_site_opencart.txt

7/12/2017

//colocar neve para o natal numa loja opencart



//depois de inspect element para ver a class da zona onde quero implementar um gif de neve no fundo, tenho as seguintes classes:
    -new-space
    -container

//estes estão alojados no ficheiro em:
//        catalog/view/theme/custom_theme/template/common/header.tpl

//entre o new-space e o body criar um div, linha 270:
    <div id="snow"></div>

//criar um style nesta pagina para a neve
    // linha 11:
    <style>

    #snow{
    	position: fixed;
    }

    .snowflake {
    position: absolute;
    display: block;
    position: absolute;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -ms-transform: translateZ(0);
    -o-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
    background-image: -webkit-radial-gradient(
    	center,
    	circle farthest-corner,
    	rgba(200, 200, 200, 1) 40%,
    	rgba(255, 255, 255, 0) 100%
    );
    background-image: -moz-radial-gradient(
    	center,
    	circle farthest-corner,
    	rgba(200, 200, 200, 1) 40%,
    	rgba(255, 255, 255, 0) 100%
    );
    background-image: -ms-radial-gradient(
    	center,
    	circle farthest-corner,
    	rgba(200, 200, 200, 1) 40%,
    	rgba(255, 255, 255, 0) 100%
    );
    background-image: radial-gradient(
    	center,
    	circle farthest-corner,
    	rgba(200, 200, 200, 1) 40%,
    	rgba(255, 255, 255, 0) 100%
    );
    }
    </style>


//criar um script js, linha 140
<script>
var Snowflake = (function() {

	var flakes;
	var flakesTotal = 250;
	var wind = 0;
	var mouseX;
	var mouseY;

	function Snowflake(size, x, y, vx, vy) {
		this.size = size;
		this.x = x;
		this.y = y;
		this.vx = vx;
		this.vy = vy;
		this.hit = false;
		this.melt = false;
		this.div = document.createElement('div');
		this.div.classList.add('snowflake');
		this.div.style.width = this.size + 'px';
		this.div.style.height = this.size + 'px';
	}

	Snowflake.prototype.move = function() {
		if (this.hit) {
			if (Math.random() > 0.995) this.melt = true;
		} else {
			this.x += this.vx + Math.min(Math.max(wind, -10), 10);
			this.y += this.vy;
		}

		// Wrap the snowflake to within the bounds of the page
		if (this.x > window.innerWidth + this.size) {
			this.x -= window.innerWidth + this.size;
		}

		if (this.x < -this.size) {
			this.x += window.innerWidth + this.size;
		}

/*
		if (this.y > window.innerHeight + this.size) {
			this.x = Math.random() * window.innerWidth;
			this.y -= window.innerHeight + this.size * 2;
			this.melt = false;
		}
		*/


		if (this.y > window.innerHeight + this.size) {
			this.x = Math.random() * window.innerWidth;
			this.y -= window.innerHeight + this.size * 50;
			this.melt = false;
		}

		var dx = mouseX - this.x;
		var dy = mouseY - this.y;
		this.hit = !this.melt && this.y < mouseY && dx * dx + dy * dy < 2400;

	};

	Snowflake.prototype.draw = function() {
		this.div.style.transform =
		this.div.style.MozTransform =
		this.div.style.webkitTransform =
			'translate3d(' + this.x + 'px' + ',' + this.y + 'px,0)';
	};

	function update() {
		for (var i = flakes.length; i--; ) {
			var flake = flakes[i];
			flake.move();
			flake.draw();
		}
		requestAnimationFrame(update);
	}

	Snowflake.init = function(container) {
		flakes = [];

		for (var i = flakesTotal; i--; ) {
			var size = (Math.random() + 0.2) * 12 + 1;
			var flake = new Snowflake(
				size,
				Math.random() * window.innerWidth,
				Math.random() * window.innerHeight,
				Math.random() - 0.5,
				size * 0.15
			);
			container.appendChild(flake.div);
			flakes.push(flake);
		}

    container.onmousemove = function(event) {
	  	mouseX = event.clientX;
  		mouseY = event.clientY;
  		wind = (mouseX - window.innerWidth / 2) / window.innerWidth * 6;
  	};

	  container.ontouchstart = function(event) {
		  mouseX = event.targetTouches[0].clientX;
		  mouseY = event.targetTouches[0].clientY;
		  event.preventDefault();
  	};

  	window.ondeviceorientation = function(event) {
	  	if (event) {
		  	wind = event.gamma / 10;
  		}
  	};

  	update();
	};

	return Snowflake;

}());

window.onload = function() {
  setTimeout(function() {
  	Snowflake.init(document.getElementById('snow'));
  }, 500);
}
</script>