• Publicidad
  • Contacto
Tech News, Magazine & Review WordPress Theme 2017
  • 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
  • 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
Sin resultados
Ver todos los resultados

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

Diego Cambiaso por Diego Cambiaso
11/06/2009
Compartir en FacebookCompartir en TwitterCompartir en WhatsappCompartir en TumblrCompartir en Telegram

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, Desarrollador de Software y UX Designer 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

Siguiente
3 Repositorios de aplicaciones Adobe Air

3 Repositorios de aplicaciones Adobe Air

Tech

Diego Cambiaso

VideosReviews - Tutoriales
4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

Diego Cambiaso
26/05/2023
Lenovo ThinkPhone conoce todos los detalles, características y conectividad

Lenovo ThinkPhone conoce todos los detalles, características y conectividad

Diego Cambiaso
15/05/2023
SMARTFILMS 2023 participa de la novena edición de este festival de cine realizado con smartphones

SMARTFILMS 2023 participa de la novena edición de este festival de cine realizado con smartphones

Diego Cambiaso
13/04/2023
Motorola celebra el 50º aniversario de la primera llamada comercial desde un teléfono móvil

Motorola celebra el 50º aniversario de la primera llamada comercial desde un teléfono móvil

Diego Cambiaso
03/04/2023
4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

4+2 Herramientas profesionales de inteligencia artificial para la generación de imágenes

26/05/2023
Se abren registros de Solve For Tomorrow 2023, el programa que incentiva a los jóvenes a proponer ideas para mejorar su comunidad

Se abren registros de Solve For Tomorrow 2023, el programa que incentiva a los jóvenes a proponer ideas para mejorar su comunidad

25/05/2023
Estos son los nuevos TVs Neo QLED 2023 y barras de sonido

Estos son los nuevos TVs Neo QLED 2023 y barras de sonido

24/05/2023
Pixelco Tech

Pixelco Tech

Pixelco es 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
  • Contacto
  • Publicidad
  • Sobre Pixelco
  • Política de Privacidad

© 2023 Pixelco por Diego Cambiaso.

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

© 2023 Pixelco por Diego Cambiaso.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In

Add New Playlist