CrossSlide

CrossSlide es una animación común empleado con el plugin jQuery implementado en javascript, además es compatible con todos los navegadores, los desarrolladores web habitualmente implementaban estas animaciones en plataformas Adobe Flash™.

Slide + cross-fade

<style type="text/css">
#test1 {
margin: 1em auto;
border: 2px solid #555;
width: 550px;
height: 200px;
}
</style>

<script type="text/javascript">    
$(function() {      
$(`#test1`).crossSlide({        
speed: 45,        
fade: 1      
}, [        
{ src: `img.jpg`, dir: `up`   },        
{ src: `img1.jpg`,   dir: `down` },        
{ src: `img2.jpg`,  dir: `up`   },        
{ src: `img3.jpg`, dir: `down` }      
]);    
});  
</script>

#test1 es el bloque div donde se reemplaza el contenido con la animación CrosSlide, el contenido html del bloque se mostrara mientras se cargan la imágenes de la animación, por ejemplo si recargas la pagina podrás ver el texto "Bienvenido, espere un momento..."

El primer parámetro necesario es la función crossSlide(), segundo parámetro es un array de objetos que define la secuencia de las imágenes y otros atributos como el path.

Para obtener este primer tipo de efecto debes especificar la velocidad del movimiento en px/seg y el tiempo que dura en aparecer cada imagen además de la dirección en la que se moverá. El plugin se encarga del resto, acomoda la imagen en los bordes, decide la velocidad y la dirección. Los valores para el atributo dir pueden ser up,down,left or right.

Desvanecimiento en el mismo lugar.

<style type="text/css">
#test2 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 550px;
    height: 200px;  }
    </style>

<script type="text/javascript">
$(function() {      
$(`#test2`).crossSlide({        
sleep: 2,        
fade: 1      
}, [        
{ src: `img.jpg` },        
{ src: `img1.jpg`   },        
{ src: `img2.jpg`  },        
{ src: `img3.jpg` }      
]);    
});  
</script>

Para este tipo de animación utilizamos el parámetro sleep el cual determinara el tiempo que se presenta cada imagen, fade para determinar la duración del desvanecimiento y quitamos en parámetro dir para detener el movimiento. No uses los parámetros speed y sleep a la vez estos producen diferentes efectos.

CrossSlide avanzado.

<style type="text/css">
#test3 {
    margin: 1em auto;
    border: 2px solid #555;
    width: 550px;
    height: 200px;
  }
 </style>

<script type="text/javascript">    
$(function() {      
$(`#test3`).crossSlide({        
fade: 1      
}, [        
{          
src:  `img.jpg`,          
href: `http://www.soportedelsur.com`,          
from: `100% 80% 1x`,          
to:   `100% 0% 1.7x`,          
time: 3        
}, {          
src:  `img1.jpg`,          
href: `http://www.soportedelsur.com`,          
from: `top left`,          
to:   `bottom right 1.5x`,          
time: 2        
}, {          
src:  `img2.jpg`,          
href: `http://www.soportedelsur.com`,          
from: `100% 80% 1.5x`,          
to:   `80% 0% 1.1x`,          
time: 2        
}, {          
src:  `img3.jpg`,          
href: `http://www.soportedelsur.com`,          
from: `100% 50%`,          
to:   `30% 50% 1.5x`,          
time: 2        
}      
]);    
});  
</script>

Finalmente podemos configurar mas efectos pase de diapositivas, aumentar y disminuir tamaños, desvanecer en diferentes puntos y movimiento en diferentes direcciones.

Cada imagen panorámica y efecto zoom lleva un tiempo (time) en segundos, mas el movimiento en diagonal con los parámetros from y to para definir los puntos de inicio y de final y el desvanecimiento (fade) al final.

El zoom por defecto es 1px, la posición de fondo solo acepta palabras claves (top, left, botton, right) y porcentajes (100%, 80%, 50%, etc...), al igual que en css los porcentajes se interpretan: horizontal y luego vertical, mientras que las palabras se pueden poner en cualquier orden.

No es compatible con longitudes.

Tu puedes hacer una combinación aleatoria de las imágenes colocando la propiedad shuffle: true y cada vez que recargues la pagina la imágenes se mostraran en diferente orden.

A cada imagen le puedes hacer un hipervínculo colocando una URL relativa o absoluta. y cuando hagas click en la imagen que se presenta te llevara a la dirección correspondiente.

El rendimiento del script depende de varios factores como el hardware y sus múltiples plataformas, ya fue probado en las plataforma más comunes firefox en Windows, Internet Explorer, Safari, Opera y Chrome.