JMiur [E]

Bounce es un efecto para Prototype + Scriptaculous creado por Andrew Tetlaw y que es útil para ... bueno, no sé si es útil pero es divertido.

Simplemente agregamos el script y luego, en cualquier parte, escribimos el código HTML con este formato:
<div id="nombre" style="" onclick="boing(this)"> ... el contenido ... </div>
<script type="text/javascript"> function boing(elm) { new Effect.Bounce(elm, {height:valor}); } </script>
donde:

el ID debe ser siempre un nombre único
el atributo STYLE puede contener cualquier propiedad o ninguna
el evento onclick es siempre el mismo y hace referencia al ID
el contenido del DIV puede ser cualquier cosa, textos o imágenes
la etiqueta SCRIPT posterior ejecuta la función y allí podemos colocar la altura del "salto", estableciendo el valor correspondiente

20 comentarios:

Omar  

muy divertido y "util" a la vez jajaja :P

Responder
Unknown  

:P

Responder
ELFARFULLI  

Buenas tardes Jmiur, lo primero es lo primero y es darte las gracias por todo lo que me estas enseñando, cosa que ya tiene su merito ya que soy un poco leño, y estoy haciendo mis primeros pinitos con HTML, mi pregunta es la siguiente:
En que parte de la plantilla tengo que agregar el script?
Un saludo y gracias
AR

Responder
Marcos Horro Varela  

Se podría utilizar como efecto hover, por ejemplo, de un enlace? Sería interesante...

Responder
Gem@  

Pues estoy dando vueltas desde que lo he visto intentado dar alguna idea pero al parecer las dejé en el camino jajajajaja pero está divertido!!
Saludos desde desde este otro lado y un poco más allá que de costumbre :)

Responder
JMiur  

Omar, Graciela: es divertido, eso es seguro :D

AR: Si ya tienenes colocado Prototype + Scriptaculous, el script l ocolocas como cualquier otro, antes de </head> ya sea cargándolo desde un archivo externo:
<script src='URL_bounce.js' type='text/javascript'></script>
o agregándolo directamente:
<script type='text/javascript'>
//<![CDATA[
....... y aquí copias y pegas el contenido del archivo JS .......
//]]>
</script>

Esas dos líneas con el DIV y el script que llama a la función se colcoan donde quieras mostrar el efecto, sea en la plantilla, un post o un elemento HTML.

Markos: Sí, eso puede hacerse aunque también es algo que podría hacerse sólo con CSS :D

Gem@: Juegue, nomás. A ver si se apura en volver :D

Responder
Maite  

:D Divertido sin duda! no puedo ser objetiva, me chifla el mocolocogrisáceo :D y más dando botes

Responder
Damián  

Excelente efecto.

Responder
JMiur  

Maite: Y ya vés, tiene estrellitas en la cabeza de tanto golpearse con el texto de arriba :D

Damián: Uno poco simple pero divertido :D

Responder
ELFARFULLI  

Gracias por la explicacion, voy a ver si lo consigo.
AR

Responder
ELFARFULLI  

Pido humildemente perdón por mi ignorancia, pero como coloco Prototype + Scriptaculous?
La verdad es que estoy alucinando, viendo la cantidad de cosas que se pueden hacer teniendo conociemento en html, por cierto JMiur, y es solo una pregunta, hay alguna manera de hacerse con el manual en formato pdf?.
De nuevo muchas gracias por tu atención.
Ar

Responder
ELFARFULLI  

JMiur, ya lo he conseguido y estoy mas contento que un niño con zapatos nuevos, gracias de nuevo, sigo haciendo pruebas con mas cosas, estoy empezando a engancharme.
AR

Responder
Bonzu Pipinpadaloxicopolis III  

Para algo ha de servir :-)

Responder
Javier Carlos  

:O
;)
:)
:D
muy divertido
gracias

Responder
Anónimo  

carnal soy nuevo en esto de los blogs y no se ni papas de como insertar un scrip y esos rollos. puedes darme una explicacion de exactamente como aser esto porfavor bueno salu2 y espero lograr tener este chistoso elemento en mi blog

Responder
JMiur  

Fíjate en esta entrada.

Responder
La hormiguita  

Muy simpático el efecto, me encantó Ar, mas contento que niño con zapatos nuevos... y en cuanto a la entrada, ya la estoy leyendo... hay dios ... es tanto... todo!!!! que es inabarcable, interminable e infinito.
No hay un icono con suspiro....ahhhh

Responder
Karla Castañeda  

Que divertido, tal vez sea bueno para tratar un poquín el stresss, y si scriptaculous ya esta ahí, hay que abusar..., hay que abusar!

El div soporta la etiqueta a?

Que tengas una estupenda noche JMiur ;)

Responder
JMiur  

El DIV es una etiqueta y A es otra; si lo quieres usar como enlace, debes hacer le cambios importantes.

Responder
Karla Castañeda  

A lo que me referia JMiur es que si dentro del contenido podía agregar un enlace, no si el div era etiqueta o no, aunque fue una pregunta tonta, ya que si se va algún sitio no se apreciará el efecto al menos de que se detuviera por un tiempo antes de enlazarse.

Gracias y buenas noches.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR