css + separo anim.js

css/menu.css

@@ -125,7 +125,7 @@ right: 20px;
     border-bottom: 1px solid ;
     padding-top: 10px;
     height: 66px;
-	z-index: 4;
+	z-index: 10;
 }
 #navbar
 {
@@ -138,7 +138,7 @@ right: 20px;
     font-family: 'Open Sans';
     font-size: 100%;    
     color: #485260;
-    letter-spacing: 5px;
+    letter-spacing: 2px;
 
 }
 
@@ -386,7 +386,7 @@ div.desc {
         font-family: 'Champagne and Limousine'!important;
         font-size: 120%!important;    
         color: #485260!important;
-        letter-spacing: 5px!important;
+        letter-spacing: 2px!important;
     }
     #responsive img{
         width: 55px;

css/protector.css

@@ -10,7 +10,7 @@ html, body
 	position: relative;
 	background: url(../Images/beach.jpg) no-repeat bottom ;
 	background-size: cover;
-	min-height: 730px;
+	height: 700px;
 	width: 100%;
 	margin-top:77px;
 }
@@ -78,17 +78,20 @@ h1{ text-transform: uppercase; }
 }
 
 #prod-image{
-	width: 22%;
 	display:block;
-	margin-left:10%;
+	position:absolute;
+	top:60%;
+	transform: translate(-50%,-50%);
+	left:50%;
+	margin-right:-50%;
 }
 
 #prod-description{
-	float: right;
-	width: 46%;
-	right: 110px;
+	width: 55%;
+	height: 185px;
+	right: 50px;
 	position: absolute;
-	background-color: rgba(255,255,255,0.5);
+	background-color: rgba(255,255,255,0.8);
 	padding: 30px;
 }
 
@@ -119,11 +122,29 @@ h1{ text-transform: uppercase; }
 	border-bottom: 1px solid;
 	margin-bottom: 20px;
 }
-#switcher { width:100%; z-index:5;text-align:center;}
-#switcher div { color:white; margin:0px 10px; max-height:160px; display:inline; z-index:5;cursor:pointer;}
-@media screen and (min-width:1130px){
-	#prod-description{
-		bottom: 200px !important;
-	}
+#switcher { width:100%; z-index:5;text-align:center;position:absolute;bottom:15px;}
+#switcher div {
+	color:white;
+	margin:0px 10px;
+	max-height:160px;
+	display:inline;
+	z-index:5;
+	cursor:pointer;
+	text-shadow: 0px 0px 2px black;
+}
+#switcher div[id="0"] { color:#3696BF ;}
+.ciudades { text-align:left; width:150px; padding:0px 5px; display:inline-table; }
+
+#image-container { width:39%; text-align:center; position:relative;height:700px;}
+@media screen and (min-width:1140px){
+	#prod-description{ bottom: 200px !important; }
+
+}
+@media screen and (max-width:1140px){
+	#prod-description{ bottom: 200px !important; width:50%; height:250px; }
+	
+}
+@media screen and (max-width:900px){
+	#prod-description{  width:50%; height:270px; }
 
 }

index.php

@@ -305,6 +305,7 @@ OBJETIVOS DEL CURSO: Obtener los conocimientos teóricos y prácticos en el áre
             <a href="https://www.facebook.com/pages/Especificos-Buenos-Aires/326062297573907"><img alt="Facebook" src="Images/fb.png" width=50 height=50></a>
         </div>
     </div>
+    <script type="text/javascript" src="js/anim.js"> </script>
     <script type="text/javascript" src="js/main.js"> </script>
 	<?php include('piwik.html'); ?>
 </body>

js/main.js

@@ -1,69 +1,5 @@
 window.onload = function() {
 var req = new XMLHttpRequest();
-// 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();
-}
-
 
 	var availableWidth = [ 500, 1024, 1400, 1920];
 	var size=0; 

productos.php

