Bordi di dissolvenza di div con jQuery

Question

Come posso sfocare i bordi di un div con jQuery? Pensa a una giostra con le immagini all'interno che scorre orizzontalmente. Come posso sfumare i lati sinistro e destro in modo che le immagini vicino ai bordi scompaiano gradualmente.

Spero sia chiaro. :)

Answer 1

Un modo semplice per visualizzare un set di div oltre i bordi come strisce verticali con diversi livelli di opacità, dando l'impressione che le immagini vengano sfumate.

Answer 2

Come ha detto Alex, il modo più semplice è probabilmente sovrapporre qualcosa per svanire il div sottostante. Vorrei comunque semplicemente usare un gradiente trasparente png.

Questo non sarà facile lavorare all'interno di IE6, però, ma c'è sempre un modo (personalmente non sostengo IE6 più):

http://24ways.org/2007/supersleight-transparent-png-in-ie6

Answer 3

È possibile utilizzarlo per impostare diversi div con la diminuzione la trasparenza e mettere che in una maschera sopra l'elemento che si desidera sfumare, come descritto qui: http://www.bennadel.com/blog/1014-Creating-Transparent-Gradients-With-jQuery.htm

Answer 4

Penso che questo potrebbe essere il genere di cosa che stai cercando: http://hunyadi.info.hu/en/projects/sigplus/testsuite/30-sigplus-sliders

Rich

Answer 5

Browser Webkit (ad es. Chrome e Safari) supportano una proprietà CSS denominata -webkit-mask, che consente di sovrapporre un elemento con un effetto CSS3 (ad esempio un gradiente lineare).

La seguente regola foglio di stile si applica un bordo bianco dissolvenza agli elementi con la classe .mask:

.mask { 
    -webkit-mask: -webkit-linear-gradient(
      left, 
     rgba(255,255,255,0), 
     rgba(255,255,255,1) 5%, 
     rgba(255,255,255,1) 95%, 
     rgba(255,255,255,0) 
    ); 
} 

Purtroppo, questo sarà solo lavoro nei browser basati su WebKit. Se vuoi supportare tutto il resto (cosa che probabilmente fai), potresti utilizzare al meglio PNG trasparenti.

Answer 6

È possibile provare un'ombra interna sul div contenente le immagini o una casella a un pixel singolo con un'ombra iniziale a sinistra oa destra. Puoi avere una serie di ombre applicate al css per questi elementi esterni, costruendo da un'ombra molto trasparente ma ampia a un'ombra abbastanza opaca. Puoi anche applicare queste ombre solo a un lato di un elemento.

per inserto: (si dovrà fare la sovrapposizione più alto del contenitore per le immagini, ma della stessa larghezza, e galleggiare overtop, se è la stessa altezza l'ombra apparirà da tutti i lati)

#container_overlay{ 
    box-shadow: inset 0px 0px 10px 10px white; 
    z-index:5;// higher than the container with the images 
} 

per un elemento su entrambe le estremità, utilizzare l'ombreggiatura normale.

#end_overlay{ 
    width:2px; 
    box-shadow: 0px 0px 10px 10px white; 
    z-index:5;// higher than the container with the images 
} 

float che a destra oa sinistra e dovrebbe funzionare su qualsiasi browser che capisce di sovrapposizione, e qualsiasi senza sovrapposizione lo ignorerà. Non penso che sia necessario avere qualcosa all'interno di questi, quindi sarebbe un oggetto invisibile con l'ombra che si rovescia.

Ho visto questo utilizzato per modificare la parte superiore e inferiore di diverse app di riviste, quindi il testo sembra scomparire quando esce dalla pagina.