Como saber el nombre de un estilo o forma en la que se ve una web.

Hola. Soy nuevo y estoy en busqueda de aprender a hacer mis propias paginas web.
Mi pregunta es referente a el nuevo estilo o forma en la que se ven las paginas web, en la que la pagina empieza arriba y a medida de que uno va bajando, la propia pagina se va como abriendo o mostrando las cosas que estan abajo de la pagina.
Noto que se usa bastante en varias paginas en las que me he metido, en las que se ve lo que esta arriba y mientras uno va haciendo scroll hacia la parte de abajo, en la parte de arriba se cierra la imagen de fondo del principio y se ve el menu que viene arrastrandose hacia abajo con el scroll.
Asi el usuario no deja de ver el menu no importa si esta arriba o abajo.
No se con que esta programado, si con jquerry o con HTML5 solamente, o con que, pero quisiera saber si me pueden orientar para conocer con que esta programado y como se llama ese estilo, para buscar en internet como duplicarlo.
Gracias por el tiempo. un ejemplo de esas paginas es esta.

http: // www. transfer4u. es/ es/

Quiten los espacios.

Espero no me regañen por que piensan que estoy haciendo spam, es solo para dar el ejemplo.

Hola!

Todo es posible usando jQuery y CSS. Particularmente, el menú de tu ejemplo se puede hacer sólo con CSS:

header { position: fixed; top: 0px; left: 0px; width: 100%; height: 380px; }

En el ejemplo anterior, tendrías un elemento header pegado arriba a la izquierda, usando el ancho total del viewport y 380px de alto (todo esto si es que el header tiene contenido, de otra forma no verás nada :P).

Para mostrar el contenido a medida que avanzas es más complicado (pero no difícil). Lo más conocido es infinite scroll. Otra forma, usando Javascript (jQuery), es usando algo así:

jQuery(window).scroll(function(e) {
    if ($(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {
        // Si se cumple la condición es porque el scroll lateral está más abajo que el alto del viewport
    }
});

Estas son las formas que se me ocurren, pero pueden haber otras más.

Sobre los nombres, la verdad no conozco ninguno (excepto el de infinite scroll).

Viewport: es el lugar donde se muestra el contenido y no necesariamente incluye el tamaño completo del monitor. Por ejemplo, si el monitor tiene una resolución de 1440 x 900, probablemente el navegador tendrá un viewport de 1440 x 860. Esto no es una regla y he visto tamaños distintos dependiendo del monitor, la resolución y otras cosas.

skaparate escribió:Hola!

Todo es posible usando jQuery y CSS. Particularmente, el menú de tu ejemplo se puede hacer sólo con CSS:

header { position: fixed; top: 0px; left: 0px; width: 100%; height: 380px; }

En el ejemplo anterior, tendrías un elemento header pegado arriba a la izquierda, usando el ancho total del viewport y 380px de alto (todo esto si es que el header tiene contenido, de otra forma no verás nada :P).

Para mostrar el contenido a medida que avanzas es más complicado (pero no difícil). Lo más conocido es infinite scroll. Otra forma, usando Javascript (jQuery), es usando algo así:

jQuery(window).scroll(function(e) {
    if ($(window).scrollTop() == jQuery(document).height() - jQuery(window).height()) {
        // Si se cumple la condición es porque el scroll lateral está más abajo que el alto del viewport
    }
});

Estas son las formas que se me ocurren, pero pueden haber otras más.

Sobre los nombres, la verdad no conozco ninguno (excepto el de infinite scroll).

Viewport: es el lugar donde se muestra el contenido y no necesariamente incluye el tamaño completo del monitor. Por ejemplo, si el monitor tiene una resolución de 1440 x 900, probablemente el navegador tendrá un viewport de 1440 x 860. Esto no es una regla y he visto tamaños distintos dependiendo del monitor, la resolución y otras cosas.

Cuando crezca quiero ser como tú hermano.
Gracias por la explicacion. Me enfocare en aprender estos dos sistemas, aunque te confieso que nunca he entendido de que se trata el CSS, ya que siempre he pensado que es algo que uno agrega a las paginas web para que se ubiquen bien y se vean exactamente igual, ya sea en Mozilla o en Chrome o en IE o en lo que se nos ocurra. Siempre he huido a esta programacion, pero veo que no puedo hacerlo si quiero hacer algo que vaya de acorde a los tiempos actuales.
Una pregunta extra.
Seria bueno aprender a programar en Adobe Muse o Edge para hacer paginas webs como profesional???
Que lenguaje deberia aprender sobre todos los demas?
Gracias por el tiempo.

Gracias por la ayuda.

CSS no es un lenguaje de programación y no deberías tenerle miedo. ¿Es complejo? Puede llegar a ser muy complejo o muy simple; depende de lo que quieras hacer. CSS es esencial en cualquier web, pues es el diseño del sitio. Antiguamente todo se hacía con HTML (con las etiquetas font, por ejemplo). El problema de este método era que no había una separación de los conceptos y modificar el diseño se volvía un gran problema. Con una sola página, no era tanto problema pero con 10 o más, ¿te imaginas cambiar el color de la fuente de un párrafo en 100 archivos? Ahora con CSS basta modificar un archivo (dependiendo como hayas estructurado los estilos) y cambias todo.

Sobre Muse, no confío en los editores visuales, pues casi nunca se ven bien en todos los navegadores. Respecto a Edge, si te refieres al programa (y no a la suite de programas), entonces te diré que sí sirve, pues es una ayuda a la animación. Lo importante es que no utilices Flash, pues limita tu público objetivo a los navegadores de escritorio y algunos smartphones y tablets que pueden utilizar flash.

Ya que no sabes mucho de CSS, te aconsejo que comiences aprendiendo sobre Responsive Design, para que partas con una base más sólida :).

Saludos!

Gracias mil y voy a empezar a buscar informacion sobre lo que me dijistes.
Gracias de nuevo.