Regresar a la página www.ComoCrearTuWeb.com
Resultados 1 al 5 de 5

Tema: Efecto de retardo al mostrar div y aparecer poco a poco

  1. #1
    Esto empieza a ser un vicio... Habitante Avatar de victor5atodogas
    Fecha de Ingreso
    19 abr, 10
    Ubicación
    Zaragoza (España)
    Mensajes
    1,658
    Poder de Reputación
    20

    Efecto de retardo al mostrar div y aparecer poco a poco

    Me gustaria colocar a una pagina un efecto de retardo de unos 2 segundos a un div a modo de "contenedor" para que se pueda ver la imagen de fondo, y para no "molestar" al visitante, me gustaria que el div "contenedor" se fuera mostrando poco a poco.

    Para que veais un ejemplo de lo que busco, solo debeis de ir aqui y entrar en la pagina del autor de la foto (no pongo la URL de la misma para que no se piense que intento copiar).


    http://www.elmundo.es/elmundo/2010/1...287653278.html

    Saludos y muchas gracias.
    Tienda de Productos de mascotas (perros, gatos, roedores, reptiles, pajaros, peces, tarjetas regalo, cestas...) a los mejores precios El Universo del perro Sigue a El Universo del Perro en Facebook

    Si quieres montar tu tienda con Prestashop y necesitas que te ayude puedes preguntarme, tambien ofrezco buenos precios para instalacion, configuracion, etc para tu nueva tienda.

  2. #2
    Me va gustando esto... Habitante Avatar de SurKaiser
    Fecha de Ingreso
    15 oct, 11
    Mensajes
    256
    Poder de Reputación
    10
    Esto es facil pero un poco largo de codigo con javascript, pero para eso se inventaron los frameworks y el mas famoso para javascript hoy en dia es jQuery , asi que lo usaremos para lograr el efecto que quieres.

    Bastara con poner entre las cabeceras esto :

    <head>
    <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    <!-- Añade este pequeño estilo a tu div (si ya tienes div predefinido agregale lo de dentro de los corchetes -->
    div { margin:3px; width:80px; display:none;
    height:80px; float:left; }
    div#tudiv { background:#f00; }
    </head>

    Y al final del body esto :

    <body>

    <script>
    $("#tudiv").fadeIn(5000);
    </script>
    No olvides añadirle ese trozo de estilos al div y al comenzar el estilo de tu div añadele el estilo que te di es decir :
    div { lo que te di }
    div#tudiv {tus estilos}
    agregale div antes del signo de #
    #tudiv es el id de tu div (que tiene los estilos) <div id="midiv"> el id seria midiv por lo que bastaria hacer el efecto de retardo dejandolo en este ejemplo asi :
    Código HTML:
    <!DOCTYPE html>
    <html>
    <head>
      <style>
      
        div { margin:3px; width:80px; display:none;
          height:80px; float:left; }
          div#midiv { background:#f00; }
          
        </style>
      <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>
    </head>
    <body>
      
         <div id="midiv">Hola como estas</div>
        
    <script>
         
            $("#midiv").fadeIn(5000);
        
        </script>
    
    </body>
    </html>
    Saludos xD
    Mi web en construccion :
    surkaiser . com . es
    "El conocimiento es Poder"

  3. #3
    Esto empieza a ser un vicio... Habitante Avatar de victor5atodogas
    Fecha de Ingreso
    19 abr, 10
    Ubicación
    Zaragoza (España)
    Mensajes
    1,658
    Poder de Reputación
    20
    Muchas gracias, el efecto funcionar funciona como se puede ver aqui:

    http://www.jonathandiazm.com/retardo.html

    L
    a cosa es que aqui no funciona:

    http://www.jonathandiazm.com/galerias


    Quizas el error este en que pretendo aplicarle el efecto a una capa dentro de otra dentro de otra. En el supuesto de que haya que colocar el codigo ese del script justo antes de cerrar /body no puedo hacerlo, por ello agradeceria que me dijeras como a traves de javascript obligar a que lo ponga SIEMPRE ahi.

    Mucha gracias por todo y un saludo.
    Tienda de Productos de mascotas (perros, gatos, roedores, reptiles, pajaros, peces, tarjetas regalo, cestas...) a los mejores precios El Universo del perro Sigue a El Universo del Perro en Facebook

    Si quieres montar tu tienda con Prestashop y necesitas que te ayude puedes preguntarme, tambien ofrezco buenos precios para instalacion, configuracion, etc para tu nueva tienda.

  4. #4
    Esto empieza a ser un vicio... Habitante Avatar de victor5atodogas
    Fecha de Ingreso
    19 abr, 10
    Ubicación
    Zaragoza (España)
    Mensajes
    1,658
    Poder de Reputación
    20
    Por cierto, una cosa MUY importante, si coloco esto:

    <script src="http://code.jquery.com/jquery-1.7rc2.js"></script>

    en el header no me funciona el efecto Fancybox
    Tienda de Productos de mascotas (perros, gatos, roedores, reptiles, pajaros, peces, tarjetas regalo, cestas...) a los mejores precios El Universo del perro Sigue a El Universo del Perro en Facebook

    Si quieres montar tu tienda con Prestashop y necesitas que te ayude puedes preguntarme, tambien ofrezco buenos precios para instalacion, configuracion, etc para tu nueva tienda.

  5. #5
    Esto empieza a ser un vicio... Habitante Avatar de victor5atodogas
    Fecha de Ingreso
    19 abr, 10
    Ubicación
    Zaragoza (España)
    Mensajes
    1,658
    Poder de Reputación
    20
    Ok, ya esta puesto ese script en el head, pero lo he tenido que colocar al principio del todo.
    Tienda de Productos de mascotas (perros, gatos, roedores, reptiles, pajaros, peces, tarjetas regalo, cestas...) a los mejores precios El Universo del perro Sigue a El Universo del Perro en Facebook

    Si quieres montar tu tienda con Prestashop y necesitas que te ayude puedes preguntarme, tambien ofrezco buenos precios para instalacion, configuracion, etc para tu nueva tienda.

Temas Similares

  1. Respuestas: 2
    Último Mensaje: 29/05/2011, 10:54
  2. Respuestas: 9
    Último Mensaje: 24/05/2011, 12:36
  3. Poco a poco... _(algunas dudas)
    Por kotora4444 en el foro Foro General
    Respuestas: 2
    Último Mensaje: 12/01/2011, 20:05
  4. Poco a poco...aprendiendo [alguien ayuda?]
    Por nosabernada en el foro Php Bases de Datos y MySQL (Nuevo!)
    Respuestas: 44
    Último Mensaje: 05/04/2009, 19:28

Permisos de Publicación

  • No puedes crear nuevos temas
  • No puedes responder temas
  • No puedes subir archivos adjuntos
  • No puedes editar tus mensajes
  •