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:
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
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:
muy divertido y "util" a la vez jajaja :P
:P
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
Se podría utilizar como efecto hover, por ejemplo, de un enlace? Sería interesante...
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 :)
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
:D Divertido sin duda! no puedo ser objetiva, me chifla el mocolocogrisáceo :D y más dando botes
Excelente efecto.
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
Gracias por la explicacion, voy a ver si lo consigo.
AR
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
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
Para algo ha de servir :-)
:O
;)
:)
:D
muy divertido
gracias
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
Fíjate en esta entrada.
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
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 ;)
El DIV es una etiqueta y A es otra; si lo quieres usar como enlace, debes hacer le cambios importantes.
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.
¿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 ...