En este post mostraremos como realizar una animacion sencilla que refleje los distintos tipos de movimientos que se puede hacer con los textos.
Crearemos un contenedor en el cual escribiremos 7 nombres que representan a: Java, Matlab, HTML, Threads, GUI, Button, JSF, cada nombre tendra un color y un efecto de movimiento diferente.
Para este ejemplo haremos todo desde HTML y JavaScript, no utilizaremos CSS.
Haremos uso del script "Kinetic", el cual nos brindara un ambiente de javaScript, creando stages, layers y utilizaremos algunos de sus metodos para lograr los efectos que se obtuvieron en el ejemplo:
El ejemplo se desarrollara dentro de las etiquetas <body> y </body> y seguira de la siguiente manera:
Para agregar el script Kinetic aplicamos la siguiente sentencia:
<script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v4.7.4.min.js"></script>
Una vez que se importa el script, se continua programando en JavaScript dentro de las sentencias siguientes:
<script>
.........codigo en javascript.........
</script>
E incluimos el siguiente codigo que permite agregar un contenedor donde incluiremos nuestros textos.
//Creamos una nueva etapa llamada "stage"
var stage = new Kinetic.Stage({
container: 'container',
width: 600,
height: 340
});
//Creamos nueva capa sobre la que colocaremos los easings
var layer = new Kinetic.Layer();
Creamos los textos al los que les pondremos los efectos de movimiento.
//Creamos la lista que se mostrara con su respectivo nombre, //color y efecto (easings).
var easings = [ {
easing: 'ElasticEaseOut', name:'Java', color:'blue'},
{easing: 'BackEaseIn', name:'Matlab', color:'red'},
{easing: 'EaseOut', name:'HTML', color:'green'},
{easing: 'EaseInOut', name:'Threads', color:'blue'},
{easing: 'BackEaseIn', name:'GUI', color:'yellow'},
{easing: 'EslasticEaseIn', name:'Button', color:'red'},
{easing: 'BackEaseInOut', name:'JSF', color:'orange'}
];
Como se puede observar en las sentencias anteriores los efectos vienen daros por: 'BackEaseIn, EaseOut, EaseInOut, etc. Existen otros efectos aparte de estos.
Nuestro ejemplo se veria de la siguiente manera:
pero esto me va a servir para LA BASE DE DATOS EN SQL LA CUAL YA YO LA TENGO ELABORADA PERO NO ES MÍA SI NO DE UN AMIGO QUE QUIERE QUE LE AJUSTE LA PAGINA WEB y quiere isertarle un script de movimiento horizontal
ResponderBorrar