WebSite X5Help Center

 
Gabriele C.
Gabriele C.
User

Effetto Opacità Decrescente su SVG al mouse-over  it

Autor: Gabriele C.
Visited 245, Followers 1, Udostępniony 0  

Salve ragazzi,

vorrei ricreare l'animazione di Website X5, che al mouse-over rende opaca una foto, ed applicarla ad un file vettoriale "<svg></svg>" come questo (https://codepen.io/dariusred/pen/EyaxQa).

Se inserisco al posto di "<img>" il tag contenente il file "<svg>" l'animazione non si avvia. 

Come posso fare?

Posted on the
9 ODPOWIEDZI - 1 POMOCNY - 1 PRAWIDłOWA ODPOWIEDź
Gabriele C.
Gabriele C.
User
Autor

Buongiorno Claudio,

per il semplice fatto che alla grafica raster prediligo quella vettoriale.

Occupa meno spazio e in ambito UX rende meglio. Un svg (es. icona o logo) è più flessibile, essendo un formato di grafica vettoriale, può scalare al meglio per adattarsi ad una pagina web a differenza delle immagini JPEG o GIF che invece non hanno questa capacità e quando vengono ridimensionate non offrono buoni risultati.

Ti ringrazio di cuore per l'aiuto.

Czytaj więcej
Posted on the from Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... non c'entra SVG, a meno che non crei l'effetto all'interno la SVG stesso se sai usare il tuo editor; ...quel link non è progressivo...!...

... puoi usare le regole CSS3 normali come per qualsiasi oggetto; ... puoi prendere spunto dal codice del mio > esempio, (+con effetto ritardato)!...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Autor
 ‪ KolAsim ‪ ‪
... non c'entra SVG, a meno che non crei l'effetto all'interno la SVG stesso se sai usare il tuo editor; ...quel link non è progressivo...!... ... puoi usare le regole CSS3 normali come per qualsiasi oggetto; ... puoi prendere spunto dal codice del mio > esempio, (+con effetto ritardato)!... .

... è fantastico il trenino! Davvero bello!

Per ricreare un effetto simile a quello di website x5 ho usato nel CSS "transition: opacity 0.5s ease-in-out".

Grazie per lo spunto!

Czytaj więcej
Posted on the from Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... infatti per la dissolvenza va bene anche quello ...wink

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Autor

Come conviene centrare l'immagine?

Czytaj więcej
Posted on the from Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... normalmente si centra con le opzioni della cella ospite...

... in extra, per capire, e forse! io dovrei vedere un link...

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Gabriele C.
Gabriele C.
User
Autor

Dovrei centarlo all'interno di un oggetto HTML inserito nell'Header, qui il link

Czytaj więcej
Posted on the from Gabriele C.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator

... o realizzi il file SVG con caratteristiche adeguate alla cella ospite, o usi il tag IMG come ti avevo detto in altra occasione...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