1. Con una cuenta podrás:

    • Publicar preguntas y pedir ayuda
    • Crear tutoriales
    • Acceder a contenido privado
    • Convertirte en un Héroe de la web
    Cerrar notificación
  2. Eres nuevo en la comunidad y necesitas ayuda?
    Sigue estos pasos y recomendaciones antes de publicar tu duda:
    Cerrar notificación

Consulta

Tema en 'HTML y CSS' comenzado por TzJoelxK, 3 de Diciembre de 2016.

  1. TzJoelxK

    TzJoelxK Miembro

    Se incorporó:
    2 de Febrero de 2016
    Mensajes:
    41
    Me gusta recibidos:
    4
    Puntos de trofeos:
    8
    Género:
    Hombre
    Como se llama este efecto. Cuando le doy clic en el menú, este me lleva al lugar indicado que se encuentra en la misma página.

    Aquí les dejo un ejemplo.

    http://www.lizini.com/
     
  2. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    547
    Me gusta recibidos:
    418
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    En si no es un efecto cuando le das un clic en algo del menú para que te posicione en el lugar indicado, sino que utilizas id en un href en ves de www.example.com. y para posicionarte sobre el contenido especifico debes de declarar o definir los id mismo del href a los elementos div (puedes usar cualquier elemento)... Mira el ejemplo:

    <a href="#Home">INICIO</a>
    <a
    href="#Contact">CONTACTO</a>
    <a href="#Proyect">PROYECTO</a>

    <div id="Home" >
    Soy el HOME
    </div>

    <div id="Contact" >
    Soy los CONTACTO
    </div>

    <div id="Proyect" >
    Soy los PROYECTOS
    </div>

    Bueno como te habrás dado cuenta hay dos id del mismo nombre de cada uno el cual un conlleva al id especifico... Y para que tenga ese pequeño efecto en si debe de tener una propiedad transition y una traslationY . Así mismo el cual debes de utilizar un selector llamado :target

    El siguiente link es un ejemplo del selector :target
    http://www.w3schools.com/cssref/tryit.asp?filename=trycss3_target

    Nota: Puedes darle ver codigo fuente de pagina al link que mencionas y veras algo similar....
     
    A AngelKrak le gusta esto.
  3. AngelKrak

    AngelKrak Héroe de la web

    Se incorporó:
    29 de Abril de 2015
    Mensajes:
    1.153
    Me gusta recibidos:
    517
    Puntos de trofeos:
    113
    Género:
    Hombre
    Ocupación:
    Freelancer
    Localización:
    Guadalajara
    Página web:
    A gammafp y Dawud les gusta esto.
  4. TzJoelxK

    TzJoelxK Miembro

    Se incorporó:
    2 de Febrero de 2016
    Mensajes:
    41
    Me gusta recibidos:
    4
    Puntos de trofeos:
    8
    Género:
    Hombre
    Se puede hacer ese efecto solo con CSS o si o si se necesita usar JavaScript?
     
  5. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    547
    Me gusta recibidos:
    418
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    De las dos forma es posible realizar los efectos con CSS o JS .... En ocasiones se puede requerir un JS ....
     
  6. TzJoelxK

    TzJoelxK Miembro

    Se incorporó:
    2 de Febrero de 2016
    Mensajes:
    41
    Me gusta recibidos:
    4
    Puntos de trofeos:
    8
    Género:
    Hombre
    Me gustaría implementarlo solo con css, pero no encuentro algun ejemplo, solo con javascript.

    Podrías hacer un ejemplo con ambos(css y javascript), si no fuera mucha molestia. =)
     
  7. Dawud

    Dawud Miembro conocido

    Se incorporó:
    4 de Abril de 2016
    Mensajes:
    547
    Me gusta recibidos:
    418
    Puntos de trofeos:
    63
    Género:
    Hombre
    Ocupación:
    Estudiante
    Localización:
    Villahermosa, Tabasco
    Un ejemplo adecuado es el que menciona @AngelKrak http://codepen.io/AngelKrak/pen/WxjLOL
    El cual tiene un simple código de javascript que realiza lo que mencionas...
    Además con el css es diferente como te mencione tienes que usar :target para poder realizarlo sin uso de javascript
     
    A AngelKrak le gusta esto.

Comparte esta página