slider+app+load

css/protector.css

@@ -135,6 +135,7 @@ h1{ text-transform: uppercase; }
 #switcher div[id="0"] { color:#3696BF ;}
 .ciudades { text-align:left; width:150px; padding:0px 5px; display:inline-table; }
 
+.pac-container { margin-top: -75px !important; }
 #image-container { width:39%; text-align:center; position:relative;height:700px;}
 @media screen and (min-width:1140px){
 	#prod-description{ bottom: 200px !important; }
@@ -142,9 +143,13 @@ h1{ text-transform: uppercase; }
 }
 @media screen and (max-width:1140px){
 	#prod-description{ bottom: 200px !important; width:50%; height:250px; }
+	#direccion { width:70%; }
 	
 }
 @media screen and (max-width:900px){
 	#prod-description{  width:50%; height:270px; }
+	#direccion { width:90%; }
 
 }
+
+#banner{ margin-top:0px!important;}

js/anim.js

@@ -0,0 +1,63 @@
+// first add raf shim
+// http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/
+window.requestAnimFrame = (function(){
+  return  window.requestAnimationFrame       ||
+          window.webkitRequestAnimationFrame ||
+          window.mozRequestAnimationFrame    ||
+          function( callback ){
+            window.setTimeout(callback, 1000 / 60);
+          };
+})();
+
+// main function
+function scrollToY(scrollTargetY, speed, easing) {
+    // scrollTargetY: the target scrollY property of the window
+    // speed: time in pixels per second
+    // easing: easing equation to use
+
+    var scrollY = window.scrollY,
+        scrollTargetY = scrollTargetY || 0,
+        speed = speed || 2000,
+        easing = easing || 'easeOutSine',
+        currentTime = 0;
+
+    // min time .1, max time .8 seconds
+    var time = Math.max(.1, Math.min(Math.abs(scrollY - scrollTargetY) / speed, .8));
+
+    // easing equations from https://github.com/danro/easing-js/blob/master/easing.js
+    var PI_D2 = Math.PI / 2,
+        easingEquations = {
+            easeOutSine: function (pos) {
+                return Math.sin(pos * (Math.PI / 2));
+            },
+            easeInOutSine: function (pos) {
+                return (-0.5 * (Math.cos(Math.PI * pos) - 1));
+            },
+            easeInOutQuint: function (pos) {
+                if ((pos /= 0.5) < 1) {
+                    return 0.5 * Math.pow(pos, 5);
+                }
+                return 0.5 * (Math.pow((pos - 2), 5) + 2);
+            }
+        };
+
+    // add animation loop
+    function tick() {
+        currentTime += 1 / 60;
+
+        var p = currentTime / time;
+        var t = easingEquations[easing](p);
+
+        if (p < 1) {
+            requestAnimFrame(tick);
+
+            window.scrollTo(0, scrollY + ((scrollTargetY - scrollY) * t));
+        } else {
+            console.log('scroll done');
+            window.scrollTo(0, scrollTargetY);
+        }
+    }
+
+    // call it once to get started
+    tick();
+}

js/aplicacion.js

