• Publicidad
  • Contacto
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech News
  • Noticias
  • Video
  • Tecnología
    • Audio & Video
    • LifeStyle
    • Transformación Digital
  • Ciencia
    • Ciencia Ficción
  • Fotografía
  • Internet
    • Desarrollo/programación
    • Diseño
Sin resultados
Ver todos los resultados
Pixelco Tech News
Sin resultados
Ver todos los resultados

Implementa efectos especiales fácilmente con Script.aculo.us

Diego CambiasoporDiego Cambiaso
11/06/2009
enDesarrollo/programación, Diseño, Internet, Recursos
Tiempo de lectura3 minutos
0

EntradasRelacionados

Samsung muestra la evolución de SmartThings y presenta nuevas experiencias de dispositivos en SDC22

4 Tips de Oracle para iniciarte en el mundo de la programación

tutorial-script-aculo-us

No me gusta usar, en la medida de lo posible, tecnología Flash en mis desarrollos y desde hace unos años, cuando es necesario por requerimiento del proyecto usar algún efecto o animación, suelo hacerlo con Script.aculo.us; esta hace uso de otra biblioteca, Prototype.

En mi caso suele ser un recurso muy sencillo, rápido y faćil de implementar, logrando en pocos minutos buenos efectos y sin comprometer la usabilidad del la página.

Cómo usar Script.aculo.us

Primero hay que descargar, el archivo ZIP que contiene la biblioteca Script.aculo.us y Prototype, ejemplos, documentación y código fuente, y subirlo al servidor.

Segundo hay que enlazar Script.aculo.us y Prototype en la sección HEADER del HTML:

<script src="prototype.js" type="text/javascript"></script>
<script src="scriptaculous.js" type="text/javascript"></script>

Aplicando efectos al contenido

En este caso se usará algún efecto para hacer aparecer el contenido, para esto primero hay que aplicar un estilo que oculte el contenido del DIV:

<div id="welcome-text" style="display:none">
</div>

Luego por Javascript aplicar el efecto deseado, que podría hacer que hiciera aparecer el objeto creciendo, en cuyo caso:

Effect.Grow('welcome-text');

O que apareciera:

Effect.Appear('welcome-tex');

También, dependiendo del efecto, existen otros valores adicionales para controlar la visualización como en este caso, el tiempo:

Effect.Appear('welcome-tex', { duration: 3.0 });

Cómo se ejecutan los efectos

Los efectos se disparan por medio de eventos en Javascript, la forma de hacerlo va a depender de cuando deben ser activados. Por ejemplo si es al cargarse la página: OnLoad, si es al pasar el mouse: OnMoseOver, etc.

La lista de efectos es larga y las posibilidades de uso sólo están limitadas por la imaginación.

Avisar si el Javascript está deshabilitado

Demás está decir que si el Javascript está deshabilitado en el navegador, no va funcionar ningún efecto ni nada implementado con esta biblioteca u otro Javascript presente en la página, para esto se puede agregar código adicional en la sección BODY, así mostrará un mensaje avisando de esto al usuario:

<noscript>
<div style="color:#fff; text-align:center; width:100%; position:absolute; top:200px">
<p>El Javascript est&aacute; deshabilitado.</p>
<p>Para la correcta visualización del contenido de esta p&aacute;gina, es necesario habilitarlo</p>
</div>
</noscript>

Contenido relacionado:

  • Script.aculo.us: script.aculo.us
  • Prototype: www.prototypejs.org
  • Documentación y demostraciones: wiki.github.com/madrobby/scriptaculous

Tags: AccesibilidadbibliotecaCSSDesarrolloefectos contenidoefectos especialesimplementaciónJavascriptlibreriaPrototypeRecursosscriptscript.aculo.usSoftware libreTutorialestutotrialUsabilidad
Diego Cambiaso

Diego Cambiaso

Comunicador Social y Desarrollador de Software. Blogger desde el 2006, creador de Pixelco Tech News. Viajero y fotógrafo. Entusiasta del diseño, apasionado por la tecnología y el social media. EN-ES-IT

RelacionadoEntradas

Las Smart Cities y sus conexiones

21/08/2021

Así beneficia el avance de las Smart Cities a los pagos en línea

13/08/2021

La IA está cambiando la forma en que se crea software

08/06/2021
Microsoft Teams - Interface

Microsoft Teams disponible para usuarios de Office 365 en el mundo

20/03/2017

C-Lab de Samsung recibe 29 premios CES a la Innovación

18/01/2023

CES 2023: Un futuro sostenible gracias a la conectividad

16/01/2023

Samsung comparte su visión para llevar la calma a la experiencia de los dispositivos conectados en CES 2023

11/01/2023

Estudio: Los relojes inteligentes ayudan a prevenir o reducir la obesidad

26/12/2022

Sáquele provecho a las características de un TV 8K

21/12/2022

Ventajas de un proyector portátil de 100 pulgadas

19/12/2022

Pixelco Tech

Pixelcoes sitio de noticias de tecnología, diseño y desarrollo web e Internet escrito por profesionales.

Objetivo de Pixelco

Informar, promocionar, proporcionar recursos y ayuda sobre el diseño y desarrollo web, estándares, Internet y tecnología.

Buscar

Sin resultados
Ver todos los resultados

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

  • Publicidad
  • Contacto
  • Política de Privacidad
  • Sobre Pixelco
  • Internet
    • Recursos
    • Diseño
    • Desarrollo/programación
  • Tecnología
  • Noticias
  • Fotografía

© 2022 Pixelco Tech News - Internet & Tecnología - Por Diego Cambiaso.

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies Política de privacidad.
 

Cargando comentarios...