Saludos.
Para aprender y practicar suelo rehacer páginas web que me llaman la atención. Generalmente estas páginas suelen tener montones de referencias a estilos, plug-ins de jquery, etc, etc.
Sin embargo en algunas ocasiones las resuelvo sin tanta parafernalia.
Un ejemplo de ello es la página:
http://www.teapot-creation.com
La página es espectacular. Muy buen diseño y sobretodo un parallax muy bien aplicado.
Pero… por ejemplo no la han implementado para móvil.
Me puse manos a la obra tratando de emularla y que fuera adaptable. Lo de resposive es harina de otro costal. Pongo a vuestra disposición mi última prueba-aprendizaje. Con absoluta humildad. Para la gente con un nivel de conocimientos inferior al mío, espero les sirva para aprender, para quienes tienen un nivel superior espero que escudriñen el código y me sugieran mejoras, fallos, etc.
He resuelto todo excepto los manteles con puntilla que giran (lo he hecho con un gif animado, los autores usan un plug-in jquery) y los hover para la versión móvil (por lo que he leído no funcionan en móviles). Algunas cosas no las he hecho, para quitarme trabajo.
Podéis verlo aquí:
dereprueba.site88.net/teas/teas7.html
Las pautas generales son:
En el body la imagen de las nubes como background fixed.
Todos los divs principales tienen ancho 100% y posición relativa.
El menú y el logo posición fija (siempre se deben ver).
El resto de elementos en posición absoluta (excepto algunos elementos centrales) con anchos en porcentaje (adaptative).
Las posiciones verticales se controlan con margin-top en pixels (importante para el parallax) y las horizontales con margin-left en porcentajes (adaptative).
El código jquery tiene tres bloques:
- el que controla el scroll y el parallax
- el que controla los hexágonos con hover (que si funciona en móviles con jquery)
- el que controla el menú
Los estilos para media queries corrigen algunos defectos de posición de los objetos cuando disminuimos la ventana del navegador. Esto es consecuencia de usar margin-left para el posicionamiento horizontal. Probablemente mejorable.
Esto es todo. Espero os sea de utilidad.
