Ejemplos de web de una sola página

Me la apunto

Nosotros creamos así nuestra web, por hacerla un poco distinta.
Espero que os guste y que te sirva.

http://www.q2k.es

Un saludo.

Más buenos ejemplos de webs unipágina: http://www.awwwards.com/tag/single-page

Me gustaría ayudarte, pero como bien has dicho, en mi web, la solución a ese problema es más bien cutre, seguro que hay alguna manera de hacerlo! a ver si alguien te puede echar una mano.

Un saludo.

Hola!
Estoy desarrollando una web de una sola página y tengo una duda que me trae loco.
Se trata del efecto ScrollTo del que hablamos. Mi web tiene una cabecera que se mantiene fija, como en tu web, Alex. La diferencia es que mi cabecera mide de alto bastante más que la tuya, por lo tanto, al cuando entra en funcionamiento el scrollTo, cada sección se sitúa más arriba de lo esperado. He visto en tu web Alex, que has metido unos div de separación para compensar ese espacio. Lo que ocurre es que en mi web sería demasiado espacio por defecto entre sección y sección. ¿Me explico? Mi pregunta si hay manera de modificar el script de JQuery para que la posición de cada sección se ajuste. Este es mi script:
function irSeccion(){
var donde = $(this).attr("href");
$(document).scrollTo( donde, 600 );
return false;
}
He intentando sumarle a la variable donde la diferencia del tamaño de la cabecera y no funciona... ¿Alguna sugerencia?

Opps! Pues no me había fijado!! Muchas gracias por decírmelo, aunque no se arreglarlo :S

Por cierto Alex. Me he fijado que, visualizando tu web en Firefox, los fundidos del slide que aparecen al comienzo no se muestran correctamente...

Hey Kins! Me alegra coincidir contigo en estas redes virtuales. Por cierto, ¡¡me ha flipado el curro que haces con real flow!! Increíble.
¡Gracias a los dos por la aclaración!

exacto, se hace con el código position:fixed; Lo que pasa es que tienes que asignarle una altura y una anchura, si no, no te desaparecerá de la pantalla.

Que sorpresa verte por aqui alen jeje, no soy muy experto en web pero creo que con html si le pones en el codigo position:fixed en la zona que no quieres que se mueva lo tienes

Retomando este tema... No tengo claro cómo hacer para que el header se quede fijo mientras el resto de contenidos se desplazan cuando haces scroll. ¿Alguna pista?

En esta pagina podrás encontrar muchas referencias, todas en html, y con muuy buenos diseños.

http://siteinspire.com/

Yo sin duda me quedo con esta de nike:

http://www.nikebetterworld.com/

Un saludo.

sin duda la que más me ha gustado es la de jorgerigabert.com....Muy original y usable.

http://grupooxigeno.es/

¡Gracias por la aclaración Alex!
Un saludo

Pues se hace con jquery, con esto: http://plugins.jquery.com/project/ScrollTo

Es muy simple, luego divides tu página en secciones con "section" y en el href pones, "section-1" para la sección uno y así.

El hacer scroll es bastante simple, lo difícil viene cuando quieres hacer cosas muy locas, como los ejemplos de las páginas que ponen en este post. que son flipantes.

Me mola tu web Alex. Tengo curiosidad de qué manera se programa la página para que el scroll de desplace progresivamente al pinchar en alguno de los ítems del menú.
Gracias!

Hola a todos, ya sé que hablamos sobre todo de portfolios, pero como inspiración me ha gustado mucho como se resuelve la navegación aquí: http://twitter.github.com/bootstrap/

Disfruto mucho navegando estas páginas en el iPad

http://www.ufo.lt/

Hola,

Es cierto que las webs de una sóla página y scroll son cada día más populares, hasta hay una web que recopila precisamente este tipo de diseños, el link :
ONEPAGELOVE.COM

Saludos,

anna

Mil gracias a todos por las respuestas ... la verdad que me ha servido bastante de ayuda !!

Muy chula esta página de este diseñador de mi tierra.

Esta la tengo en mis favoritos: jorgerigabert.com, me parece un buen ejemplo de lo que buscas...

En awwwards.com salen bastantes webs de una sola página realmente interesantes.

A mi también me encantan estas páginas y decidí hacer mi web personal de este estilo más o menos. Lo que pasa que en la galería si que tienes que hacer click para ampliar las imágenes y poder verlas a un tamaño considerable. ya que sino, lo veía una descompesación de scroll acojonante, dado que mostrar varios trabajos en buena calidad, llama al scroll masivo y eso puede llegar a aburrir al cliente, vamos, es una opinión personal eh! ;). Mi web la puedes ver en mi firma, aunque ya te digo, dista mucho de llegar a ser un "site" profesional o un ejemplo a seguir, tan solo es una web humilde hecha como buenamente he podido.

Un saludo.

PD: los ejemplos que ha puesto Tavo son realmente interesantes. :D

Es increible la cantidad de webs de este tipo que existen. Tavo a puesto una muy buena lista.

Personalmente me parecen una extraordinaria forma de enfocar algunos proyectos como minisites. Por otro lado muchos de estos sites suelen estar realizados en Wordpress y con HTML5/CSS3. Algunos de ellos también utilizan el efecto parallax en su navegación.

Lástima que las altas esferas son siempre reticentes a realizar este tipo de innovaciones web. La razón es que su visión tecnológica va con un retraso de 2 a 3 años.

Las páginas de una página son un tema que me encanta, y considero que a la mayoría de las pequeñas empresas les vendrían bastante bien este tipo de sitios.

Los ejemplos que muestran son muy atractivos, pero en su gran mayoría son portafolios de diseñadores o de empresas creativas que recuerdan al año 2000 con los sitios "fullflash" (ahora "fullCSS3HTML5), que aun que sean más estandarizados son igual de obesos en efectos especiales y escasos de contenido relevante, dudo mucho que la mayoría de estas páginas sean visitados de forma masiva por compradores o usuarios no desarrolladores.

Una página que considero una obra maestra por su gran diseño y el concepto de una sola página, es http://campl.us/ esta página, pese a utilizar lo último en tecnología HTML5 y CSS3, no marea y cumple su objetivo de convencer a millones de usuarios de comprar la pequeña aplicación para el iPhone.

Esta te puede ayudar http://www.instantshift.com/2011/08/11/70-latest-examples-of-modern-single-page-website-designs/?utm_source=feedburner&utm_medium=feed&utm_campaign=Feed%3A+iShift+%28instantShift%29