Scriptaculous no sólo posee un pequeño grupo de efectos contenidos en el nucleo [1 2], sino que además, nos provee de una serie de efectos combinados prediseñados y listos para utilizar.
Todas estas animaciones se basan en el tiempo así que basta establecerlo para que funcionen de la misma manera sin importar el navegador ni la velocidad de conexión. Además, pueden utilizarse sobre cualquier tipo de elemento, imágenes, párrafos, textos, tablas, formularios, etc.
Effect.Appear Effect.Fade muestra u oculta un elemento.
Si ocultamos un elemento con la propiedad display:none, utilizando el atributo <style> dentro de la etiqueta, el efecto Appear lo mostrará. Por el contrario, Fade hará que se oculte, desapareciendo lentamente. Esta es la sintaxis:
new Effect.Appear('nombre_elemento',opciones);
Sus opciones son:
duration: por defecto 1.0
from: porcentaje de opacidad inicial (0.0 a 1.0)
to: porcentaje de opacidad final (0.0 a 1.0)
Todas estas animaciones se basan en el tiempo así que basta establecerlo para que funcionen de la misma manera sin importar el navegador ni la velocidad de conexión. Además, pueden utilizarse sobre cualquier tipo de elemento, imágenes, párrafos, textos, tablas, formularios, etc.
Effect.Appear Effect.Fade muestra u oculta un elemento.
Si ocultamos un elemento con la propiedad display:none, utilizando el atributo <style> dentro de la etiqueta, el efecto Appear lo mostrará. Por el contrario, Fade hará que se oculte, desapareciendo lentamente. Esta es la sintaxis:
new Effect.Appear('nombre_elemento',opciones);
Sus opciones son:
duration: por defecto 1.0
from: porcentaje de opacidad inicial (0.0 a 1.0)
to: porcentaje de opacidad final (0.0 a 1.0)
new Effect.Fade('nombre_elemento',opciones);
Sus opciones son:
from: porcentaje de opacidad inicial (por defecto 1.0)
to: porcentaje de opacidad final (por defecto 0.0)
Sus opciones son:
from: porcentaje de opacidad inicial (por defecto 1.0)
to: porcentaje de opacidad final (por defecto 0.0)
Effect.BlindDown Effect.BlindUp Effect.SlideDown Effect.SlideUp
Estos cuatro efectos despliegan un elemento verticalmente.
new Effect.BlindDown('nombre_elemento',opciones);
new Effect.BlindUp('nombre_elemento',opciones);
new Effect.SlideDown('nombre_elemento',opciones);
new Effect.SlideUp('nombre_elemento',opciones);
Sus opciones son:
scaleX: por defecto false
scaleY: por defecto true
scaleContent: por defecto true
scaleFrom Center?: por defecto false
scaleMode: por defecto ‘box’
scaleFrom: por defecto 100.0 (0% a 100%)
scaleTo: por defecto 0 (0% a 100%)
duration: por defecto 1
Estos cuatro efectos despliegan un elemento verticalmente.
new Effect.BlindDown('nombre_elemento',opciones);
new Effect.BlindUp('nombre_elemento',opciones);
new Effect.SlideDown('nombre_elemento',opciones);
new Effect.SlideUp('nombre_elemento',opciones);
Sus opciones son:
scaleX: por defecto false
scaleY: por defecto true
scaleContent: por defecto true
scaleFrom Center?: por defecto false
scaleMode: por defecto ‘box’
scaleFrom: por defecto 100.0 (0% a 100%)
scaleTo: por defecto 0 (0% a 100%)
duration: por defecto 1
Effect.DropOut Effect.Shrink Effect.Pulsate
Effect.SwitchOff Effect.Squish Effect.Fold
Son efectos diversos que no tienen opciones.
Effect.DropOut('nombre_elemento');
Effect.Shrink('nombre_elemento');
Effect.Pulsate('nombre_elemento');
Effect.SwitchOff('nombre_elemento');
Effect.Squish('nombre_elemento');
Effect.Fold('nombre_elemento');
Effect.SwitchOff Effect.Squish Effect.Fold
Son efectos diversos que no tienen opciones.
Effect.DropOut('nombre_elemento');
Effect.Shrink('nombre_elemento');
Effect.Pulsate('nombre_elemento');
Effect.SwitchOff('nombre_elemento');
Effect.Squish('nombre_elemento');
Effect.Fold('nombre_elemento');
En todos los casos, en los demos, se muestra el efecto y luego, al cabo de un tiempo, se restaura el elemento origina. Esto se logra agregando un parámetro especial en el, pasado cierto tiempo, llamamos al efecto Appear. El código básico para cualquiera de los ejemplos es el siguiente:
<a href="javascript:void(0);" onclick="new Effect.CUAL('nombreID'); window.setTimeout('Effect.Appear(\'nombreID\',{duration:.3})',2500);"> ENLACE </a> <div id="nombreID" style="propiedades_opcionales"> ... CONTENIDO ... </div>
CUAL es el efecto a utilizar
nombreID es el nombre único del elemento sobre el cuál se usará el efecto
el valor de duration es la duración del efecto Appear
el otro valor (2500) son los microsegundos en que el elemento permanece oculto hasta restaurarse
Estos no son todos los efectos, aún hay más.
nombreID es el nombre único del elemento sobre el cuál se usará el efecto
el valor de duration es la duración del efecto Appear
el otro valor (2500) son los microsegundos en que el elemento permanece oculto hasta restaurarse
Estos no son todos los efectos, aún hay más.
10 comentarios:
great week-end
¿Alo? xD.
¿El nuevo año empezó bien?
¿Por casualidad te suena algo que te comenté hace ya algunas semanas en un comentario, sobre meter el archivo y las etiquetas en algo parecido a una entrada para poder acceder desde un vínculo a ellos en lugar de tenerlos en la sidebar?
Esto más que un comentario parece un cuestionario jeje.
Un saludo J (abreviando).
Amigo, todo empezó bien :D
Y no me he olvidado es que, simplemente, no veo la forma de hacerlo. Tengo guardada tu idea en mis notas pero no encuentro solución posible.
La dificultad es esta: los datos internos (archivos, labels) sólo son accesibles a través de la plantilla con códigos especiales que Blogger interpreta.
De cualquier manera, sigo pensando si es posible hacer algo. Tal vez, poniéndolos en la sidebar, ocultos y leyéndolos desde un post. No sé, pienso en voz alta :)
Hola:
Mi nombre es Claudia.
Encontre tu blog de casualidad y me parecio buenisimo.
Tengo una duda con esta herramienta. Yo quiero poner el efecto de squish, y no me resulta ... ¿que debo poner en esta línea
div id="nombreID" style="propiedades_opcionales
en propiedades_opcionales?
de antemano gracias.
Claudia:
Este bloque:
<div id="nombreID" style="propiedades_opcionales">
......
</>
Sería el bloque sobre el que quieres ejecutar el efecto.
style="propiedades_opcionales"
se refiere al estilo que tendrá, color de fondo, color de los textos, fuentes de los textos, el tamaño, etc.
Si quieres probar, simplemente ignora esa parte y sigue adelante. Luego, si es necesario, se van agregando.
Hola, primero que nada felicitarte por tan excelente página, verás que algunos de tus trucos los he ocupado en la mía, y con una duda, hay manera de que al utilizar el efecto fade o cualquier otro para esconder parte del post, este se recorra hasta donde se termina de esconder, al ir quitando la parte oculta, pues me pasa que cuando el post es muy largo, al ocultarlo, me deja donde estaba el efecto, y eso no se ve bien, pues al ser larga la entrada, lo recoge y me deja dentro de otro post, ojalá puedas ayudarme, gracias y nos vemos...
Que tal, mientras esperaba me puse a vagar por la página de Scriptaculuos, y encontré algo que me sirve a las mil maravillas, en sí, es una combinación de efectos, que realiza lo que yo deseo, así que lo pongo aquí, por si a alguien más le sirve:
-onclick="Effect.Fade('NOMBREUNICO');Effect.ScrollTo('article_top', { queue: 'end' });return false"-
Saludos, Nikite:
Eso es interesante, ScrollTo es el mismo efecto que se ve aquí en el botón IR ARRIBA. Como todos los efectos pueden combinarse los resultados pueden ser asombrosos.
Hola JMiur... tengo una pregunta: estoy tratando de combinar dos efectos, o mejor, de conseguir que haciendo click en el mismo enlace, ocurran dos cosas: 1. que con el efecto scrollto, la web se desplace al div que quiero mostrar, y 2. que con el efecto morph, el div contenedor cambie de color. Como sea... ya tengo los ojos chinos de buscar y buscar sin encontrar (y dar (a punta de prueba y error me refiero)) con la forma correcta de hacerlo.
Podrías ayudarme?
Saludos!... y gracias como siempre.
Lo desconozco. Tendrías que mirar en la wiki.
¿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 ...