CrossSlide

Es un slide, construído en Query, que me ha encantado: quizá porque tiene ejemplos y efectos a elegir, quizás porque incluye el que para mí es el más atractivo de todos (Ken Burns) y es con el que he llevado a cabo mi prueba (podéis verlo bajo las entradas ).

Resulta muy fácil de construir, siguiendo las instrucciones de gruppo4, donde también podéis descargar el script que acciona el slide.

Para abreviar, ésto es lo que necesitáis:

.- Un poquito de CSS, susceptible de manejar a vuestro gusto:

<style type="text/css">

#test3 {

margin: 1em auto;

border: 2px solid #555;

width: 550px;

height: 367px;

}

</style>

.- SCRIPTS:

<script src='http://.../jquery-1.2.3.min.js' type='text/javascript'/>

<script src='http://.../jquery.cross-slide.js' type='text/javascript'/>

.- HTML: a insertar donde querías ver vuestro slide:

<script id='source-test3' type='text/javascript'>//<![CDATA[

$(function() {

$('#test3').crossSlide({

fade: 1

}, [

{

src: 'http://.../Malva.png',

from: '100% 80% 1x',

to: '100% 0% 1.7x',

time: 3

}, {

src: 'http://.../Explosion.png',

from: 'top left',

to: 'bottom right 1.5x',

time: 2

}, {

src: 'http://.../esferaAs%C3%AD.png',

from: '100% 80% 1.5x',

to: '80% 0% 1.1x',

time: 2

}, {

src: 'http://.../Tronco2.jpg',

from: '100% 50%',

to: '30% 50% 1.5x',

time: 2

}

]);

});

//]]></script>



<div id='test3' style='padding: 0pt; overflow: hidden; position: relative;'><img src='http://.../Malva.png' style='position: absolute; visibility: hidden; top: 0px; left: -385px; width: 935px; height: 782px; display: block;'/><img src='http://.../Explosion.png' style='overflow: hidden; position: absolute; visibility: visible; top: -81.236px; left: -121.471px; width: 670.375px; height: 447.5px; opacity: 1; display: block;'/><img src='http://.../esferaAs%C3%AD.png' style='position: absolute; visibility: hidden; top: 0px; left: -44px; width: 605px; height: 454px; opacity: 1; display: block;'/><img src='http://.../Tronco2.jpg' style='position: absolute; visibility: hidden; top: -92px; left: -82px; width: 825px; height: 551px; opacity: 0; display: block;'/></div>

Me encanta cómo queda... :D