Quando si crea un cursore immagine, l'uso di una dissolvenza incrociata è uno degli effetti più popolari. Vari cursori utilizzano tecniche diverse per creare un tale effetto. Le principali tecniche che ho trovato finora sono:
-
Metodo 1: utilizza un overlay e un underlay di
<div>e fade in e out a vicendavisibility. -
Metodo 2: crea un
<div>corrispondente alla dimensione esatta del dispositivo di scorrimento durante l'inizializzazione, gioca con la sua proprietàz-indexe quindi dissolve l'un l'altro.
Usando method-1 , è necessario creare due elementi di blocco non necessari e sovrasfruttati più comunemente un div . Prima viene applicata la proprietà background allo underlayed-div, quindi l'overlayed-div viene sfumato e successivamente modificato nella proprietà z-index per essere posizionato più in basso dell'altro.
Usando method-2 , crea solo un div extra e ora lo sfondo del contenitore è cambiato e il div overlay è sbiadito. L'implementazione di questo effetto ora limita l'effetto di transizione che può essere generato (ma questa non è la domanda in mano ).
Il motivo per cui credo che questo potrebbe essere migliore è che gli elementi aggiuntivi dovranno sempre essere aggiunti per dare l'effetto. Per questo motivo, la creazione di effetti come nivo-slider richiede la creazione di 12 o 15 div per dare l'effetto.
L'aggiunta di un numero massimo di elementi per creare l'elemento non sembra essere la giusta.
I metodi che ho citato sopra hanno usato così tanto, perché non ci sono altri modi? Ci devono essere modi migliori per creare l'effetto dissolvenza incrociata.
Quindi la mia domanda è semplice, C'è un modo migliore per creare questo effetto? Se sì, cosa sono?