[SOLUCIONADO] Lograr efecto del nav

[Maverick2786]

Hola muchas gracias a todos

Necesito lograr el efecto de esta pagina:
http://www.blacktie.co/demo/munter/

Se que es una plantilla gratis, el problema que tengo es que necesito el efecto del nav, en otra platilla.

Es decir quieren la otra plantilla con el efecto del nav

Gracias a todos

[HackID1]

Hola Maverick2786.

Lo que comentas es un poco de Diseño CSS

Simplemente crea un Nav. o un Div. con varios elementos <ul> <li> para cada uno de los textos.

Luego puedes crear un div que será de distintos colores como se ve en la figura.

Para el movimiento cuando seleccionas alguno de los textos, debes hacer transiciones en CSS.

No es muy complicado, mirando el código CSS de la web puedes tener mucha ayuda con este tema, ya que tienes los códigos completos y funcionando.

Con estos tips puedes conseguirlo.

Saludos

[Maverick2786]

El problema que lo necesito, que conforme vaya bajando en la pagina, la opcion del nav vaya cambiando

[Mariano_Floyd]

Eso se hace con js, no es difícil, pero si no tenes conocimientos de dicho lenguaje podes usar algo como waypoints.js. Un script hecho en js fácil de implementar y de usar, que te sera muy util. Para todo lo demás, css como ya te dijeron, y un div para crear el dash.

[HackID1]

Buenas.

Al igual puedes usar JS. (pero sino,,, lee un poco abajo)

Echa un vistazo a esta web en el apartado llamado
Usar eventos de transición para animar un objeto

Ahí te dan una idea de como ir moviendo elementos.

Además te recomiendo leer sobre: eventos del mouse

Busca más info seguro encuentras lo que deseas.
No te puedo ayudar mucho con el código debido a que estoy ahora testeando otras app.

Un saludo ;)

[Mariano_Floyd]

Para lo que el quiere hacer necesita javascript, pero no para las transiciones, si no para detectar la posición del scroll y activar el ítem del menú que corresponde a lo que se esta visualizando en ese momento. Por ese mismo motivo fue que le recomendé waypoints, un script que es justamente para eso, para detectar posiciones de scrolls y lanzar eventos.
Para la transición del dash usas solo css.

[Maverick2786]

Muchas gracias a todos por su ayuda, sigo sin poder lograrlo, cuando lo consiga pondre la respuestas

Gracias por su ayuda

[siddartha23]

Cada bloque dentro del sitio es una sección, al hacer :hover en cada sección el menu cambia de propiedades ¿simple no? muestra tu avanze

[Maverick2786]

Bueno perdon la tardanza , pero aqui esta la solucion. Gracias a la ayuda de todos que me indicaron como lo podia hacer:

Funcion para controlar en que parte de la pagina estoy:

Código Javascript:

$(window).scroll(function (event) {
    var scroll = $(window).scrollTop();
    var porciento = (scroll * 100) / 8688
 
    if (porciento >= 0 && porciento <= 5) //inicio
    {
        $("#nosotros_nav").removeClass("active");
        $("#servicios").removeClass("active");
        $("#tickets_nav").removeClass("active");
        $("#empelos").removeClass("active");
        $("#contacto").removeClass("active");
        $("#inicio").addClass("active");
    } else {
        if (porciento >= 5 && porciento <= 16) //nosotros
        {
            $("#inicio").removeClass("active");
            $("#servicios").removeClass("active");
            $("#tickets_nav").removeClass("active");
            $("#empelos").removeClass("active");
            $("#contacto").removeClass("active");
            $("#nosotros_nav").addClass("active");
        }
        else {
            if (porciento >= 20 && porciento <= 76) //servicios
            {
                $("#inicio").removeClass("active");
                $("#nosotros_nav ").removeClass("active");
                $("#tickets_nav").removeClass("active");
                $("#empelos").removeClass("active");
                $("#contacto").removeClass("active");
                $("#servicios").addClass("active");
            }
            else {
                if (porciento >= 75 && porciento <= 86) //Tickets
                {
                    $("#inicio").removeClass("active");
                    $("#nosotros_nav ").removeClass("active");
                    $("#servicios").removeClass("active");
                    $("#empelos").removeClass("active");
                    $("#contacto").removeClass("active");
                    $("#tickets_nav").addClass("active");
                }
                else {
                    if (porciento >= 83 && porciento <= 96) //empelo
                    {
                        $("#inicio").removeClass("active");
                        $("#nosotros_nav ").removeClass("active");
                        $("#servicios").removeClass("active");
                        $("#tickets_nav").removeClass("active");
                        $("#contacto").removeClass("active");
                        $("#empelos").addClass("active");
                    }
                    else {
                        if (porciento >= 96 && porciento <= 100) //empelo
                        {
                            $("#inicio").removeClass("active");
                            $("#nosotros_nav ").removeClass("active");
                            $("#servicios").removeClass("active");
                            $("#tickets_nav").removeClass("active");
                            $("#empelos").removeClass("active");
                            $("#contacto").addClass("active");
                        }
                    }
                }
            }
        }
    }
 
 
 
});
 

Como se mira en la funcion parto del hecho que ya se cuando mide mi pagina, y cuanto miden en (porcentaje) cada seccion que necesitava

[NueveReinas]

Iniciado por Maverick2786

Como se mira en la funcion parto del hecho que ya se cuando mide mi pagina, y cuanto miden en (porcentaje) cada seccion que necesitava

Cuánto mide tu página en... ¿qué resolución? No mide lo mismo de alto con 1920 de ancho que con 320...

Por cierto, veo mucho código innecesario ahí, demasiados "removeClass".

[Maverick2786]

Lo del tamaño de pagina segun el css,
Los del remove, es mas que todo por seguridad , es para asegurarme que este siempre solo uno activado

[siddartha23]

Si metieras todas las secciones dentro de un array te ahorrarías mucho código y si lo hicieras mediante :hover de css te ahorrarías mucho mas...

[Maverick2786]

Lo del array no lo pense, lo del hover no podia xq ya tiene asignado otro efecto que necesitaba

Pero gracias por las sugerencias