Consulta sobre Site Map

Hola amigos, yo de vuelta... quiero hacerle una consulta sobre cual sería la mejor forma para armar la siguiente web:

Es una página de inicio que la hacer click en algún botón hace una animación correspondiente a esa sección... y luego... la idea es que la pantalla quede toda con un color que también corresponde a la sección seleccionada y ahí estaría bueno que saliera un preloader... y al cargar la web.. bueno el color se pone en blanco y la idea es que... cargue un html con el scroll puesto donde aparece ese sección seleccionada... porque va a ser una web, one-page, con easing en el scroll al cambiar de secciones.

La cuestion es:

1- nunca hice un preloader en html...
2-que es mejor? hacer todo en un mismo html, pagina inicial en un contenedor y todas las otras secciones en otro contenedor, acá me estaría ahorrando la idea de averiguar como hacer la precarga de un html desde otro html... porque la idea es que la precarga se muestre en el contenedor "inicio".. y una vez cargado el html contenedor de las secciones... el "inicio" se esfuma y quedan las secciones...
3- también me gustaría saber como hago para que con javascript me anime los titulos justo al poner con el scroll una seccion... osea.. ese tipico efecto que tanto se está usando que a medida que vas moviendo el scroll van apareciendo elementos con alpha...

Lo que queres hacer es una web Parallax te recomiendo buscar tutoriales al respecto, con respecto al preloader no estan dificil de hacer lo que tienes que hacer (no es que sea la mejor forma sino quizas la mas basica y facil) a tu html agregarle un div de posicion absoluta del tamaño 100% que este sobre toda la web y con javascript tenes dos opciones

ejemplo sencillo javascript sin jquery :

window.onload = function(){
var divPreload = document.getElementById('divPreload');
divPreload.style.display = "none";
}

ejemplo sencillo javascript con jquery :

$(window).on('load',function(){
$('#divPreload').fadeOut("slow");
})

Espero que te sirva mi ayuda y cualquier duda me avisas

Grande alez! gracias por la respuesta... era parallax el tema... ya mismo me busco algún tuto... ya había visto un poco y me acuerdo que no encontré ningún tuto en español.. si conoces alguno.. bienvenido sea

con lo q respecta al preload... ahi pones que al cargar la web.. on load... se muestre con jquery el preload... no?... ahora la idea es que mientras se esté cargando la web se muestre el preload... y que en el onlad, cuando ya esté cargada, bueno el preload goToFade a cero... tenes idea de como se hace esto? pq yo soy nuevo con javascript... tenia arta experiencia programando con as2 y como son casi iguales tuve una gran ventaja pero igual estoy limitado a ser un principiante con este lenguaje...

muchas gracias!

hola Freeki, en el codigo anterior lo que hace es al cargar toda la web quita un div con id divPreload, es decir en tu html vas a tener que poner un div con ese id u otro y las funciones de js que te pase al terminar de cargar la web lo esconden, a dicho div con css le tenes que poner todos los estilos necesarios como para que aparezca sobre la web ocultando los elementos,bien puede ser un div con posicion absoluta con fondo negro en un tamaño del 100% de la web,yo hice algunos sites con parallax, la verdad no lei ningun tutorial, es solo saber que plugin usar y despues las secciones pasan a ser divs en vez de htmls

Hola Alez, gracias por tu respusta, me podrías recomendar algun plugin para hacer un site con parallax? Gracuas

Hola Freeki!, aca te dejo un link donde hay una lista de plugins para parallax

http://www.impressivewebs.com/parallax-scrolling-scripts-plugins/

Yo realize una web parallax hace no mucho usando este plugin

http://www.ianlunn.co.uk/plugins/jquery-parallax/

me descargue el ejemplo para ver como era esto del parallax y despues modificando a mi gusto y agregandole otras funcionalidades. Espero que sirva

pa, sos un groso, te pasaste, gracias! =)