Dos sliders con efectos 3D

Las cosas se vuelven cada vez más complejas, las alternativas que combinan CSS y scripts van aprovechando las nuevas posibilidades que nos dan los navegadores más modernos y la imaginación de los desarrolladores hace el resto, presentándonos alternativas con las que nunca habíamos soñado.

Lamentablemente, a veces, esas complejidades se extienden más allá de lo razonable y se nos ofrecen efectos que uno trata de mirar y así, a simple vista, nos abruman porque nos posibilitan la descarga de los demos completos pero estos son excesivos, incluyen demasiadas cosas y hay que irlos simplificando para llegar al meollo del asunto. Lo curioso es que cuando se llega a ese punto, todo es más simple de lo que parecía y uno se queda pensando ¿por que no empezarán por lo sencillo?

Ese es el caso de estos dos scripts que utilizan jQuery para generar una serie de efectos gráficos muy llamativos.

El primero se llama Adaptor y es un slider de imágenes con algunos efectos originales tales como Vertical 3D scroll y Horizontal 3D scroll. El demo completo puede verse en este enlace.

Acá, intento usar uno de ellos, el llamado scrollVert3d:

Teniendo jQuery en la plantilla, sólo se requiere un script, el que se llama box-slider-all.jquery.min.js que, en este caso, alojé en un servidor externo como DropBox.

<!-- el CSS lo ponemos antes de </head> -->
<style>
<!-- los valores de width y height dependerán del tamaño de las imágenes a mostrar -->
#viewport-shadow {
  position: relative;
  width: 635px;
}
#viewport, #box, .slide {
  list-style:none;
  height: 375px;
  width: 635px;
}
.slide img{
  height: 375px;
  width: 600px;
}
#viewport {overflow: hidden;}
#time-indicator {
  background-color: #2EDBAC;
  height: 3px;
  left:0px;
  position: absolute;
  top:388px;
  width: 0px;
}
</style>

<!-- el HTML lo ponemos en un post o en un elemento HTML -->
<div id="viewport-shadow">
  <div id="viewport">
    <ul id="box">
      <li class="slide"><img src="URL_imagen1"></li>
        ..... todas las imágenes que uno quiera .......
      </ul>
    </div>
  <div id="time-indicator"></div>
</div>

<!-- el script lo ponemos al final de la pagina o después del HTML -->
<script src="URL_box-slider-all.jquery.min.js"></script>
<script>
$(function () {
  var $box = $('#box'), $timeIndicator = $('#time-indicator'), slideInterval = 5000;
  var switchIndicator = function ($c, $n, currIndex, nextIndex) {$timeIndicator.stop().css('width', 0);};
  var startTimeIndicator = function () {$timeIndicator.animate({width: '600px'}, slideInterval);};
  $box.boxSlider({
    speed: 1000, autoScroll: true, timeout: slideInterval, effect: 'scrollVert3d', blindCount: 15, onbefore: switchIndicator, onafter: startTimeIndicator
  });
  startTimeIndicator();});
</script>

No hay manera de explicar los detalles uno por uno y hay que ver la página del autor para descubrir las distintas opciones pero, si se quiere utilizar de modo elemental, no hace falta mucho más que eso.

El otro script se llama Flux y también es un slider que incluye sofisticadas transiciones en 3D y cuyo demo original con todas las alternativas podemos ver acá.

En este caso, sólo intentaé usar el último, uno llamado Turn:

El script que necesitamos es flux.min.js que también podemos alojar el un servidor o colocar directamente en la plantilla y, como en el anterior, necesitamos tener jQuery instalado.

<!-- el CSS y el script los ponemos antes de </head> -->
<style>
div.surface{
  -moz-box-sizing:content-box;
  -webkit-box-sizing:content-box;
  -ms-box-sizing:content-box;
  box-sizing:content-box
  width:100%;
}
</style>
<script src='URL_flux.min.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[
$(function(){
  if(!flux.browser.supportsTransitions)
    alert("Flux Slider requires a browser that supports CSS3 transitions");
  window.f = new flux.slider('#slider', {autoplay: false,pagination: false});
  $('#trans3d').bind('click', function(event){
    event.preventDefault();
    if(!flux.browser.supports3d){alert("Teste navagedor no soporta transiciones");return;}
    window.f.next('turn');
  });
});
//]]>
</script>

<!-- y el HTML lo ponemos donde se nos ocurra mostrar el slider-->
<div class="container">
  <div id="slidercontainer">
    <div id="slider">
       <img src="URL_imagen1" />
        ..... todas las imágenes que uno quiera .......
    </div>
  <a id="trans3d" href="#turn" class="new">Turn</a></div>
</div>