Elemento que desaparece tras un tiempo. Portada de presentacion. | Oloblogger Puede que en ocasiones nos sea útil mostrar algún contenido pero que este sólo permanezca unos segun...

27 de enero de 2012

Elemento que desaparece tras un tiempo. Portada de presentacion.

Puede que en ocasiones nos sea útil mostrar algún contenido pero que este sólo permanezca unos segundos visible. Sería el caso de algún aviso, un elemento publicitario o incluso como me propuso alguien, una pantalla de presentación. Al final de esta entrada hay un ejemplo, por si queréis ver el resultado antes de comenzar a leer.

Para ello vamos a echar mano de lo que resulta más sencillo y que es la instrucción JavaScript setTimeout, que hace una tarea que se le indique, pero con una demora de tiempo que podemos programar.


Lo primero que necesitamos es un sistema para hacer que las cosas aparezcan/desaparezcan y vamos a utilizar uno bastante recurrente y que recomendamos tener siempre en plantilla, ya que sirve para bastantes cosas distintas. Si no lo tenéis todavía, aquí está el código para poner antes del </head>:

<style type='text/css'>
.visible {display:block;}
.invisible {display:none;}
</style>
<script type='text/javascript'>
function plegardesplegar(identificacion){
  var menu = document.getElementById(identificacion);
  if(menu.className == &quot;visible&quot;){menu.className = &quot;invisible&quot;; }
  else{ menu.className = &quot;visible&quot;; }
}
</script>

El código es sencillo. Primero creamos las clases visible e invisible que le dan esas mismas características respectivamente a las capas a las que se asignen esas clases. Luego se crea una función (plegardesplegar) que cuando le llega un id de una capa concreta, comprueba su clase actual y la cambia. Por tanto, pasará lo visible a invisible y viceversa.


Una vez hecho esto ya podemos montar nuestro elemento temporal. Sólo tenemos que crear una capa con una id única y justo detrás de ella, para que el contador de tiempo comience a correr tras su carga, este script:

