Aprende Java Aprende Php Aprende C++ Aprende HTML 5 Aprende JavaScript Aprende JSON Aprende MySQL Aprende SQLServer Aprende Visual Basic 6 Aprende PostgreSQL Aprende SQLite Aprende Redis Aprende Kotlin Aprende XML Aprende Linux VSC Aprende Wordpress Aprende Laravel Aprende VueJS Aprende JQuery Aprende Bootstrap Aprende Netbeans Aprende Android
Sigueme en Facebook Sigueme en Twitter Sigueme en Instagram Sigueme en Youtube Sigueme en TikTok Sigueme en Whatsapp
Home / Desarrollo Web / Crear animaciones con JQuery y Spritely

Crear animaciones con JQuery y Spritely

Por jc mouse miércoles, julio 4, 2012

Spritely es un plugin para JQuery que te permite crear animaciones con puro javascript y así no tener que utilizar flash, aún esta en fase de desarrollo y le falta mucho para competir con flash, pero no por eso deja de ser una buena opción para animar páginas web sin tener que recurrir a flash.

Soporta varios navegadores incluido el IE, esta en la versión 0.6.1 y no pesa nada, trabaja bajo la licencia «Dual licensed under the MIT or GPL Version 2 licenses.» 

Para animar un banner con un movimiento, basta unas cuantas lineas de código:

<style type="text/css" media="screen">
<!--
#mi_div {
 height: 100px;
 width: 270px; 
 background: transparent url(../images/banner.png) 0 0 repeat-x;
}
-->
</style>

<div id="mi_div"></div>

<script type="text/javascript">
(function($) {
  $(document).ready(function() {  
     $('#mi_div').pan({fps: 30, speed: 0.5, dir: 'left'});  
  });  
})(jQuery);
</script>

Spritely también soporta animación de sprites, para añadir más dinamismo a las páginas web, puedes encontrar mas información en su pagina en ingles de Spritely. Ademas cuenta con muchos ejemplos bastante fáciles de entender

🙂

Tags

Artículos similares

Uso y creación de archivos 9-Patch

Antes de la aparición de los celulares inteligentes y de las grandes mejoras tecnológicas que trajeron con ellas, las ap[...]

Incrustar reporte en formulario java

Jasperreport nos brinda su propio visor de reportes, sin embargo en ocasiones queremos mostrar los informes directamente[...]

Cargar fuente TTF

Necesitamos: Android Studio 2 tipos de fuente TTF Agregar Archivo de fuente al proyecto Paso 1: Crear carpeta assets Cli[...]

¿Qué es y como se usa Jitsi Meet?

En estos días en los que medio mundo esta confinado en sus casas, la comunicación en tiempo real y preferentemente con v[...]

Cambiar API Level en Android Studio

Cuando desarrollamos aplicaciones en el IDE (Entorno de Desarrollo Integrado) de Android Studio, es importante indicar e[...]

Configura tu smartphone y PC para testear aplicaciones

Cuando desarrollamos aplicaciones para android como programadores nos interesa la velocidad al tiempo de depurar el códi[...]