¿Cómo funcionan las transiciones JQuery Nivo Slider?

Me pregunto cómo crear el efecto de transición de Jquery Nivo Slider, no creando todo el complemento. Intenté jugar con la propiedad clip de CSS, pero no pude conseguir que creara el efecto donde parte de la imagen se desvanece o se mueve bloque por bloque hasta que se muestre la siguiente.¿Cómo funcionan las transiciones JQuery Nivo Slider?

Si alguien tiene una idea general o un código específico de cómo hacer los efectos de transición, lo agradecería.

Fuente

2011-11-19 user701510

La idea genérica es el siguiente: Se han div primera imagen con y entonces usted tiene gran número de divs segunda imagen, desovar ellas ajustando las propiedades CSS

Cada segundo div imagen es sólo una pequeña parte de ella con con fondo ajustado, por lo que se superpone a la imagen anterior, parte de ella

Con este método puede generar piezas en el orden que desee con el efecto que desee. Deslícelas in, fade ellos im, randomally llenar, nada

HTML se verá así:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
    <title></title> 
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript"></script> 
    <style type="text/css"> 
    .first{ 
     height:500px; 
     width:500px; 
     position: absolute; 
     background:url(1.jpg); 
     z-index: 2; 

    } 

    .second_part1{ 
     height:50px; 
     width:50px; 
     position: absolute; 
     background:url(2.jpg) 0 0; 
     z-index: 2; 

    } 

    .second_part2{ 
     height:50px; 
     width:50px; 
     position: absolute; 
     background:url(2.jpg) -50px 0; 
     left:50px; 
     z-index: 2 
    } 

    .second_part3{ 
     height:50px; 
     width:50px; 
     position: absolute; 
     background:url(2.jpg) -200px -150px ; 
     left:200px;; 
     top:150px; 
     z-index: 2 
    } 
</style> 
</head> 
<body> 
    <div class="first"> 
    </div> 
    <div class="second_part1"> 
    </div> 
    <div class="second_part2"> 
    </div> 
    <div class="second_part3"> 
    </div> 
</body> 
</html>

Y usted también puede tener otro div imagen2, que será mostrado después de haber cargado todas las piezas . Y destruir todas las piezas después de que lo muestre

Hay muchas maneras de imponer el proceso completo en javascript En cuanto a mí, primero hago una variedad de piezas (matriz de div) y luego puede crear cualquier cantidad de efectos que quiere, simplemente mediante su colocación con diferentes efectos y diferentes fin

no sé si nivo utiliza esta forma u otra, pero esto funciona :)

Fuente

2011-11-19 11:39:32 Tigra

acaba de caer a esta página a través de Google, mientras que la búsqueda de una solución a mi problema NivoSlider.

NivoSlider, básicamente, sólo crear algún elemento div como sustitución de la imagen, a continuación, tomar la URL de la imagen para ser utilizado como imagen de fondo con diferente posición de fondo para cada pieza que será animado más tarde como:

// Set the slices size 
var slice_w = $slider.width()/config.slices, 
    slice_h = $slider.height(); 

// Build the slices 
for (var i = 0; i < config.slices; i++) { 
    $('<div class="slice" />').css({ 
     'position':'absolute', 
     'width':slice_w, 
     'height':slice_h, 
     'left':slice_w*i, 
     'z-index':4, 
     'background-color':'transparent', 
     'background-repeat':'no-repeat', 
     'background-position':'-' + slice_w*i + 'px 0' 
    }).appendTo($slider); 
} 

// Change the background image when slideshow starts from here... etc etc...

He aquí un ejemplo He hecho hace mucho tiempo: http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_nivo-slider-like-effect.html

Fuente

2013-03-23 09:07:41

¿Cómo funcionan las transiciones JQuery Nivo Slider?

Respuesta

Cuestiones relacionadas