@@ -147,7 +147,7 @@ $(document).ready(function() {
                 <li class="cambiarcat" val="proteccion intensiva"><h3>PROTECCIÓN<br />INTENSIVA</h3></li>
                 <li class="cambiarcat" val="monodosis"><h3>MONODOSIS</h3></li>
                 <li class="cambiarcat" val="activos concentrados"><h3>ACTIVOS<br />CONCENTRADOS</h3></li>
-				<li><a href='folleto2013.pdf'><h3 class="grande" style="height:60px; color: white;">DESCARGAR<br />CATALOGO</h3></a></li>
+				<li><a href='vademecum2015.pdf'><h3 class="grande" style="height:60px; color: white;">DESCARGAR<br />CATALOGO</h3></a></li>
 				<li class="cambiarcat grande" val="tratamientos"><h3 style="height:140px; color: white;">TRATAMIENTOS<br />ESPECIFICOS</h3></li>
 			</ul>
         </div>

protector.html

@@ -7,27 +7,54 @@
 
 	<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>
 		window.onload = function(){
 			var contact = document.querySelectorAll("#switcher div");
-			var datos = ["1",
-						 "2",
-						 "3",
-						 "4"];
-			var titulos = ["1",
-						   "2",
-						   "3",
-						   "4"];
+			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",
+						 "Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Sepicalm S, biovector aminoácido con minerales, mejorando el confort cutáneo. Ayuda a prevenir intolerancias solares. Textura fluida, no graso. Acabado imperceptible. Sin perfume. Sin parabenos",
+						 "Protección reforzada frente a los rayos UVA y UVB, gracias a un sistema filtrante óptimo Específico, combinado con Aceite de sésamo, rico en acidos grasos esenciales. Ayuda a prevenir intolerancias solares y daño provocado por la accion de rayos UV. Textura fluida, no grasa, acabado imperceptible. Sin perfume. Sin parabenos"];
+			var titulos = ["PROTECTION TIME  FPS 50+ Fluido facial con color + ác Hialurónico",
+						   "PROTECTION TIME  FPS 50+ Fluido Corporal con color + Grosella",
+						   "PROTECTION TIME  FPS 50+ Fluido Facial + Sepicalm S",
+						   "PROTECTION TIME  FPS 50+ Fluido Corporal + Aceite de Sésamo"];
+			var images = [ 	"hialuronico.png",
+							"grosella.png",
+							"sepicalm.png",
+							"sesamo.png"];
 			for(var i =0; i < contact.length; i++)
 				contact[i].onclick=function() {
 					document.getElementById("prod-text").innerHTML=datos[this.id];
-					document.getElementById("prod-title").innerHTML=datos[this.id];
+					document.getElementById("prod-title").innerHTML=titulos[this.id];
+					document.getElementById("prod-image").src="Images/protector/"+images[this.id];
 
 					for(var i =0; i < contact.length; i++)
 						contact[i].style.color="white";
-					this.style.color="red";
+					this.style.color="#3696BF";
 				}
+			var list = document.getElementsByTagName("li");
+			for(var i =0; i < list.length; i++) {
+				if(list[i].firstChild.tagName=="A")
+					list[i].firstChild.addEventListener("click", function(e) {
+						if (this.hash=='#home'){
+							window.location="http://especificosba.com.ar";
+							return;
+						}
+						var target=document.getElementById(this.hash.replace("#",""))
+						scrollToY(target.offsetTop, 1500, 'easeInOutQuint');
+						e.preventDefault();
+				});
+			}
+			var pos=0;
+			setInterval(avanzar, 30000);
+			function avanzar(){
+				pos++;
+				if(pos>=4)
+					pos=0;
+				document.getElementById(pos).click();
+			}
 		};
 	</script>
 </head>
@@ -36,36 +63,33 @@
 	<div id="top_wrapper">
     	<div id="navbar">
 	        <ul id="navlist">
-	        	<li> volver </li>
-	        	<li> elige tu protector </li>
-	        	<li> c&oacute;mo aplicar </li>
-	        	<li> m&aacute;s informaci&oacute;n </li>
-	        	<li> indice uv en tu zona</li>
+	        	<li><a href="#home">volver</a></li>
+	        	<li><a href="#protector-slide">elige tu protector</a></li>
+	        	<li><a href="#aplicacion">c&oacute;mo aplicar</a></li>
+	        	<li><a href="#informacion">m&aacute;s informaci&oacute;n </a></li>
+	        	<li><a href="#uv">indice uv en tu zona</a></li>
 	        </ul>
 	    </div>
 	</div>
 
-	<img id="title" src="Images/logo-nuevo.png"/>
 
 	<div id="protector-slide">
-		<div id="slide-wrapper">
-			<img src="Images/protector/grosella.png" id="prod-image" />
+	<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>
-<!--				<img id="grosella" 	src="Images/protector/grosella-thumb.png">
-				<img id="sesamo" 	src="Images/protector/sesamo-thumb.png">
-				<img id="sepicalm" 	src="Images/protector/sepicalm-thumb.png">
-				<img id="hialuronico" src="Images/protector/hialuronico-thumb.png">-->
 			</div>
 
-			<div id="space"></div>
-		</div>
 	</div>
 
 
@@ -117,6 +141,7 @@
 				Beber agua o líquidos sin alcohol para evitar la deshidratación.<br/>
 			</div>
 		</div>
+	</div>
 
 	<div id="informacion" class="seccion">
 		<h1> <span>Más información</span></h1>
@@ -191,7 +216,7 @@
 			<br/><br/>
 			<b> Para Ecuador: </b><br/>
 			<div class="descripciones">
-				<div class="descripcion">
+				<div class="ciudades">
 					Ambato<br/>	
 					Bahia de Caraquez<br/>	
 					Canar<br/>	
@@ -201,6 +226,8 @@
 					Cuenca<br/>	
 					Esmeraldas<br/>	
 					Guayaquil<br/>	
+				</div>
+				<div class="ciudades">
 					Ibarra<br/>	
 					Inaquito<br/>	
 					Izobamba<br/>	
@@ -210,9 +237,8 @@
 					Loja La Argelia<br/>	
 					Macas<br/>	
 					Machala<br/>	
-					
 				</div>
-				<div class="descripcion">
+				<div class="ciudades">
 					Manta<br/>	
 					Milagro<br/>	
 					Nueva Loja<br/>	
@@ -222,6 +248,8 @@
 					Puyo<br/>	
 					Quero Chaca<br/>	
 					Quito<br/>	
+				</div>
+				<div class="ciudades">
 					Riobamba<br/>
 					Rumipamba<br/>	
 					Salinas<br/>	
@@ -236,7 +264,7 @@
 			<br/>
 			<b> Para México: </b> <br/>
 			<div class="descripciones">
-				<div class="descripcion">
+				<div class="ciudades">
 					Acapulco<br/>
 					Chihuahua<br/>
 					Culiacan<br/>
@@ -245,7 +273,7 @@
 					Hermosillo<br/>
 					La Paz<br/>
 				</div>
-				<div class="descripcion">
+				<div class="ciudades">
 					Merida<br/>
 					Mexicali<br/>
 					Mexico<br/>