@@ -1,4 +1,4 @@
-window.onload=function() {
+function app() {
 		var req = new XMLHttpRequest();
 		var result = document.getElementById("result");
 		var direccion = document.getElementById("direccion");
@@ -48,6 +48,7 @@ window.onload=function() {
 			geocoder = new google.maps.Geocoder();
 			var address = direccion.value;
 			var callback1 = function(results, status) {
+				result.innerHTML="Cargando...";
 			    if (status == google.maps.GeocoderStatus.OK) {
 			    	   doGet(results[0].geometry.location.lat(),results[0].geometry.location.lng());
 				  }
@@ -64,10 +65,11 @@ window.onload=function() {
 		}
 		error();
 
-};
+}
 
 function resize(){
 	var html = document.documentElement;
 	var height = Math.max( html.clientHeight, html.offsetHeight );
 }
-window.onresize=function() { resize(); };
+window.addEventListener('load', app, false);
+window.addEventListener('resize', resize, false);

protector.html

@@ -8,9 +8,9 @@
 	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
 	<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&libraries=places"></script>
 	<script src="js/anim.js"></script>
-<!--	<script src="js/aplicacion.js"></script>-->
+	<script src="js/aplicacion.js"></script>
 	<script>
-		window.onload = function(){
+		function load(){
 			var contact = document.querySelectorAll("#switcher div");
 			var datos = ["Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Acido Hialurónico, hidratante protector de la piel. Ayuda a prevenir intolerancias solares y daño celular provocado por la acción de rayos UV. Textura fluida, no grasa. Acabado imperceptible. <br/>Sin perfume. Sin parabenos, con color.",
 						 "Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Grosella, antioxidante protector de la piel. Ayuda a prevenir intolerancias solares y manchas pigmentarias foto-inducidas. Textura fluida, no grasa, acabado imperceptible. Sin perfume. Sin parabenos, con color",
@@ -34,6 +34,7 @@
 						contact[i].style.color="white";
 					this.style.color="#3696BF";
 				}
+			
 			var list = document.getElementsByTagName("li");
 			for(var i =0; i < list.length; i++) {
 				if(list[i].firstChild.tagName=="A")
@@ -55,7 +56,28 @@
 					pos=0;
 				document.getElementById(pos).click();
 			}
-		};
+			
+
+		var banner=document.getElementById("protector-slide");
+		var curImg=1;
+
+		function slide() {
+        	banner.className='transp';
+        	setTimeout(transp, 500);
+        	curImg++;
+        	if(curImg>4) curImg=1;
+    	}
+    	function transp() {
+			banner.style.background="url('Images/protector/slide"+curImg+".jpg') no-repeat bottom";
+    	    banner.removeAttribute('class');
+    	}
+    	setInterval(slide, 3000);
+		}
+
+
+		window.addEventListener('load', load, false);
+
+
 	</script>
 </head>
 
@@ -74,21 +96,21 @@
 
 
 	<div id="protector-slide">
-	<img id="title" src="Images/logo-nuevo.png"/>
-			<div id="image-container">
-				<img src="Images/protector/hialuronico.png" id="prod-image" />
-			</div>
+		<img id="title" src="Images/logo-nuevo.png"/>
+		<div id="image-container">
+			<img src="Images/protector/hialuronico.png" id="prod-image" />
+		</div>
 
-			<div id="prod-description">
-				<div id="prod-title">PROTECTION TIME  FPS 50+ Fluido facial con color + ác Hialurónico</div>
-				<div id="prod-text">Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Acido Hialurónico, hidratante protector de la piel. Ayuda a prevenir intolerancias solares y daño celular provocado por la acción de rayos UV. Textura fluida, no grasa. Acabado imperceptible. <br/>
-				Sin perfume. Sin parabenos, con color.</div>
-				<div> <b>Testeados en USA bajo normas FDA-COLIPA</b> </div>
-			</div>
-			<div id="space"></div>
-			<div id="switcher">
-				<div id="0">&#11044;</div><div id="1">&#11044;</div><div id="2">&#11044;</div><div id="3">&#11044;</div>
-			</div>
+		<div id="prod-description">
+			<div id="prod-title">PROTECTION TIME  FPS 50+ Fluido facial con color + ác Hialurónico</div>
+			<div id="prod-text">Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Acido Hialurónico, hidratante protector de la piel. Ayuda a prevenir intolerancias solares y daño celular provocado por la acción de rayos UV. Textura fluida, no grasa. Acabado imperceptible. <br/>
+			Sin perfume. Sin parabenos, con color.</div>
+			<div> <b>Testeados en USA bajo normas FDA-COLIPA</b> </div>
+		</div>
+		<div id="space"></div>
+		<div id="switcher">
+			<div id="0">&#11044;</div><div id="1">&#11044;</div><div id="2">&#11044;</div><div id="3">&#11044;</div>
+		</div>
 
 	</div>