<script type='text/javascript'>
window.load=setTimeout(&quot;plegardesplegar(&#39;id_capa_a_cerrar&#39;)&quot;, 8000);
</script>

En verde lo que hay que ajustar: la id de la capa a cerrar y el tiempo (en milisegundos).


Un ejemplo. Recordamos que para hacer una pantalla de presentación para el blog, propusimos hace tiempo un sistema relativamente sencillo con cookies, de manera que a un mismo usuario sólo le apareciera una vez cada cierto tiempo y no todas las veces que accediera al Home en la misma sesion. Pero este sistema todavía sería más sencillo por permitirnos prescindir de las galletitas... aunque también se podrían combinar las dos cosas.


Para hacer esto y una vez instalado el primer código de esta entrada (el de la función plegardesplegar), sólo habría que buscar el <body> y justo detrás pegar esto. El contenido interior del div es el que deberíais personalizar vosotros para que pareciera una auténtica presentación que, por supuesto, desaparecería tras unos segundos. No os paséis con el tiempo.

<b:if cond='data:blog.homepageUrl == data:blog.url'>

<div class='visible' id='capasuperpuesta' style='z-index:99999; position:fixed; top: 0; left: 0; overflow:visible; width:100%; height:100%; background: #F4F8F9;'>
<div style='width:600px; height:400px; position:absolute; top:50%; left:50%; margin-left:-300px; margin-top:-200px; padding:100px 30px 0px 0px; color:#000000; font-size:20px; line-height:20px; text-align:center;'>
Dentro de esta capa interior es dónde podemos poner una imagen, enlaces, texto, un menú, un vídeo, una lista, un flash... en fin, lo que sea.
</div>
</div>

<script type='text/javascript'>
window.load=setTimeout(&quot;plegardesplegar(&#39;capasuperpuesta&#39;)&quot;, 8000);
</script>

</b:if>

VER EFECTO AHORA MISMO
(Tras 8 segundos desaparecerá automáticamente)


¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.

Compartir
Copy URL

Y muchos más artículos interesantes si nos sigues en...

follow us in feedly

25 comentarios :

  1. Muy buena la entrada Oloman en cuanto la necesite ya se de donde coger
    Saludos

    ResponderEliminar
  2. Muy buen efecto, para dejar notas

    ResponderEliminar
  3. Aun no había comentado en tu blog que llevo siguiendo durante casi dos años que abrí el mio. He seguido muchos consejos y trucos increíbles que no pensé llegar a utilizar.
    He estado buscando en el buscador de tu sitio y no pude encontrar la solución para cambiar mi botón de "leer más" por el mío diseñado y sin que se desplace de lugar aa la esquina de mi pre post involuntariamente, lo kiero en la misma posición. Supongo que es cuestión de poco código del que no tengo ni idea. xd.
    buen trabajo este el tuyo, felicidades.

    ResponderEliminar
    Respuestas
    1. Echa un vistazo a esta entrada. Lo tienes que hacer exactamente igual pero sustituyendo .jump-link por .read-more, ya que esta última clase es la que utilizas tú en tu blog para el corte (Read on).

      Para la posición ya tienes que añadir allí un text-align, un float o un position, según lo que quieras hacer exactamente, porque esa parte no la he entendido.

      Eliminar
    2. Oloman, soy un necio... no doy puesto ni imagen ni nada... :(yo tengo una web mediante magix) y el editor solo tiene una etiqueta de HTML, y ahi es donde pego todo lo que has puesto y en la ID_CAPA_A_CERRAR puse una foto en html, pero ... no me sale nada, ya que el editor de HTML que yo manejo, no tiene NADA, simplemente te deja pegar lo que quieras, y si está bien puesto, pues se ve, en éste caso... no tengo ni idea de donde coloco el texto, ni las etiquetas (ej. head body etc) ¿Me podrias ayudar POR FAVOR? soy novato, y me gusta mucho ésto, pero... yo solo no tengo ni idea. Te dejo mi e-mail por si pudieras ayudarme, te estaria muy agradecido. info@discomovilchisco.com GRACIAS de antemano, tanto si puedes ayudarme como si no.

      Eliminar
    3. Pues si no es Blogger va a ser difícil que te eche una mano, pues no puedo conocer cómo funcionan todas las plataformas.

      Por probar, prueba a poner todo el código aquí reproducido, pero sin la línea

      <b:if cond='data:blog.homepageUrl == data:blog.url'>

      ...y...

      </b:if>

      Esas dos líneas son exclusivas para Blogger.

      Eliminar
  4. Gracias OLOMAN! este truco lo eh querido aplicar (en otro BLOG)
    eres grande Man de Nuevo Gracias, Saludos! :)

    ResponderEliminar
  5. Gracias por este blog y sus informaciones. He aplicado este efecto en una portada de presentación mientras reformo la web para el blog, pero en el Ipad y otros navegadores se superponen los vídeos de youtube que tengo debajos en el blog por encima de la capa. Algo ocurre. Mi web es la siguiente.

    http://www.orquestacostabella.com/

    Muchas gracias

    ResponderEliminar
    Respuestas
    1. Añade a la dirección del src
      &wmode=transparent

      Es mágico ;)

      Eliminar
  6. saludos oloman, te felicito x tu blog xk realmente he encontrado muy buenos trucos k voy a aplicar en mi blog k estoy creando... soy nuevo en esto y kisiera k me sakes de una duda; cuando te refieres a una "id única" te refieres a una url de la imagen k vamos a mostrar? te agradezco de antemano y disculpa mi ignorancia, como te repito soy nuevo en esto =/

    ResponderEliminar
    Respuestas
    1. Este comentario ha sido eliminado por el autor.

      Eliminar
    2. No. Una id es un nombre o conjunto de caracteres que se le dan a un elemento. Por ejemplo: pepe, 203445, bloq254, capasuperpuesta, etc.

      Una capa (span,div) puede llevar una clase (class) y/o un identificdor (id). Las clases pueden aplicarse a distintos elementos pero las id tienen que ser únicas, es decir, sólo puede haber una capa por página que lo lleve. De esa manera se puede saber a qué elemento te refieres cuando se nombra desde por ejemplo un programa.

      Eliminar
  7. Hola, mi nombre es Gabriel y disculpa, pero no soy muy bueno en esto, mi única duda porque lo demás funciona perfecto, es que le agregué un texto y sale perfecto, pero al intentar agregarle una imágen jpg alojada en Dropbox, me aparece el detalle del Link agregado (obvio que no me ha funcionado). Mi consulta es si debo agregarle algún código img u otro adelante del Link. Espero haber sido claro en la pregunta. Desde ya muchas gracias por la respuesta. Muy interesante tu Blog, soy un seguidor del mismo. Saludos desde Devoto, Córdoba, Argentina.

    ResponderEliminar
    Respuestas
    1. Devoto es un nombre muy adecuado después de haber comentado que eres seguidor de este blog ;)

      Para que la imagen te salga tienes que escribir su dirección dentro de una etiqueta IMG. Sería así:
      <img src="DIRECCION_IMAGEN"/>

      Eliminar
    2. Hola Olo...
      Tengo el script de un pequeño y sencillo calendario que pasa "solito" los días los meses y los años, pero necesito que haga algo más aún. Necesito crear un vinculo idéntico para cada día, pero que solo esté disponible para clickear sobre él el día actual que está remarcado y ninguno más. Lo ideal, me parece, sería que el remarque (highlight) que cambia cada día para señalar el día actual, "arrastrara" consigo mismo el link (pues es el mismo para cada dia) ¿Es posible hacer eso?
      Gracias adelantadas.
      Ceroid.

      Eliminar
    3. Sin ver el script me resulta imposible decirte algo. Seguro que se puede, pero como te dije tendría que ver si yo soy capaz de interpretar ese código.

      Eliminar
  8. Hola
    ¿cómo harías para que un elemento apareciera después de cierto tiempo de navegar en la página.
    Saludos

    ResponderEliminar
    Respuestas
    1. Con el mismo código Ernesto, pero al elemento ponle la clase "Invisible. Así al ejecutarse el JS, tras el tiempo programado se cambiará a "Visible" y aparecerá.

      Eliminar
  9. Hola!!! Una consulta, me gustaría que al iniciar mi página web aparezca un video que tengo colgado ya en YouTube, y cuando termine de reproducirse (lo tengo configurado en forma automática) desaparezca, copié y pegué tus códigos el de SetTimeOut tal cual y también el segundo que es cortito de plegardesplegar y en id_capa_a_cerrar lo reemplacé por el código que me brindó el mismo canal de YouTube para colocar en mi página de internet, pero veo que algo está mal porque al realizar la prueba no aparece nada, básicamente la cuestión sería: en qué parte exactamente en tus códigos tendría qué colocar lo siguiente??? De tal forma que aparezca el video y al terminar de reproducirse desaparazca... MIL GRACIAS!!!

    ResponderEliminar
  10. perdón, no me dejó copiarlo, tuve que separar todo, mi código es: < center > < i f r a m e w i d t h="500" h e i g h t="281" s r c="//www.youtube.com/embed/CPvtxoMVqYE?rel=0&autoplay=1" frameborder="0" allowfullscreen > < / i f r a m e > < / center >

    ResponderEliminar
    Respuestas
    1. Todo eso lo tienes que poner en lugar del texto del ejemplo "Dentro de esta capa interior e...". Y luego el retardo tendrá que ser el mismo que tiempo tiene de duración el vídeo. Quizás algún segundo más por si las demoras. Sólo eso.

      Eliminar
  11. Hola Oloman: Gracias por responder, he seguido paso a paso tus indicaciones pero sigue sin aparecerme el efecto, de hecho sí que me aparece el vídeo en el inicio, pero debido a que no desaparece, entonces ya no me permite visualizar el contenido de mi web, lo que hice fue copiar y pegar exactamente el primer recuadro de códigos que va antes del < head > y el último de tus recuadros con códigos (entiendo que el segundo no es necesario porque ya lo incluye el 3ero.) también lo copié y pegué tal cual, a excepción que agregué mi código del vídeo de YouTube en lugar de tu texto que dice "Dentro de esta capa... lo que sea". Asimismo probé eliminando y
    y probé también agregando &wmode=transparent tal como aconsejaste en otros de tus comentarios, tmb he respetado tus milisegundos de 8000. Ojalá y pudieras orientarme qué estoy haciendo mal??? O no será que hay alguna otra variable que no he estado considerando y debería modificar??? De nuevo gracias por tu atención...

    ResponderEliminar
    Respuestas
    1. No sé C Kiryat, lo tendría que ver, pero primero prueba a añadir mi código tal cual (primer y tercer trozo, eso está bien) y si funciona ya está claro que tiene que ser cosa del código que sustituyes.

      Eliminar
  12. Codigo funciona perfectamente , se puede ver en mi sitio http://www.cadalsocomputer.es/

    He tenido que cambiar los carracteres especiales ;)

    Gracias

    ResponderEliminar
    Respuestas
    1. Sí Popu. Eso es porque aquí los suelo ofrecer adaptados para Blogger. Me alegro de que te sirviera.

      Eliminar