Come funzionano le transizioni di Jquery Nivo Slider?

Mi chiedo come creare l'effetto di transizione di Jquery Nivo Slider, non creare l'intero plug-in. Ho provato a giocare con la proprietà clip del CSS, ma non sono riuscito a creare l'effetto dove parte dell'immagine si dissolve o si sposta blocco per blocco fino a quando non viene visualizzata la prossima diapositiva.Come funzionano le transizioni di Jquery Nivo Slider?

Se qualcuno ha un'idea generale o un codice specifico su come effettuare gli effetti di transizione, sarebbe apprezzato grazie.

fonte

2011-11-19 user701510

L'idea generica è la seguente: Avete div prima immagine con e poi si deve gran numero di div seconda immagine, si spawn adeguandoli proprietà CSS

Ogni secondo div immagine è solo un piccolo pezzo di esso con con sfondo regolato, quindi sovrappone l'immagine precedente, parte di esso

Con questo metodo è possibile generare i pezzi in qualsiasi ordine desiderato con qualsiasi effetto desiderato. inserirle in, fade li im, randomally riempire, qualsiasi cosa

HTML sarà simile a questa:

<!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>

E si può anche avere un altro div image2, che verrà mostrato dopo aver caricato tutti i pezzi . E distruggi tutti i pezzi dopo averlo mostrato

Ci sono molti modi per ostacolare l'intero processo su javascript Per quanto riguarda me, prima di tutto, crea una serie di pezzi (array di div) e poi puoi creare qualsiasi numero di effetti tu vuole, semplicemente visualizzandoli con effetti diversi e diverso ordine

non so se nivo usa questo modo o in un altro, ma questo funziona :)

fonte

2011-11-19 11:39:32 Tigra

appena lasciato a questa pagina tramite Google, mentre trovare una soluzione al il mio problema NivoSlider.

NivoSlider, fondamentalmente solo creare qualche elemento div in sostituzione di immagini, poi prendere l'URL dell'immagine da usare immagine di sfondo con diversa posizione di sfondo per ogni pezzi che verrà animata in seguito come:

// 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...

Ecco un esempio L'ho fatto molto tempo fa: http://reader-download.googlecode.com/svn/trunk/simple-useful-jquery-slideshow_nivo-slider-like-effect.html

fonte

2013-03-23 09:07:41

Come funzionano le transizioni di Jquery Nivo Slider?

risposta

Problemi correlati